探探秘秘ajax跨跨域域请请求求

本文讲解的是怎么利用ajax实现跨域请求，那么知道“ 同源策略”，就可以解决很多疑问 ：“为 我的ajax加载不了数

据 ！”“为 浏览器控制台会对我如此漂亮的代码报错 ！”这就是我们今天要主要探讨的内容了。

前前言言

ajax，用苍白的话赞扬 ：很好。

我们可以使用ajax实现异步获取数据，减少服务器运算时间，大大地改善用户体验 ；我们可以使用ajax实现小系统组

合大系统 ；我们还可以使用ajax实现前端的优化。 (好一个排比)

虽然ajax很好，但在使用起来也会有一定的限制，出于安全考 ，不允许跨域通信。如果尝试从不同的域请求数据，

会出现安全错误。 (下面例子1可以直观看出)

同同源源策策略略限限制制

同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性。也就是说，受到请求的 URL 的域必须与当

前 Web 页面的域相同。这意味着浏览器隔离来自不同源的内容，以防止它们之间的操作。这个浏览器策略很旧，从

Netscape Navigator 2.0 版本开始就存在。——摘自developerWorks

所谓同源是指，域名，协议，端口相同。

平平地地一一声声吼吼

本文讲解的是怎么利用ajax实现跨域请求，那么知道“ 同源策略”，就可以解决很多疑问 ：“为 我的ajax加载不了数据

！”“为 浏览器控制台会对我如此漂亮的代码报错 ！”

例子1

先先上上一一个个错误示示范范

客户端代码 ：

代码如下: 复制代码

script>

// 客户端使用getJSON方法请求另一台机子上的脚本

$.getJSON("http:// 20/new/ajax.php",function(json){

alert(json.website);

});

/script>

服务端PHP脚本代码 ：

代码如下: 复制代码

?php

// ajax.php

header('Content-type: application/json');

echo json_encode(array('website'=>'hcoding'));

?>

firefox下的错误提示 ：

根据同源策略的概念，localhost和20是出于不同的域名下的，所以跨域请求理所当然地被浏览器拒绝了。

JSONP

JSONP (JSON with Padding)是资料格式 JSON 的一种“使用模式”，可以让网页从别的网域要资料。另一个解决这个

问题的新方法是跨来源资源共享。由于同源策略，一般来说位于 的网页无法与不是 server1.ex

的服务器沟通，而 HTML 的 script> 元素是一个例外。利用 script> 元素的这个开放策略，网页可以得

到从其他来源动态产生的 JSON 资料，而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON，而

是任意的 JavaScript，用 JavaScript 直译器执行而不是用 JSON 解析器解析。——摘自维基百科

这话该怎么理解呢 ！我个人是这样认为的，用 script>跨域的请求数据，跨域的服务器返回一段 【JavaScript代码】，

是 的，你没看错，不是json格式数据，是JavaScript代码，这样，这段代码就由JavaScript 直译器执行。上例子更直

观 ：

例子2

客户端代码 ：

代码如下: 复制代码

script>

// 这是回调方法

function cb(data){

alert(data.website);

}

/script>

!--这是跨域请求的代码,切记，这段代码要在回调函数之后-->

script src="http:// 20/new/ajax_jsonp.php?callback=cb"> /scri