ajax跨域 jsonp

liuyongfang0

2015-05-03

js跨域，比如说你点击你本地环境里面的一张页面上的一个按钮，请求服务器端的一个文件。要想成功返回有效数据，那就必须得跨域。

上代码：index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jsonp跨域</title>
</head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
//运用跨域方法
function getmesg(){
	$.ajax({
		 url:'http://xxx.xxx.xxx.xxx/ccb/jsonp.php',  //跨域到http://www.wp.com，另，http://test.com也算跨域
		 type:'GET',                                //jsonp 类型下只能使用GET,不能用POST,这里不写默认为GET
		 dataType:'jsonp',                          //指定为jsonp类型
		 data:{"name":"Zjmainstay"},                //数据参数
		 jsonp:'callback',                          //服务器端获取回调函数名的key，对应后台有$_GET['callback']='getName';callback是默认值(这两项是用了jsonp之后一定要写的，格式问题，没有为什么！jsonp:'callback' 是必写项！)
		 jsonpCallback:'getName',                   //回调函数名(这一项是用了jsonp之后一定要写的，格式问题，没有为什么！其中 getName是回调函数名)
		 success:function(result){                  //成功执行处理，对应后台返回的getName(data)方法。
			 alert(result.name);
		 },
		 error:function(msg){
			 alert(msg.toSource());                 //执行错误
		 }
	 }); 
}
//-----------------------------------------------------------------------------------------------------------------------------------
//普通不跨域的ajax

function notajax(){
	$.ajax({
		 url:'http://xxx.xxx.xxx.xxx/ccb/jsonp.php',  //跨域到http://www.wp.com，另，http://test.com也算跨域
		 type:'GET',                                //jsonp 类型下只能使用GET,不能用POST,这里不写默认为GET
		 dataType:'text',                           //指定数据类型
		 data:{"name":"Zjmainstay"},                //数据参数
		 success:function(result){                  //成功执行处理，对应后台返回的getName(data)方法。
			 alert(result.name);
		 },
		 error:function(msg){
			 alert(msg.toSource());                 //执行错误，访问不到  会返回错误！！！
		 }
	 }); 
}

</script>
<body>
	<a href="javascript:void(0);" onclick="getmesg();">点击跨域</a>
    <br/><br/><br/><br/><br/><br/>
    <a href="javascript:void(0);" onclick="notajax();">普通ajax</a>
</body>
</html>

引用的是jquery.js

服务器端文件：jsonp.php

<?php
	header('Content-type:text/html; charset=utf-8');
	$arr = array(
		'name'=>'这个是名字',
		'age'=>'今天27岁'
	);
	echo 'getName('.json_encode($arr).')'
?>

使用跨域之后返回结果：

ajax跨域 jsonp