jsonp跨域请求资源使用方法与简单原理

前几天在做项目的时候遇到了需要跨域进行数据交互的问题，后来查阅了相关资料，也测试成功了，下面给大家分享一下这种跨域方式----jsonp

大家都知道，由于同源策略（约定：协议、域名、端口号相同）的限制，js是不允许在不用的域之间进行数据交互和通信的，但是就如同<script>内的src属性是没有跨域限制的，同样的，在页面上引入不同不同域上的js脚本时是可以的，它并不在xhrhttprequest协议的限制范围。

在这里简单说一下jsonp的json的区别与联系:json仅仅是一种数据格式，而jsonp是一种信息交流方式，它是一个非官方的协议，允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问。在jsonp跨域请求过程中，数据都是json格式存在的。

具体使用方法如下：（假如已经绑定了一个check（）事件）

function check() {
	   	$.ajax({
	   		type:"GET",//jsonp只支持get方式
	   		url:"http://127.0.0.1/*****/Login/check_login",//请求的服务器地址
	   		data:{id:123456},//需要传送的数据
	   		dataType:"jsonp",//规定数据传送方式
	   		jsonp:"callback",//定义回调函数
	   		success:function callback(data) {//请求成功后处理
	   			alert(data.flag);
	   		},
	   		error:function(XHR) {//请求失败处理
	   			alert(XHR.status);
	   		}
	   	});
	   }
           

然后在服务器端获取数据和输出数据的方式为：

public function check_login() {
          $id = $_GET['id'];
          $arr = json_encode(array('success'=>true,'msg'=>$id));
          $callback = $_GET['callback'];
          echo $callback."(".$arr.")";
    }
           

需要注意的是服务器端输出的必须是：客户端获取的回调函数名字（json数据），这种格式的，不能有其他数据，否则客户端无法返回请求资源，此时http状态码为200，但是会调用error错误处理函数。如果代码正确的话，服务器端返回的数据应该是：jquery5672356823（{‘这里是json数据’}）。客户端只需要在请求成功的succes方法中做返回数据的相关处理即可。上述代码中的data参数就是服务器端返回的json数据。其实讲到这里大家可能会有搞不明白，返回的明明是一个function，为什么可以直接调用json数据。下面简单说一下jsonp的基本工作过程。

客户端在定义dataType:"jsonp" 后，浏览器会注册一个callback，然后通过jsonp："callback" 的方式将函数名（如:jquery123456）传到服务器，服务器端在接收并处理完客户端数据后，通过javascript语法的方式，生成一个function，function名字就是由客户端传过来的函数名（jquery123456），而数据将会以参数形式传入function中。这样的话，服务器端就返回了一个jsvaxcript文档。然后，浏览器解析这个script文档，并将解析后的数据已参数形式传入客户端动态调用的回调函数中（如上述success：function(data)）

注意：（1）php服务器端在返回json数据类型时，如果数据中包含中文，在数组->json类型的转换过程中，即在使用json_encode（$arr）时，要为json_encode方法添加一个参数:JSON_UNESCAPED_UNICODE。

（2）在使用tp框架时，一定要记得将页面调试工具关闭，否则服务器端无法正常返回数据。'SHOW_PAGE_TRACE'=>false，

‘’