ajax跨域问题Word格式文档下载.docx

1、+ data.user + 密码：+ data.pass）; , error : function（） alert（fail）; ）/script服务端 validate.php 代码清单：?phpheader（Content-Type:text/html;Charset=utf-8$arr = array（ user = $_GETloginuser,passloginpassnameresponseecho $_GETjsoncallback . （.$arr）.）;效果图：AJAX 跨域请求 - JSONP获取JSON数据博客分类： Javascript /Jquery / Bootst

2、rap / WebAsynchronous JavaScript and XML （Ajax ） 是驱动新一代 Web 站点（流行术语为 Web 2.0 站点）的关键技术。Ajax 允许在不干扰 Web 应用程序的显示和行为的情况下在后台进行数据检索。使用 XMLHttpRequest 函数获取数据，它是一种 API，允许客户端 JavaScript 通过 HTTP 连接到远程服务器。Ajax 也是许多 mashup 的驱动力，它可将来自多个地方的内容集成为单一 Web 应用程序。不过，由于受到浏览器的限制，该方法不允许跨域通信。如果尝试从不同的域请求数据，会出现安全错误。如果能控制数 据驻留

3、的远程服务器并且每个请求都前往同一域，就可以避免这些安全错误。但是，如果仅停留在自己的服务器上，Web 应用程序还有什么用处呢？如果需要从多个第三方服务器收集数据时，又该怎么办？理解同源策略限制同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性。也就是说，受到请求的 URL 的域必须与当前 Web 页面的域相同。这意味着浏览器隔离来自不同源的内容，以防止它们之间的操作。这个浏览器策略很旧，从 Netscape Navigator 2.0 版本开始就存在。克服该限制的一个相对简单的方法是让 Web 页面向它源自的 Web 服务器请求数据，并且让 Web 服务器像代理一样将请求转发给真

4、正的第三方服务器。尽管该技术获得了普遍使用，但它是不可伸缩的。另一种方式是使用框架要素在当前 Web 页面中创建新区域，并且使用 GET 请求获取任何第三方资源。不过，获取资源后，框架中的内容会受到同源策略的限制。克服该限制更理想方法是在 Web 页面中插入动态脚本元素，该页面源指向其他域中的服务 URL 并且在自身脚本中获取数据。脚本加载时它开始执行。该方法是可行的，因为同源策略不阻止动态脚本插入，并且将脚本看作是从提供 Web 页面的域上加载的。但如果该脚本尝试从另一个域上加载文档，就不会成功。幸运的是，通过添加 JavaScript Object Notation （JSON） 可以改进

5、该技术。1、什么是JSONP？要了解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 with no muss or fuss.JSONP（JSON with Padding）是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问（这仅仅是JSON

6、P简单的实现形式）。2、JSONP有什么用？由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源，为了实现跨域请求，可以通过script标签实现跨域请求，然后在服务端输出JSON数据并执行回调函数，从而解决了跨域的数据请求。3、如何使用JSONP？下边这一DEMO实际上是JSONP的简单表现形式，在客户端声明回调函数之后，客户端通过script标签向服务器跨域请求数据，然后服务端返回相应的数据并动态执行回调函数。HTML代码 （任一 ）：Html代码 1. 2. 3. function result） 4. /alert（result）;5. for（va

7、r i in result） 6. alert（i+:+resulti）;/循环输出a:1,b:2,etc. 7. 8. 9. var JSONP=document.createElement（script10. JSONP.type=11. JSONP.src=12. document.getElementsByTagName（head）0.appendChild（JSONP）;13. 或者4. alert（result.a）;5. alert（result.b）;6. alert（result.c）;7. for（var i in result） 8. alert（i+9. 10. 11.

8、 12. 1,b2,c3,d4,e5）;5. $result=$arr）;6. /echo $_GETcallback.Hello,World!）7. /echo $_GET.（$result）8. /动态执行回调函数 9. $callback=$_GET;10. echo $callback.如果将上述JS客户端代码用jQuery的方法来实现，也非常简单。$.getJSON$.ajax$.get客户端JS代码在jQuery中的实现方式1：Js代码 jquery.js3. $.getJSON（4. function（result） 8. ）;9. 客户端JS代码在jQuery中的实现方式2：3

9、. $.ajax（ 4. url:5. dataType:, 6. data:7. jsonp:8. success:function（result） 9. for（var i in result） 10. alert（i+11. 12. , 13. timeout:3000 14. ）;15. 客户端JS代码在jQuery中的实现方式3：3. $.get（ name: encodeURIComponent（tester）, function （json） for（var i in json） alert（i+jsoni）; , 4. 其中 jsonCallback 是客户端注册的，获取 跨域

10、服务器 上的json数据 后，回调的函数。这个 url 是跨域服务 器取 json 数据的接口，参数为回调函数的名字，返回的格式为1. msg:this is json data） Jsonp原理：首先在客户端注册一个callback, 然后把callback的名字传给服务器。此时，服务器先生成 json 数据。然后以 javascript 语法的方式，生成一个function , function 名字就是传递上来的参数 jsonp.最后将 json 数据直接以入参的方式，放置到 function 中，这样就生成了一段 js 语法的文档，返回给客户端。客户端浏览器，解析script标签，并执

