ajax跨域解决方案

《ajax跨域解决方案》由会员分享，可在线阅读，更多相关《ajax跨域解决方案（16页珍藏版）》请在金锄头文库上搜索。

1、ajaxajax 跨域解决方案跨域解决方案篇一：使用 JSONP 解决 Ajax 跨域访问问题使用 JSONP 解决 Ajax 跨域访问问题 JSONP(JSON with Padding)是 JSON 的一种“使用模式” ，可用于解决主流浏览器的跨域数据访问的问题。现在我们来用 JSONP 解决 Ajax 跨域访问问题。 前几天，工作上有一新需求，需要前端 web 页面异步调用后台的 Webservice 方法返回信息。实现方法有多种，本例采用 jQuery+Ajax，完成后，在本地调试了一切 ok，但是部署到服务器上以后就出现问题了，后台服务调用没有响应，怎么回事?代码没怎么改动，唯一修改

2、的地方就是jQuery 的 ajax 方法中的 url 地址。难道是这里的问题，经过检查和调试，发现原来是同源策略在作怪，我们知道，JavaScript 或 jQuery 是在 Web 前端开发中经常使用的动态脚本技术。在 JavaScript 中，有一个很重要的安全性限制，被称为“Same- Origin Policy”(同源策略)。这一策略对于 JavaScript 代码能够访问的页面内容做了很重要的限制，即 JavaScript 只能访问与包含它的文档或脚本 在同一域名下的内容。不同域名下的脚本不能互相访问，即便是子域也不行。关于同源策略，读者可百度更详细的解释，这里不再赘述。 但是有时

3、候又不可避免地需要进行跨域操作，这时候“同源策略”就是一个限制了，怎么办呢?采用 JSONP 跨域GET 请求是一个常用的解决方案，下面我们来看一下 JSONP跨域是如何实现的，并探讨下 JSONP 跨域的原理。 这里提到了 JSONP，那有人就问了，它同 JSON 有什么区别不同和区别呢，接下我们就来看看，百度百科有以下说明： JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它基于 JavaScript(Standard ECMA-262 3rd Edition - December 1999)的一个子集。 JSON 采用完全独立于语言的文本格式

