jquery跨域请求的原理

浏览数：44 / 时间：2015年06月09日

jquery 跨域请求什么实现？

jQuery $.ajax()支持get方式的跨域,这其实是采用jsonp的方式来完成的.，$.getJSON是$.ajax()的封装，可以参考jquery aip 的$.getJSON部分。

2、什么是 JSONP？

JSONP（JSON with Padding-填充json数据也就是常用的json跨域方式）：利用script标签，通过特定的src地址的调用，来执行一个客户端的js函数，在服务器端生成相对的数据（json格式）并以参数的形式传递给这个客户端的js函数并执行这个函数，前提是需要服务器端的数据输出支持。

3.为什么使用JSONP ？

由于 JSON 只是一种含有简单括号结构的纯文本，因此许多通道都可以交换 JSON 消息。因为同源策略的限制，我们不能在与外部服务器进行通信的时候使用 XMLHttpRequest。而JSONP是一种可以绕过同源策略的方法，即通过使用 JSON 与 <script> 标记相结合的方法，从服务端直接返回可执行的JavaScript函数调用或者JavaScript对象。

4、JSONP原理

在 jQuery 1.2中，您可以通过使用JSONP形式的回调函数来加载其他网域的JSON数据，客户端传递的URL里要包含callback变量，如"myurl?callback=?"。jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。( 注意：此行以后的代码将在这个回调函数执行前执行),服务端获取客户端传递的callback的值，和需要传递的json字符串构成 callback+”(“json“)” 传回给客户端。
再详细点
(1)首先在客户端注册一个callback, 然后把callback的名字传给服务器,此时，服务器先生成 json 数据。然后以 javascript 语法的方式，生成一个function , function 名字就是传递上来的参数callback

(2)最后将 json 数据直接以入参的方式，放置到 function 中，这样就生成了一段 js 语法的文档，返回给客户端。客户端浏览器，解析script标签，并执行返回的 javascript 文档，此时数据作为参数，传入到了客户端预先定义好的 callback 函数里.（动态执行回调函数）

5、先看看jQuery.ajax()方式，这种比较容易理解

$.ajax({ 
            async:false, 
            url: 'http://www.xxxxxxx.action',  // 跨域URL
            type: 'GET', 
            dataType: 'jsonp', 
            jsonp: 'callback', //默认callback,也就是URL后面所带的 url?callback=?
            data: mydata, 
            timeout: 5000, 
            beforeSend: function(){  //jsonp 方式此方法不被触发。原因可能是dataType如果指定为jsonp的话，就已经不是ajax事件了
            },
            success: function (json) { //客户端jquery预先定义好的callback函数，成功获取跨域服务器上的json数据后，会动态执行这个callback函数 
                if(json.actionErrors.length!=0){ 
                    alert(json.actionErrors); 
                } 
            }, 
            complete: function(XMLHttpRequest, textStatus){ 
                $.unblockUI({ fadeOut: 10 }); 
            }, 
            error: function(xhr){ 
                //jsonp 方式此方法不被触发
                //请求出错处理 
                alert("请求出错(请检查相关度网络状况.)"); 
            } 
        });

6、$.getJSON 方式

 $.getJSON("xxxxxx/user.html?callback=?", {},function(json){
	if(json.errorFlag=="OK"){
	
	}else{
		
	}
 )};

java 后台代码

String callback = request.getParameter("callback");
JSONObject ret =new JSONObject();
ret.put("errorFlag", "OK");
out.print(callback+ "(" + ret.toString() + ")");

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

jquery跨域请求的原理