11、行返回的 javascript 文档，此时数据作为参数，传入到了客户端预先定义好的 callback 函数里.（动态执行回调函数）使用JSON的优点在于： 比XML轻了很多，没有那么多冗余的东西。 JSON也是具有很好的可读性的，但是通常返回的都是压缩过后的。不像XML这样的浏览器可以直接显示，浏览器对于JSON的格式化的显示就需要借助一些插件了。 在JavaScript中处理JSON很简单。 其他语言例如PHP对于JSON的支持也不错。JSON也有一些劣势： JSON在服务端语言的支持不像XML那么广泛，不过JSON.org上提供很多语言的库。 如果你使用eval（）来解析的话，会容易出现安

12、全问题。尽管如此，JSON的优点还是很明显的。他是Ajax数据交互的很理想的数据格式。主要提示：JSONP 是构建 mashup 的强大技术，但不幸的是，它并不是所有跨域通信需求的万灵药。它有一些缺陷，在提交开发资源之前必须认真考虑它们。第一，也是最重要的一点，没有关于 JSONP 调用的错误处理。如果动态脚本插入有效，就执行调用；如果无效，就静默失败。失败是没有任何提示的。例如，不能从服务器捕捉到 404 错误，也不能取消或重新开始请求。不过，等待一段时间还没有响应的话，就不用理它了。（未来的 jQuery 版本可能有终止 JSONP 请求的特性）。JSONP 的另一个主要缺陷是被不信任的服

13、务使用时会很危险。因为 JSONP 服务返回打包在函数调用中的 JSON 响应，而函数调用是由浏览器执行的，这使宿主 Web 应用程序更容易受到各类攻击。如果打算使用 JSONP 服务，了解它能造成的威胁非常重要jquery中ajax处理跨域的三大方式一、处理跨域的方式：1.代理2.XHR2HTML5中提供的XMLHTTPREQUEST Level2（及XHR2）已经实现了跨域访问。但ie10以下不支持只需要在服务端填上响应头： header（Access-Control-Allow-Origin:* /*星号表示所有的域都可以接受，*/Access-Control-Allow-Methods

14、:GET,POST3.jsonP原理：ajax本身是不可以跨域的，通过产生一个script标签来实现跨域。因为script标签的src属性是没有跨域的限制的。其实设置了dataType:后，$.ajax方法就和ajax XmlHttpRequest没什么关系了，取而代之的则是JSONP协议。JSONP是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问。ajax的跨域写法：（其余写法和不跨域的一样）：比如 /*当前网址是localhost:3000*/ js代码 $.ajax（get url:http:/loc

15、alhost:3000/showAll,/*url写异域的请求地址*/ dataType:jsonp,/*加上datatype*/ jsonpCallback:cb,/*设置一个回调函数，名字随便取，和下面的函数里的名字相同就行*/ success:function（） 。 ）; /*而在异域服务器上，*/ app.js app.get（/showAll,students.showAll）;/*这和不跨域的写法相同*/ /*在异域服务器的showAll函数里，*/ var db = require（./database exports.showAll = function（req,res） /

16、*设置响应头允许ajax跨域访问*/ res.setHeader（Access-Control-Allow-Origin, /*星号表示所有的异域请求都可以接受，*/Access-Control-Allow-Methods var con = db.getCon（）; con.query（select * from t_students,function（error,rows） if（error） console.log（数据库出错：+error）; else /*注意这里，返回的就是jsonP的回调函数名+数据了*/ res.send（cb（+JSON.stringify（r）+二、解决aj

17、ax跨域访问、 JQuery 的跨域方法JS的跨域问题，我想很多程序员的脑海里面还认为JS是不能跨域的，其实这是一个错误的观点；有很多人在网上找其解决方法，教其用IFRAME去解决的文章很多，真有那么复杂吗？其实很简单的，如果你用JQUERY，一个GETJSON方法就搞定了，而且是一行代码搞定。下面开始贴出方法。/跨域（可跨所有域名）$.getJSON（/要求远程请求页面的数据格式为： ?（json_data） /例如： /?（_name湖南省_regionId134,北京市143） alert（json0._name）;）;注意，getregion.aspx中，在输出JSON数据时，一定要用

18、Request.QueryString，将获取的内容放到返回JSON数据的前面，假设实际获取的值为42342348，那么返回的值就是 42342348（143）因为getJSON跨域的原理是把？随机变一个方法名，然后返回执行的，实现跨域响应的目的。下面一个是跨域执行的真实例子：script src= type=/跨域（可跨所有域名） id: 0, action:jobcategoryjson , function（json） alert（json0.pid）; alert（json0.items0._name）; jQuery跨域原理:浏览器会进行同源检查,这导致了跨域问题,然而这个跨域检查还

19、有一个例外那就是HTML的标记;我们经常使用的src属性,脚本静态资源放在独立域名下或者来自其它站点的时候这里是一个url;这个url响应的结果可以有很多种,比如JSON,返回的Json值成为标签的src属性值.这种属性值变化并不会引起页面的影响.按照惯例，浏览器在URL的查询字符串中提供一个参数，这个参数将作为结果的前缀一起返回到浏览器;看下面的例子：响应值：parseResponse（NameCheeso, Rank 7） 这种方式被称作JsonP;（如果链接已经失效请点击这里:JSONP）;即：JSON with padding 上面提到的前缀就是所谓的“padding”。那么jQuery里面是怎么实现的呢？貌似并没有标记的出现！？OKay，翻看源码来看：页面调用的是getJSON：getJSON: function（ url, data, callback ） return j