《AJAX 跨域请求》由会员分享，可在线阅读，更多相关《AJAX 跨域请求（7页珍藏版）》请在金锄头文库上搜索。
1、AJAX 跨域请求跨域请求 - JSONP 获取获取 JSON 数据数据 博客分类：博客分类： Javascript /Jquery / Bootstrap / WebAsynchronous JavaScript and XML (AjaxAjax ) 是驱动新一代 Web 站点（流行术语 为 Web 2.0 站点）的关键技术。Ajax 允许在不干扰 Web 应用程序的显示和行为 的情况下在后台进行数据检索。使用 XMLHttpRequest 函数获取数据，它是一种 API，允许客户端 JavaScript 通过 HTTP 连接到远程服务器。Ajax 也是许多 mashup 的驱动力，它可将
2、来自多个地方的内容集成为单一 Web 应用程序。不过，由于受到浏览器的限制，该方法不允许跨域通信。如果尝试从不同的域请求 数据，会出现安全错误。如果能控制数 据驻留的远程服务器并且每个请求都前往 同一域，就可以避免这些安全错误。但是，如果仅停留在自己的服务器上，Web 应 用程序还有什么用处呢？如果需要从多个第三方服务器收集数据时，又该怎么办？理解同源策略限制理解同源策略限制 同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性。也就是说， 受到请求的 URL 的域必须与当前 Web 页面的域相同。这意味着浏览器隔离来自不 同源的内容，以防止它们之间的操作。这个浏览器策略很旧，从 N
3、etscape Navigator 2.0 版本开始就存在。 克服该限制的一个相对简单的方法是让 Web 页面向它源自的 Web 服务器请求数据， 并且让 Web 服务器像代理一样将请求转发给真正的第三方服务器。尽管该技术获 得了普遍使用，但它是不可伸缩的。另一种方式是使用框架要素在当前 Web 页面 中创建新区域，并且使用 GET 请求获取任何第三方资源。不过，获取资源后，框 架中的内容会受到同源策略的限制。克服该限制更理想方法是在 Web 页面中插入动态脚本元素，该页面源指向其他域 中的服务 URL 并且在自身脚本中获取数据。脚本加载时它开始执行。该方法是可 行的，因为同源策略不阻止动态脚
4、本插入，并且将脚本看作是从提供 Web 页面的 域上加载的。但如果该脚本尝试从另一个域上加载文档，就不会成功。幸运的是， 通过添加 JavaScript Object Notation (JSON) 可以改进该技术。1 1、什么是、什么是 JSONPJSONP？ 要了解 JSONP，不得不提一下 JSON，那么什么是 JSON ？JSON is a subset of the object literal notation of JavaScript. Since JSON is a subset of JavaScript, it can be used in the language wi
5、th no muss or fuss. JSONP(JSON with Padding)是一个非官方的协议，它允许在服务器端集成 Script tags 返回至客户端，通过 javascript callback 的形式实现跨域访问（这仅仅是 JSONP 简单的实现形式）。2 2、JSONPJSONP 有什么用？有什么用？ 由于同源策略的限制，XmlHttpRequest 只允许请求当前源（域名、协议、端口） 的资源，为了实现跨域请求，可以通过 script 标签实现跨域请求，然后在服务端 输出 JSON 数据并执行回调函数，从而解决了跨域的数据请求。3 3、如何使用、如何使用 JSONPJS
6、ONP？ 下边这一 DEMO 实际上是 JSONP 的简单表现形式，在客户端声明回调函数之后，客 户端通过 script 标签向服务器跨域请求数据，然后服务端返回相应的数据并动态 执行回调函数。HTML 代码 （任一 ）：Html 代码 1. 2. 3. function jsonpCallback(result) 4. /alert(result); 5. for(var i in result) 6. alert(i+“:“+resulti);/循环输出 a:1,b:2,etc. 7. 8. 9. var JSONP=document.createElement(“script“); 10
7、. JSONP.type=“text/javascript“; 11. JSONP.src=“http:/ 12. document.getElementsByTagName(“head“)0.appendChild(JSONP); 13. 或者Html 代码 1. 2. 3. function jsonpCallback(result) 4. alert(result.a); 5. alert(result.b); 6. alert(result.c); 7. for(var i in result) 8. alert(i+“:“+resulti);/循环输出 a:1,b:2,etc. 9.
8、 10. 11. 12. JavaScriptJavaScript 的链接，必须在的链接，必须在 functionfunction 的下面。的下面。 服务端 PHP 代码 （services.php）：Php 代码 1.1,b=2,c=3,d=4,e=5); 5.$result=json_encode($arr); 6./echo $_GETcallback.(“Hello,World!“); 7./echo $_GETcallback.“($result)“; 8./动态执行回调函数 9.$callback=$_GETcallback; 10. echo $callback.“($resul
9、t)“; 如果将上述 JS 客户端代码用 jQuery 的方法来实现，也非常简单。$.getJSON$.getJSON $.ajax$.ajax $.get$.get 客户端 JS 代码在 jQuery 中的实现方式 1：Js 代码 1. 2. 3. $.getJSON(“http:/ 4. function(result) 5. for(var i in result) 6. alert(i+“:“+resulti);/循环输出 a:1,b:2,etc. 7. 8. ); 9. 客户端 JS 代码在 jQuery 中的实现方式 2：Js 代码 1. 2. 3. $.ajax( 4. url:
10、“http:/ 5. dataType:jsonp, 6. data:, 7. jsonp:callback, 8. success:function(result) 9. for(var i in result) 10. alert(i+“:“+resulti);/循环输出 a:1,b:2,etc. 11. 12. , 13. timeout:3000 14. ); 15. 客户端 JS 代码在 jQuery 中的实现方式 3：Js 代码 1. 2. 3. $.get(http:/ name: encodeURIComponent(t ester), function (json) for(
11、var i in json) alert(i+“:“+jsoni); , jsonp); 4. 其中 jsonCallback 是客户端注册的，获取 跨域服务器 上的 json 数据 后，回调 的函数。 http:/ 这个 url 是跨域服务 器取 json 数据的接口，参数为回调函数的名字，返回的格 式为Js 代码 1.jsonpCallback(msg:this is json data) JsonpJsonp 原理：原理： 首先在客户端注册一个 callback, 然后把 callback 的名字传给服务器。此时，服务器先生成 json 数据。 然后以 javascript 语法的方式，
12、生成一个 function , function 名字就是传递 上来的参数 jsonp.最后将 json 数据直接以入参的方式，放置到 function 中，这样就生成了一段 js 语法的文档，返回给客户端。客户端浏览器，解析 script 标签，并执行返回的 javascript 文档，此时数据作 为参数，传入到了客户端预先定义好的 callback 函数里.（动态执行回调函数）使用使用 JSONJSON 的优点在于：的优点在于： 比 XML 轻了很多，没有那么多冗余的东西。 JSON 也是具有很好的可读性的，但是通常返回的都是压缩过后的。不像 XML 这样的浏 览器可以直接显示，浏览器对于
13、 JSON 的格式化的显示就需要借助一些插件了。 在 JavaScript 中处理 JSON 很简单。 其他语言例如 PHP 对于 JSON 的支持也不错。JSONJSON 也有一些劣势：也有一些劣势： JSON 在服务端语言的支持不像 XML 那么广泛，不过 JSON.org 上提供很多语言的库。 如果你使用 eval()来解析的话，会容易出现安全问题。尽管如此，JSON 的优点还是很明显的。他是 Ajax 数据交互的很理想的数据格式。主要提示：主要提示： JSONP 是构建 mashup 的强大技术，但不幸的是，它并不是所有跨域通信需求的万 灵药。它有一些缺陷，在提交开发资源之前必须认真考虑它们。第一，也是最重要的一点，没有关于 JSONP 调用的错误处理。如果动态脚本插入 有效，就执行调用；如果无效，就静默失败。失败是没有任何提示的。例如，不能 从服务器捕捉到 404 错误，也不能取消或重新开始请求。不过，等待一段时间还 没有响应的话，就不用理它了。（未来的 jQuery 版本可能有终止 JSONP 请求的 特性）。JSONP 的另一个主要缺陷是被不信任的服务使用时会很危险。因为 JSONP 服务返 回打包在函数调用中的 JSON 响应，而函数调用是由浏览器执行的，这使宿主 Web 应用程序更容易受到各类攻击。如果打算使用 JSONP 服务，了解它能造成的威胁 非常重要。