4、，但是也使用了类似于 C 语言家族的习惯(包括 C, C+, C#, Java, JavaScript, Perl, Python 等)。这些特性使 JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成(网络传输速度快)。 JSONP(JSON with Padding)是 JSON 的 一种“使用模式” ，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，一般来说位于 的网页无法与不是 的服务器沟通，而 HTML 的 元素是一个例外。利用 元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 资料，而这种使用模式就是所谓的 JSONP。用 JSONP

5、抓到的资料并不是 JSON，而是任意的 JavaScript，用 JavaScript 直译器执行而不是用 JSON 解析器解析。 到这里，应该明白了，JSON 是一种轻量级的数据交换格式，像 xml 一样，是用来描述数据间的。JSONP 是一种使用 JSON 数据的方式，返回的不是 JSON 对象，是包含JSON 对象的 javaScript 脚本。 那 JSONP 是如何工作的呢，我们知道，由于同源策略的限制，XmlHttpRequest 只允许请求当前源（域名、协议、端口）的资源。若要跨域请求出于安全性考虑是不行的，但是我们发现，Web 页面上调用 js 文件时则不受是否跨域的影响，而且

6、拥有”src”这个属性的标签都拥有跨域的能力，比如、 、 ，这时候，聪明的程序猿就想到了变通的方法，如果要进行跨域请求， 通过使用 html 的 script 标记来进行跨域请求，并在响应中返 回要执行的 script 代码，其中可以直接使用 JSON 传递 javascript 对象。即在跨域的服务端生成 JSON 数据，然后包装成 script 脚本回传，着不就突破同源策略的限制，解决了跨域访问的问题了么。下面我们就看下怎么实现： 前端代码： 代码如下 复制代码 function CallWebServiceByJsonp() $(“#SubEquipmentDetails“).html(

7、); $.ajax( type: “GET“, cache: false, url: “http:/servername/webservice/GetSingleInfo“, data: strCparent: $(“# (“0(1)“, jsonCallBackFunName, ret);(); 如上所示，前端的 CallWebServiceByJsonp 方法采用 jQuery 的 ajax 方法调用后端的 Web 服务 GetSingleInfo方法，后台的 GetSingleInfo 方法，使用前端的回调方法OnGetMemberSuccessByjsonp 包装后台的业务操作的 JS

8、ON对象，返回给前端一段 javascript 片段执行。巧妙的解决了跨域访问问题。 JSONP 的缺点： JSONP 不提供错误处理。如果动态插入的代码正常运行，你可以得到返回，但是如果失败了，那么什么都不会发生。 篇二：ajax 跨域问题那么知道什么是 Jsonp 和 pjax 吗？ 答案： Jsonp：(JSON with Padding)是一种跨域请求方式。主要原理是利用了 script 标签可以跨域请求的特点，由其 src 属性发送请求到服务器，服务器返回 js 代码，网页端接受响应，然后就直接执行了，这和通过 script 标签引用外部文件的原理是一样的。JSONP 由两部分组成：

9、回调函数和数据，回调函数一般是由网页端控制，作为参数发往服务器端，服务器端把该函数和数据拼成字符串返回。 pjax：pjax 是一种基于 ajax+的新技术，该技术可以无刷新改变页面的内容，并且可以改变页面的 URL。 （关键点：可以实现 ajax 无法实现的后退功能）pjax 是ajax+pushState 的封装，同时支持本地存储、动画等多种功能。目前支持 jquery、qwrap、kissy 等多种版本。 jQuery Ajax 简单的实现跨域请求 html 代码清单： $(function() $.ajax( type:get, url : /?loginuser=lee, error

10、 : function() alert(fail); ); ) 服务端 代码清单： header(Content-Type:text/html;Charset=utf-8); $arr = array( “user“ = $_GETloginuser, “pass“ = $_GETloginpass, “name“ = response); echo $_GETjsoncallback . “(“.json_encode($arr).“)“; 效果图： AJAX 跨域请求 - JSONP 获取 JSON 数据 博客分类： ? Asynchronous JavaScript and XML (A

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

12、上，Web 应用程序还有什么用处呢？如果需要从多个第三方服务器收集数据时，又该怎么办？ 理解同源策略限制 同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性。也就是说，受到请求的 URL 的域必须与当前 Web 页面的域相同。这意味着浏览器隔离来自不同源的内容，以防止它们之间的操作。这个浏览器策略很旧，从 Netscape Navigator 版本开始就存在。 克服该限制的一个相对简单的方法是让 Web 页面向它源自的 Web 服务器请求数据，并且让 Web 服务器像代理一样将请求转发给真正的第三方服务器。尽管该技术获得了普遍使用，但 它是不可伸缩的。另一种方式是使用框架要素在当前

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

14、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 的形式实现跨域访问（这仅仅是JSONP 简单的实现形式） 。 2、JSONP 有什么用？ 由于同源策略的限

15、制，XmlHttpRequest 只允许请求当前源（域名、协议、端口）的资源，为了实现跨域请求，可以通过 script 标签实现跨域请求，然后在服务端输出 JSON 数据并执行回调函数，从而解决了跨域的数据请求。 3、如何使用 JSONP？ 下边这一 DEMO 实际上是 JSONP 的简单表现形式，在客户端声明回调函数之后，客户端通过 script 标签向服务器跨域请求数据，然后服务端返回相应的数据并动态执行回调函数。 HTML 代码 （任一 ）： 或者JavaScript 的链接，必须在 function 的下面。服务端 PHP 代码 （）： 如果将上述 JS 客户端代码用 jQuery 的

16、方法来实现，也非常简单。 $.getJSON $.ajax $.get 客户端 JS 代码在 jQuery 中的实现方式 1： 篇三：AJAX 跨域请求博客分类： ? Asynchronous JavaScript and XML (Ajax ) 是驱动新一代 Web 站点（流行术语为 Web 站点）的关键技术。Ajax 允许在不干扰 Web 应用程序的显示和行为的情况下在后台进行数据检索。使用 XMLHttpRequest 函数获取数据，它是一种 API，允许客户端 JavaScript 通过 HTTP 连接到远程服务器。Ajax 也是许多 mashup 的驱动力，它可将来自多个地方的内容集成为单一 Web 应用程序。 不过，由于受到浏览器的限制，该方法不允许跨域通信。如果尝试从不同的域请求数据，会出现安全错误。如果能控制数 据驻留的远程服务器并且每个请求都前往同一域，就可以避免这些安全错误。但是，如果仅停留在自己的服务器上，Web 应用程序还有什么用处呢？如果需要