jQuery如何实现跨域调取数据

最新推荐文章于 2024-04-21 14:34:19 发布

weixin_30343157

最新推荐文章于 2024-04-21 14:34:19 发布

阅读量192

点赞数

文章标签： json javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/kayla-zhang0503/p/8825064.html

版权

由于JS同源策略的影响，因此js只能访问同域名下的文档。因此要实现跨域，一般有以下几个方法：

一、处理跨域的方式：

1.代理

2.XHR2

HTML5中提供的XMLHTTPREQUEST Level2（及XHR2）已经实现了跨域访问。但ie10以下不支持

只需要在服务端填上响应头：

header("Access-Control-Allow-Origin:*");/*星号表示所有的域都可以接受，*/

header("Access-Control-Allow-Methods:GET,POST");

3.jsonP

原理：

ajax本身是不可以跨域的，
通过产生一个script标签来实现跨域。因为script标签的src属性是没有跨域的限制的。

其实设置了dataType: 'jsonp'后(http://www.runoob.com/json/json-jsonp.html)，$.ajax方法就和ajax XmlHttpRequest没什么关系了，取而代之的则是JSONP协议。JSONP是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问。

ajax的跨域写法：

（其余写法和不跨域的一样）：

比如

二、解决ajax跨域访问、 JQuery 的跨域方法

JS的跨域问题，我想很多程序员的脑海里面还认为JS是不能跨域的，其实这是一个错误的观点；有很多人在网上找其解决方法，教其用IFRAME去解决的文章很多，真有那么复杂吗？其实很简单的，如果你用JQUERY，一个GETJSON方法就搞定了，而且是一行代码搞定。

下面开始贴出方法。

 
          //跨域（可跨所有域名） 
         
          $.getJSON( 
          "http://user.hnce.com.cn/getregion.aspx?id=0&jsoncallback=?" 
          , 
          function 
          (json){  
         
          //要求远程请求页面的数据格式为： ?(json_data) //例如： //?([{"_name":"湖南省","_regionId":134},{"_name":"北京市","_regionId":143}]) alert(json[0]._name);  
         
          });  
         
          $.getJSON( 
          "http://user.hnce.com.cn/getregion.aspx?id=0&jsoncallback=?" 
          , 
          function 
          (json){  
         
          //要求远程请求页面的数据格式为： ?(json_data) //例如： //?([{"_name":"湖南省","_regionId":134},{"_name":"北京市","_regionId":143}]) alert(json[0]._name);  
         
          });

注意，getregion.aspx中，在输出JSON数据时，一定要用Request.QueryString["jsoncallback"]，将获取的内容放到返回JSON数据的前面，假设实际获取的值为42342348，那么返回的值就是 42342348([{"_name":"湖南省","_regionId":134},{"_name":"北京市","_regionId":143}])

因为getJSON跨域的原理是把？随机变一个方法名，然后返回执行的，实现跨域响应的目的。

下面一个是跨域执行的真实例子：

 
          <script src= 
          "http://common.cnblogs.com/script/jquery.js" 
          type= 
          "text/javascript" 
          ></script>  
         
 
          <script type= 
          "text/javascript" 
          >  
         
 
          //跨域（可跨所有域名）  
         
 
          $.getJSON( 
          "http://e.hnce.com.cn/tools/ajax.aspx?jsoncallback=?" 
          , { id: 0, action:  
          'jobcategoryjson' 
          },  
          function 
          (json) { alert(json[0].pid); alert(json[0].items[0]._name); });　  
         
 
            
          </script> 
         

 
          <script src= 
          "http://common.cnblogs.com/script/jquery.js" 
          type= 
          "text/javascript" 
          ></script>  
         
 
          <script type= 
          "text/javascript" 
          >  
         
 
          //跨域（可跨所有域名）  
         
 
          $.getJSON( 
          "http://e.hnce.com.cn/tools/ajax.aspx?jsoncallback=?" 
          , { id: 0, action:  
          'jobcategoryjson' 
          },  
          function 
          (json) { alert(json[0].pid); alert(json[0].items[0]._name); });　  
         
 
            
          </script>  
         

jQuery跨域原理:

浏览器会进行同源检查,这导致了跨域问题,然而这个跨域检查还有一个例外那就是HTML的<Script>标记;我们经常使用<Script>的src属性,脚本静态资源放在独立域名下或者来自其它站点的时候这里是一个url;这个url响应的结果可以有很多种,比如JSON,返回的Json值成为<Script>标签的src属性值.这种属性值变化并不会引起页面的影响.按照惯例，浏览器在URL的查询字符串中提供一个参数，这个参数将作为结果的前缀一起返回到浏览器;

看下面的例子：

 
          <script type= 
          "text/javascript" 
          src= 
          "http://domain2.com/getjson?jsonp=parseResponse" 
          > </script>  
         
 
          响应值：parseResponse({ 
          "Name" 
          :  
          "Cheeso" 
          ,  
          "Rank" 
          : 7})  
         
 
          <script type= 
          "text/javascript" 
          src= 
          "http://domain2.com/getjson?jsonp=parseResponse" 
          > </script>  
         
 
          响应值：parseResponse({ 
          "Name" 
          :  
          "Cheeso" 
          ,  
          "Rank" 
          : 7})  
         

这种方式被称作JsonP;(如果链接已经失效请点击这里:JSONP);即：JSON with padding 上面提到的前缀就是所谓的“padding”。那么jQuery里面是怎么实现的呢？

貌似并没有<Script>标记的出现！？OKay，翻看源码来看：

页面调用的是getJSON：

 
          getJSON:  
          function 
          ( url, data, callback ) { 
         
          return 
          jQuery.get(url, data, callback,  
          "json" 
          ); 
         
          },

继续跟进

 
          get:  
          function 
          ( url, data, callback, type ) { 
         
          // shift arguments if data argument was omited 
         
          if 
          ( jQuery.isFunction( data ) ) { 
         
          type = type || callback; 
         
          callback = data; 
         
          data =  
          null 
          ; 
         
          } 
         
          return 
          jQuery.ajax({ 
         
          type:  
          "GET" 
          , 
         
          url: url, 
         
          data: data, 
         
          success: callback, 
         
          dataType: type 
         
          });

跟进jQuery.ajax，下面是ajax方法的代码片段：

 
          // Build temporary JSONP function 
         
          if 
          ( s.dataType ===  
          "json" 
          && (s.data && jsre.test(s.data) || jsre.test(s.url)) ) { 
         
          jsonp = s.jsonpCallback || ( 
          "jsonp" 
          + jsc++); 
         
          // Replace the =? sequence both in the query string and the data 
         
          if 
          ( s.data ) { 
         
          s.data = (s.data +  
          "" 
          ).replace(jsre,  
          "=" 
          + jsonp +  
          "$1" 
          ); 
         
          } 
         
          s.url = s.url.replace(jsre,  
          "=" 
          + jsonp +  
          "$1" 
          ); 
         
          // We need to make sure 
         
          // that a JSONP style response is executed properly 
         
          s.dataType =  
          "script" 
          ; 
         
          // Handle JSONP-style loading 
         
          window[ jsonp ] = window[ jsonp ] ||  
          function 
          ( tmp ) { 
         
          data = tmp; 
         
          success(); 
         
          complete(); 
         
          // Garbage collect 
         
          window[ jsonp ] = undefined; 
         
          try 
          { 
         
          delete 
          window[ jsonp ]; 
         
          }  
          catch 
          (e) {} 
         
          if 
          ( head ) { 
         
          head.removeChild( script ); 
         
          } 
         
          }; 
         
          } 
         
          if 
          ( s.dataType ===  
          "script" 
          && s.cache ===  
          null 
          ) { 
         
          s.cache =  
          false 
          ; 
         
          } 
         
          if 
          ( s.cache ===  
          false 
          && type ===  
          "GET" 
          ) { 
         
          var 
          ts = now(); 
         
          // try replacing _= if it is there 
         
          var 
          ret = s.url.replace(rts,  
          "$1_=" 
          + ts +  
          "$2" 
          ); 
         
          // if nothing was replaced, add timestamp to the end 
         
          s.url = ret + ((ret === s.url) ? (rquery.test(s.url) ?  
          "&" 
          :  
          "?" 
          ) +  
          "_=" 
          + ts :  
          "" 
          ); 
         
          } 
         
          // If data is available, append data to url for get requests 
         
          if 
          ( s.data && type ===  
          "GET" 
          ) { 
         
          s.url += (rquery.test(s.url) ?  
          "&" 
          :  
          "?" 
          ) + s.data; 
         
          } 
         
          // Watch for a new set of requests 
         
          if 
          ( s.global && ! jQuery.active++ ) { 
         
          jQuery.event.trigger(  
          "ajaxStart" 
          ); 
         
          } 
         
          // Matches an absolute URL, and saves the domain 
         
          var 
          parts = rurl.exec( s.url ), 
         
          remote = parts && (parts[1] && parts[1] !== location.protocol || parts[2] !== location.host); 
         
          // If we're requesting a remote document 
         
          // and trying to load JSON or Script with a GET 
         
          if 
          ( s.dataType ===  
          "script" 
          && type ===  
          "GET" 
          && remote ) { 
         
          var 
          head = document.getElementsByTagName( 
          "head" 
          )[0] || document.documentElement; 
         
          var 
          script = document.createElement( 
          "script" 
          ); 
         
          script.src = s.url; 
         
          if 
          ( s.scriptCharset ) { 
         
          script.charset = s.scriptCharset; 
         
          } 
         
          // Handle Script loading 
         
          if 
          ( !jsonp ) { 
         
          var 
          done =  
          false 
          ; 
         
          // Attach handlers for all browsers 
         
          script.onload = script.onreadystatechange =  
          function 
          () { 
         
          if 
          ( !done && (! 
          this 
          .readyState || 
         
          this 
          .readyState ===  
          "loaded" 
          ||  
          this 
          .readyState ===  
          "complete" 
          ) ) { 
         
          done =  
          true 
          ; 
         
          success(); 
         
          complete(); 
         
          // Handle memory leak in IE 
         
          script.onload = script.onreadystatechange =  
          null 
          ; 
         
          if 
          ( head && script.parentNode ) { 
         
          head.removeChild( script ); 
         
          } 
         
          } 
         
          }; 
         
          } 
         
          // Use insertBefore instead of appendChild to circumvent an IE6 bug. 
         
          // This arises when a base node is used (#2709 and #4378). 
         
          head.insertBefore( script, head.firstChild ); 
         
          // We handle everything using the script element injection 
         
          return 
          undefined; 
         
          }

上面的代码第1行到第10行：判断是JSON类型调用，为本次调用创建临时的JsonP方法，并且添加了一个随机数字，这个数字源于用日期值；

关注第14行，这一行相当关键，注定了我们的结果最终是<Script> ;然后是构造Script片段，第95行在Head中添加该片段，修成正果；

不仅仅是jQuery,很多js框架都是用了同样的跨域方案，这就是getJSON跨域的原理。

更多精彩内容，请点击《ajax跨域技术汇总》，进行深入学习和研究。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

jquery的ajax和getJson跨域获取json数据的实现方法

很多开发人员在使用jquery在前端和服务器端进行数据交互，所以很容易会认为在前端利用jquery就可以读取任何站点的数据了。近日在进行开发时，因为要和第三方公司的一个项目进行数据的共享，因为考虑多不占用服务器的资源，遂决定直接在html进行数据的读取，不走服务器端进行中转了。然后正好就遇到了浏览器端跨域访问的问题。

跨域的安全限制都是指浏览器端来说的，服务器端不存在跨域安全限制的问题。

目前浏览器端跨域访问常用的两种方法有两种：

1、通过jQuery的ajax进行跨域，这其实是采用的jsonp的方式来实现的。

jsonp是英文json with padding的缩写。它允许在服务器端生成script tags至返回至客户端，也就是动态生成javascript标签，通过javascript callback的形式实现数据读取。

html页面端示例代码：

//首先要引入jquery的js包
jQuery(document).ready(function(){
$.ajax({

type : "get", //jquey是不支持post方式跨域的

async:false,

url : "http://api.taobao.com/apitools/ajax_props.do", //跨域请求的URL

dataType : "jsonp",

//传递给请求处理程序，用以获得jsonp回调函数名的参数名(默认为:callback)

jsonp: "jsoncallback",

//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名

jsonpCallback:"success_jsonpCallback",

//成功获取跨域服务器上的json数据后,会动态执行这个callback函数

success : function(json){

             alert(json);
         }
     });
});

服务器端示例代码，以java为例：

服务器端代码，是重点，开始以为，只要客户端通过jsonp就可以直接跨域访问，其实不然，需要服务器端的支持才行。

复制代码代码如下:

public void jsonpTest() throws IOException{

HttpServletRequest request = ServletActionContext.getRequest();

HttpServletResponse response = ServletActionContext.getResponse();

//根据html指定的jsonp回调函数的参数名，获取回调函数的名称

//callbackName的值其实就是：success_jsonpCallback

String callbackName = (String)request.getAttribute("jsoncallback");

//简单模拟一个json字符串，实际可使用google的gson进行转换，次数通过字符串拼接

//{"name":"张三","age":28}

//\是对"号进行转义

String jsonStr = "{\"name\":\"张三\",\"age\":28}";

//最终返回的数据为：success_jsonpCallback({"name":"张三","age":28})

String renderStr = callbackName+"("+jsonStr+")";

response.setContentType("text/plain;charset=UTF-8");

response.getWriter().write(renderStr);
}

jsonp的原理：

首先在客户端注册一个callback (如:'jsoncallback'), 然后把callback的名字(如:success_jsonpCallback)传给服务器端对应的处理函数。

服务器先生成需要返回给客户端的 json 数据。然后以 javascript 语法的方式，生成一个function , function 名字就是传递上来的参数(jsoncallback)的值(success_jsonpCallback) 。

最后将 json 数据直接以入参的方式，放置到 function 中，这样就生成了一段 js 语法的文档，返回给客户端。
客户端浏览器，解析script标签，并将服务器端返回的数据，作为参数，
传入到了客户端预先定义好的 callback 函数(如上例中jquery $.ajax()方法封装的的success: function (json))里。

实际上跨域是通过动态增加script来加载数据，无法直接获得数据，所以需要使用回调函数。

2.使用jquery的getJson进行跨域读取数据

实际上getJson方式的根本原理和ajax使用jsonp的方式是一样的。

jquery中常用getJson来调用获取远程的数据，并通过json格式返回。函数的原型如下：

jQuery.getJSON(url,data,success(data,status,xhr))

参数	描述
url	必需。规定将请求发送的哪个 URL。
data	可选。规定连同请求发送到服务器的数据。
success(data,status,xhr)	可选。规定当请求成功时运行的函数。额外的参数： response - 包含来自请求的结果数据 status - 包含请求的状态 xhr - 包含 XMLHttpRequest 对象

参数

描述

url

必需。规定将请求发送的哪个 URL。

data

可选。规定连同请求发送到服务器的数据。

success(data,status,xhr)

可选。规定当请求成功时运行的函数。

额外的参数：

response - 包含来自请求的结果数据
status - 包含请求的状态
xhr - 包含 XMLHttpRequest 对象

该函数是简写的ajax函数，实际上等价于：

复制代码代码如下:

 
$.ajax({ 
   
  url: url, 
   
  data: data, 
   
  success: callback, 
   
  dataType: json 
   
});

言归正传，下面我们来看如何使用getJson跨域获取数据。

html页面示例代码：

代码如下:

 
$.getJSON("http://api.taobao.com/apitools/ajax_props.do&jsoncallback=?", 
   
    function (data) { 
   
        alert(data); 
   
    } 
   
);

执行原理：

发送请求时需要传一个callback的回调函数名到服务器端，服务器端拿到这个回调函数名，再将返回数据用参数的形式反回到客户端，这样客户端就能够调到。

所以发送请求URL的地址后面一定要上jsoncallback=?这样的参数，jquery会将?号自动替换成自动生成的回调函数的名称。

所以最终的实际请求为：http://api.taobao.com/apitools/ajax_props.do&jsoncallback=jsonp1322444422697

所以和ajax的方式想比较，也就是callback函数一个是自动生成的函数名，一个是手工指定的函数名。

转载于:https://www.cnblogs.com/kayla-zhang0503/p/8825064.html

weixin_30343157

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery如何实现跨域调取数据

由于JS同源策略的影响，因此js只能访问同域名下的文档。因此要实现跨域，一般有以下几个方法：一、处理跨域的方式：1.代理2.XHR2HTML5中提供的XMLHTTPREQUEST Level2（及XHR2）已经实现了跨域访问。但ie10以下不支持只需要在服务端填上响应头：header("Access-Control-Allow-Origin:*");/*星号表示所有的域都可...
复制链接

扫一扫