当前位置：文档库 › ajax跨域请求

ajax跨域请求

发表于:2010-1-11 浏览:965 作者:转载遗失来源:网络转载

关键字:AJAX,详解,请求

描述:注意：以下代码请在Firefox3.5、Chrom e3.0、Safari4之后的版本中进行测试。IE8的实现方法与其他浏览不同。跨域请求，顾名思义，就是一个站点中的资源去访问另外一个不同域名站点上的资源。这种情况很常见

注意：以下代码请在Firefox 3.5、Chrome 3.0、Safari 4之后的版本中进行测试。IE8的实现方法与其他浏览不同。

跨域请求，顾名思义，就是一个站点中的资源去访问另外一个不同域名站点上的资源。这种情况很常见，比如说通过style 标签加载外部样式表文件、通过img 标签加载外部图片、通过 script 标签加载外部脚本文件、通过Webfont 加载字体文件等等。默认情况下，脚本访问文档属性等数据采用的是同源策略（Same origin policy）。

那么，什么是同源策略呢？如果两个页面的协议、域名和端口是完全相同的，那么它们就是同源的。同源策略是为了防止从一个地址加载的文档或脚本访问或者设置从另外一个地址加载的文档的属性。如果两个页面的主域名相同，则还可以通过设置document.domain 属性将它们认为是同源的。

随着Web2.0 和SNS 的兴起，Web 应用对跨域访问的需求也越来越多，但是，在脚本中进行跨域请求是受安全性限制的，Web 开发人员迫切需要提供一种更安全、方便的跨域请求方式来融合（Mashup）自己的Web 应用。这样做的一个好处就是可以将请求分摊到不同的服务器，减轻单个服务器压力以提高响应速度；另外一个好处是可以将不同的业务逻辑分布到不同的服务器上以降低负载。

值得庆幸的是，跨域请求的标准已经出台，主流浏览器也已经实现了这一标准。W3C 工作组中的 Web Applications Working Group（Web 应用工作组）发布了一个Cross-Origin Resource Sharing（跨域资源共享，该规范地址：https://www.wendangku.net/doc/a612973846.html,/TR/access-control/和

https://www.wendangku.net/doc/a612973846.html,/2006/waf/access-control/）推荐规范来解决跨域请求的问题。该规范提供了一种更安全的跨域数据交换方法。具体规范的介绍可以访问上面提供的网站地址。值得注意的是：该规范只能应用在类似XMLHttprequest 这样的API 容器内。IE8、Firefox 3.5 及其以后的版本、Chrome浏览器、Safari 4 等已经实现了Cross-Origin Resource Sharing 规范，已经可以进行跨域请求了。

Cross-Origin Resource Sharing 的工作方式是通过添加HTTP 头的方法来判断哪些资源允许 Web 浏览器访问该域名下的信息。然而，对于那些HTTP 请求导致用户数据产生副作用的请求方法（特别是对于除了GET、某些MIME 类型的POST 之外的HTTP方法），该规范要求浏览器对请求进行“预先验”，通过发送HTTP 的OPTIONS 请求头询问服务器有哪些支持的方法，在征得服务器的同意后，再使用实际的HTTP 请求方法发送实际的请求。服务器也可以通知客户端是否需要将验证信息（如Cookie 和HTTP Authentication 数据）随同请求一起发送。

下面我们就采用实际的例子说明Cross-Origin Resource Sharing 是如何工作的。

1，简单请求

什么样的请求算是简单请求呢？简单请求必须满足下面2点：

a，只使用GET、POST 进行的请求，这里的POST只包括发送给服务器的数据类型（Content-Type）必须是application/x-www-form-urlencoded、multipart/form-data 或者text/plain中一个。

b，HTTP 请求没有设置自定义的请求头，如我们常用的X-JSON。

先使用下面的代码进行测试：

"https://www.wendangku.net/doc/a612973846.html,/TR/xhtml1/DTD/xhtml1-transitional.dtd">

孟宪会之AJAX跨域请求测试

// -->

然后，在服务器创建CrossDomainRequest.aspx 的内容如下：

<%@ Page Language="C#" %>

点击“开始测试” 按钮，发送的请求和返回的响应信息如下：

GET /SimpleCrossSiteRequests.aspx HTTP/1.1

Host: https://www.wendangku.net/doc/a612973846.html,

User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.2; zh-CN; rv:1.9.1.7) Gecko/20091221 Firefox/3.5.7 (.NET CLR 3.5.30729)

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8

Accept-Language: zh-cn,zh;q=0.5

Accept-Encoding: gzip,deflate

Accept-Charset: GB2312,utf-8;q=0.7,*;q=0.7

Keep-Alive: 300

Connection: keep-alive

Referer:

http://www.meng_xian_https://www.wendangku.net/doc/a612973846.html,:801/CrossDomainAjax/SimpleCrossSiteRequests.html Origin: http://www.meng_xian_https://www.wendangku.net/doc/a612973846.html,:801

HTTP/1.x 200 OK

Date: Sun, 10 Jan 2010 13:52:00 GMT

Server: Microsoft-IIS/6.0

X-Powered-By: https://www.wendangku.net/doc/a612973846.html,

X-AspNet-Version: 2.0.50727

Access-Control-Allow-Origin: http://www.meng_xian_https://www.wendangku.net/doc/a612973846.html,:801

Set-Cookie: https://www.wendangku.net/doc/a612973846.html,_SessionId=wk5v5nrs5wbfi4rmpjy2jujb; path=/; HttpOnly

Cache-Control: private

Content-Type: text/html; charset=utf-8

Content-Length: 84

需要特别注意的是：在请求信息中，浏览器使用Origin 这个HTTP 头来标识该请求来自于

http://www.meng_xian_https://www.wendangku.net/doc/a612973846.html,:801；在返回的响应信息中，使用Access-Control-Allow-Origin

头来控制哪些域名的脚本可以访问该资源。如果设置Access-Control-Allow-Origin:*，则允许所有域名的脚本访问该资源。如果有多个，则只需要使用逗号分隔开即可。

注意：在服务器端，Access-Control-Allow-Origin 响应头 http://www.meng_xian_https://www.wendangku.net/doc/a612973846.html,:801 中的端口信息不能省略。

有人可能会想：自己发送请求头会如何呢？比如

xhr.setRequestHeader("Origin","http://www.meng_xian_https://www.wendangku.net/doc/a612973846.html,:801"); 实践证明，自己设置Origin 头是不行的。

是不是现在就可以采用XMLHttpRequest 来请求任意一个网站的数据呢？还是不行的。允许哪些域名可以访问，还需要服务器来设置Access-Control-Allow-Origin 头来进行授权，具体的代码是：

Response.AddHeader("Access-Control-Allow-Origin",

"http://www.meng_xian_https://www.wendangku.net/doc/a612973846.html,:801");

这行代码就告诉浏览器，只有来自http://www.meng_xian_https://www.wendangku.net/doc/a612973846.html,:801 源下的脚本才可以进行访问。

好了，上面我们就完成了一个简单的跨域请求，怎么样？感觉还是不错的吧。下面我们进行一个“预检”请求。

2，预检请求

预检请求首先需要向另外一个域名的资源发送一个HTTP OPTIONS 请求头，其目的就是为了判断实际发送的请求是否是安全的。下面的2种情况需要进行预检：

a，不是上面的简单请求，比如使用Content-Type 为application/xml 或text/xml 的POST 请求b，在请求中设置自定义头，比如X-JSON、X-MENGXIANHUI 等

注意：在iis 里进行测试，必须在“应用程序扩展”里面配置 .aspx 扩展的动作允许OPTIONS。

下面我们举一个预检的请求：

"https://www.wendangku.net/doc/a612973846.html,/TR/xhtml1/DTD/xhtml1-transitional.dtd">

孟宪会之AJAX跨域请求测试

上面的例子我们发送xml 格式的数据，并且，发送一个非标准的HTTP头

POWERED-BY-MENGXIANHUI 来说明服务器端该如何设置响应头的。

在服务器端，PreflightedRequests.aspx 的内容如下：

<%@ Page Language="C#" %>

点击“开始测试”按钮，将会执行下面的一系列请求。

OPTIONS /PreflightedRequests.aspx HTTP/1.1

Host: https://www.wendangku.net/doc/a612973846.html,

User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.2; zh-CN; rv:1.9.1.7) Gecko/20091221 Firefox/3.5.7 (.NET CLR 3.5.30729)

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8

Accept-Language: zh-cn,zh;q=0.5

Accept-Encoding: gzip,deflate

Accept-Charset: GB2312,utf-8;q=0.7,*;q=0.7

Keep-Alive: 300

Connection: keep-alive

Origin: http://www.meng_xian_https://www.wendangku.net/doc/a612973846.html,:801

Access-Control-Request-Method: POST

Access-Control-Request-Headers: powered-by-mengxianhui

HTTP/1.x 200 OK

Date: Sun, 10 Jan 2010 14:00:34 GMT

Server: Microsoft-IIS/6.0

X-Powered-By: https://www.wendangku.net/doc/a612973846.html,

X-AspNet-Version: 2.0.50727

Access-Control-Allow-Origin: http://www.meng_xian_https://www.wendangku.net/doc/a612973846.html,:801

Access-Control-Allow-Methods: POST, GET, OPTIONS

Access-Control-Allow-Headers: POWERED-BY-MENGXIANHUI

Access-Control-Max-Age: 30

Set-Cookie: https://www.wendangku.net/doc/a612973846.html,_SessionId=5npqri55dl1k1zvij1tlw3re; path=/; HttpOnly

Cache-Control: private

Content-Length: 0

POST /PreflightedRequests.aspx HTTP/1.1

Host: https://www.wendangku.net/doc/a612973846.html,

User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.2; zh-CN; rv:1.9.1.7) Gecko/20091221 Firefox/3.5.7 (.NET CLR 3.5.30729)

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8

Accept-Language: zh-cn,zh;q=0.5

Accept-Encoding: gzip,deflate

Accept-Charset: GB2312,utf-8;q=0.7,*;q=0.7

Keep-Alive: 300

Connection: keep-alive

POWERED-BY-MENGXIANHUI: Approve

Content-Type: application/xml; charset=UTF-8

Referer:

http://www.meng_xian_https://www.wendangku.net/doc/a612973846.html,:801/CrossDomainAjax/PreflightedRequests.html Content-Length: 19

Origin: http://www.meng_xian_https://www.wendangku.net/doc/a612973846.html,:801

Pragma: no-cache

Cache-Control: no-cache

测试

HTTP/1.x 200 OK

Date: Sun, 10 Jan 2010 14:00:34 GMT

Server: Microsoft-IIS/6.0

X-Powered-By: https://www.wendangku.net/doc/a612973846.html,

X-AspNet-Version: 2.0.50727

Access-Control-Allow-Origin: http://www.meng_xian_https://www.wendangku.net/doc/a612973846.html,:801

Set-Cookie: https://www.wendangku.net/doc/a612973846.html,_SessionId=byvose45zmtbqy45d2a1jf2i; path=/; HttpOnly

Cache-Control: private

Content-Type: text/html; charset=utf-8

Content-Length: 65

以上的代码反映了预检请求的执行过程：首先发送OPTIONS 请求头，用来向服务器咨询服务器的更多信息，以便为后续的真实请求做准备。比如是否支持POST 方法等。值得注意的是：

浏览器还发送Access-Control-Request-Method: POST 和Access-Control-Request-Headers: powered-by-mengxianhui 请求头。

注意：以上过程是第一次请求的时候的过程，如果在30 秒内重复点击按钮，你可以看不到OPTIONS 这一过程。则执行过程是这样的：

POST /PreflightedRequests.aspx HTTP/1.1

Host: https://www.wendangku.net/doc/a612973846.html,

User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.2; zh-CN; rv:1.9.1.7) Gecko/20091221 Firefox/3.5.7 (.NET CLR 3.5.30729)

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8

Accept-Language: zh-cn,zh;q=0.5

Accept-Encoding: gzip,deflate

Accept-Charset: GB2312,utf-8;q=0.7,*;q=0.7

Keep-Alive: 300

Connection: keep-alive

POWERED-BY-MENGXIANHUI: Approve

Content-Type: application/xml; charset=UTF-8

Referer:

http://www.meng_xian_https://www.wendangku.net/doc/a612973846.html,:801/CrossDomainAjax/PreflightedRequests.html Content-Length: 19

Origin: http://www.meng_xian_https://www.wendangku.net/doc/a612973846.html,:801

Pragma: no-cache

Cache-Control: no-cache

测试

HTTP/1.x 200 OK

Date: Sun, 10 Jan 2010 14:06:32 GMT

Server: Microsoft-IIS/6.0

X-Powered-By: https://www.wendangku.net/doc/a612973846.html,

X-AspNet-Version: 2.0.50727

Access-Control-Allow-Origin: http://www.meng_xian_https://www.wendangku.net/doc/a612973846.html,:801

Set-Cookie: https://www.wendangku.net/doc/a612973846.html,_SessionId=qs1c4urxywdbdx55u04pvual; path=/; HttpOnly Cache-Control: private

Content-Type: text/html; charset=utf-8

Content-Length: 65

为什么会这样？细心的童鞋可能注意到了，在服务器端有一行代码

Response.AddHeader("Access-Control-Max-Age", "30"); 它是用来设置预检的有效时间的，单位是秒。这一点要特别注意。

3，带验证信息的请求

身份验证是Web开发中经常遇到的问题，在跨域请求中，默认情况下是不发送验证信息的。要想发送验证信息，需要进行withCredentials 属性，下面就是一个简单请求的例子：

"https://www.wendangku.net/doc/a612973846.html,/TR/xhtml1/DTD/xhtml1-transitional.dtd">

孟宪会之AJAX跨域请求测试

function handler(evtXHR) {

if (xhr.readyState == 4) {

if (xhr.status == 200) {

var response = xhr.responseText;

document.getElem entById("content").innerHTML = "结果：" + response;

} else {

document.getElem entById("content").innerHTML += "
执行状态status：" + xhr.status;

}

else {

document.getElementById("content").innerHTML += "
执行状态readyState：" + xhr.readyState;

}

// -->

点击“开始测试”，我们可以检测到下面的请求执行过程：

GET /RequestsWithCredentials.aspx HTTP/1.1

Host: https://www.wendangku.net/doc/a612973846.html,

User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.2; zh-CN; rv:1.9.1.7) Gecko/20091221 Firefox/3.5.7 (.NET CLR 3.5.30729)

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8

Accept-Language: zh-cn,zh;q=0.5

Accept-Encoding: gzip,deflate

Accept-Charset: GB2312,utf-8;q=0.7,*;q=0.7

Keep-Alive: 300

Connection: keep-alive

Referer:

http://www.meng_xian_https://www.wendangku.net/doc/a612973846.html,:801/CrossDomainAjax/RequestsWithCredentials.html Origin: http://www.meng_xian_https://www.wendangku.net/doc/a612973846.html,:801

HTTP/1.x 200 OK

Date: Sun, 10 Jan 2010 14:12:26 GMT

Server: Microsoft-IIS/6.0

X-Powered-By: https://www.wendangku.net/doc/a612973846.html,

X-AspNet-Version: 2.0.50727

Access-Control-Allow-Origin: http://www.meng_xian_https://www.wendangku.net/doc/a612973846.html,:801

Access-Control-Allow-Credentials: true

Set-Cookie: https://www.wendangku.net/doc/a612973846.html,_SessionId=fn2zf0zq1cuwgf45fm5fw145; path=/; HttpOnly

Set-Cookie: visit=1; expires=Sun, 10-Jan-2010 14:12:56 GMT; path=/

Cache-Control: no-cache

Pragma: no-cache

Expires: -1

Content-Type: text/html; charset=utf-8

Content-Length: 1

从上面的响应中可以看出，Cookie 是会随请求一起发送的。如果我们多次点击测试按钮，则可以看到请求和响应的结果是这样的：

GET /RequestsWithCredentials.aspx HTTP/1.1

Host: https://www.wendangku.net/doc/a612973846.html,

User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.2; zh-CN; rv:1.9.1.7) Gecko/20091221 Firefox/3.5.7 (.NET CLR 3.5.30729)

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8

Accept-Language: zh-cn,zh;q=0.5

Accept-Encoding: gzip,deflate

Accept-Charset: GB2312,utf-8;q=0.7,*;q=0.7

Keep-Alive: 300

Connection: keep-alive

Referer:

http://www.meng_xian_https://www.wendangku.net/doc/a612973846.html,:801/CrossDomainAjax/RequestsWithCredentials.html Origin: http://www.meng_xian_https://www.wendangku.net/doc/a612973846.html,:801

Cookie: https://www.wendangku.net/doc/a612973846.html,_SessionId=fn2zf0zq1cuwgf45fm5fw145; visit=2

HTTP/1.x 200 OK

Date: Sun, 10 Jan 2010 14:13:58 GMT

Server: Microsoft-IIS/6.0

X-Powered-By: https://www.wendangku.net/doc/a612973846.html,

X-AspNet-Version: 2.0.50727

Access-Control-Allow-Origin: http://www.meng_xian_https://www.wendangku.net/doc/a612973846.html,:801

Access-Control-Allow-Credentials: true

Set-Cookie: visit=3; expires=Sun, 10-Jan-2010 14:14:28 GMT; path=/

Cache-Control: no-cache

Pragma: no-cache

Expires: -1

Content-Type: text/html; charset=utf-8

Content-Length: 1

注意Cookie: https://www.wendangku.net/doc/a612973846.html,_SessionId=fn2zf0zq1cuwgf45fm5fw145; visit=2 这一行，访问计数器已经被一起发送到服务器。

4，IE8 中的实现方法

IE8已经开始支持跨域访问资源了，但是，IE8提供的功能还比较简单，可以进行简单的请求，下面是一个使用的例子：

"https://www.wendangku.net/doc/a612973846.html,/TR/xhtml1/DTD/xhtml1-transitional.dtd">

孟宪会之AJAX跨域请求测试

另外，IE8的实现方法与其他浏览器不同。更多内容请参考XDomainRequest 对象，地址是：https://www.wendangku.net/doc/a612973846.html,/zh-cn/library/cc288060(VS.85).aspx

jQuery中的Ajax几种请求方法

jQuery确实是一个挺好的轻量级的JS框架，能帮助我们快速的开发JS应用，并在一定程度上改变了我们写JavaScript代码的习惯。废话少说，直接进入正题，我们先来看一些简单的方法，这些方法都是对jQuery.ajax()进行封装以方便我们使用的方法，当然，如果要处理复杂的逻辑，还是需要用到jQuery.ajax()的(这个后面会说到). 1. load( url, [data], [callback] ) ：载入远程HTML 文件代码并插入至DOM 中。 url (String) : 请求的HTML页的URL地址。 data (Map) : (可选参数) 发送至服务器的key/value 数据。 callback (Callback) : (可选参数) 请求完成时(不需要是success的)的回调函数。这个方法默认使用GET 方式来传递的，如果[data]参数有传递数据进去，就会自动转换为POST方式的。jQuery 1.2 中，可以指定选择符，来筛选载入的HTML 文档，DOM 中将仅插入筛选出的HTML 代码。语法形如"url #some > selector"。这个方法可以很方便的动态加载一些HTML文件，例如表单。示例代码： $(".ajax.load").load("[url]https://www.wendangku.net/doc/a612973846.html,/QLeelulu/archive/2008/03/30/1130270.html[/url] .post", function (responseText, textStatus, XMLHttpRequest){ this;//在这里this指向的是当前的DOM对象，即$(".ajax.load")[0] //alert(responseText);//请求返回的内容 //alert(textStatus);//请求状态：success，error //alert(XMLHttpRequest);//XMLHttpRequest对象 }); 这里将显示结果。注：不知道为什么URL写绝对路径在FF下会出错，知道的麻烦告诉下。下面的get()和post()示例使用的是绝对路径，所以在FF下你将会出错并不会看到返回结果。还有get()和post()示例都是跨域调用的，发现传上来后没办法获取结果，所以把运行按钮去掉了。 2. jQuery.get( url, [data], [callback] )：使用GET方式来进行异步请求参数： url (String) : 发送请求的URL地址. data (Map) : (可选) 要发送给服务器的数据，以Key/value 的键值对形式表示，会做为QueryString附加到请求URL中。 callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。这是一个简单的GET 请求功能以取代复杂$.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用$.ajax。示例代码： $.get("./Ajax.aspx", {Action:"get",Name:"lulu"}, function (data, textStatus){ //返回的 data 可以是 xmlDoc, jsonObj, html, text, 等等. this; // 在这里this指向的是Ajax请求的选项配置信息，请参考下图

jQuery Ajax 全解析(.ajax .post .get)

jQuery Ajax 全解析【.ajax .post .get】 1. load( url, [data], [callback] ) ：载入远程 HTML 文件代码并插入至 DOM 中。 url (String) : 请求的HTML页的URL地址。 data (Map) : (可选参数) 发送至服务器的 key/value 数据。 callback (Callback) : (可选参数) 请求完成时(不需要是success的)的回调函数。这个方法默认使用 GET 方式来传递的，如果[data]参数有传递数据进去，就会自动转换为POST方式的。jQuery 1.2 中，可以指定选择符，来筛选载入的 HTML 文档，DOM 中将仅插入筛选出的 HTML 代码。语法形如 "url #some > selector"。这个方法可以很方便的动态加载一些HTML文件，例如表单。示例代码： $(".ajax.load").load("https://www.wendangku.net/doc/a612973846.html,/QLeelulu/archive/2008/03 /30/1130270.html .post", function (responseText, textStatus, XMLHttpRequest){ this;//在这里this指向的是当前的DOM对象，即 $(".ajax.load")[0] //alert(responseText);//请求返回的内容 //alert(textStatus);//请求状态：success，error //alert(XMLHttpRequest);//XMLHttpRequest对象 }); 注：不知道为什么URL写绝对路径在FF下会出错，知道的麻烦告诉下。下面的get()和post()示例使用的是绝对路径，所以在FF下你将会出错并不会看到返回结果。还有get()和post()示例都是跨域调用的，发现传上来后没办法获取结果，所以把运行按钮去掉了。 2. jQuery.get( url, [data], [callback] )：使用GET方式来进行异步请求参数： url (String) : 发送请求的URL地址.

解决js跨域问题

JSONP(JSON With Padding)，就是打包在函数调用中的的JSON（或者包裹的JSON）。AJAX和JSONP在jQuery中的调用方式看起来极为相像，千万不要被这种现象迷惑，它们本质上有很大不同。AJAX是通过XMLHttpRequest对象获取非页面内容，而JSONP是动态的添加 3. 20. 21. 22. 23. 其中get.php的代码是

AJAX跨域的解决方法之PHP后端代理

AJAX是一项客户端技术（JavaScript的XMLHttpRequest对象），在网页上可以用于异步加载数据。但是由于同源策略，一般来说位于服务器1的网页无法与其它的服务器（服务器2）沟通。这就产生了AJAX的跨域问题。解决这个问题有较多的办法可以实现，今天与大家分享一个比较常见的办法——后端代理。起因：通常指的AJAX对象（XMLHttpRequest对象）是无法访问其它服务器的数据，于是产生了跨域问题。思考：既然前端的AJAX无法跨域访问数据，但是可以访问本站（同源：域名、端口、协议）的数据。而PHP作为一门后端编程语言，是可以任意读取互联网的数据，当然就可以读取其它服务器的数据了。再将PHP读取到的数据交给前端使用，这时前端就能在本站的PHP 程序上得到远程服务器的数据了，也就是说，让本站的PHP程序当一个代理人，代替前端去读取数据再交给前端程序使用。这就是AJAX跨域的解决办法之一——后端代理！需求：在本地服务器list.html页面上使用AJAX技术获取并显示来自https://www.wendangku.net/doc/a612973846.html,/的数据。

基于同源策略，该请求是无法完成的PHP后端代理实现： 1、编写PHP文件get.php PHP访问https://www.wendangku.net/doc/a612973846.html,的网页数据 2、编写HTML网页list.html

请求本站的后端文件get.php 3、执行结果使用AJAX也能得到https://www.wendangku.net/doc/a612973846.html,的数据了后记：其实解决AJAX跨域请求数据的办法有很多，比如：JSONP、设置响应头、Iframe等等，可以根据自身的实际情况来使用，今天介绍的后端代理核心点在于让后端程序去实现跨域获取数据，再以同源方式提供给前端页面使用，可以在有后端程序支持的情况下使用。下面再给大家列出一些常见的问题。 1、什么是AJAX？ AJAX是一项客户端技术，通常指的是window.XMLHttpRequest对象，也有老版本的IE浏览器以其它的对象名称来代表该对象。 2、什么是同源策略？

ajax面试题

Ajax面试资料整理 1、ajax过程 (1)创建XMLHttpRequest对象,也就是创建一个异步调用对象. (2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息. (3)设置响应HTTP请求状态变化的函数. (4)发送HTTP请求. (5)获取异步调用返回的数据. (6)使用JavaScript和DOM实现局部刷新. 2、异步加载和延迟加载 1.异步加载的方案：动态插入script标签 2.通过ajax去获取js代码，然后通过eval执行 3.script标签上添加defer或者async属性 4.创建并插入iframe，让它异步执行js 5.延迟加载：有些 js 代码并不是页面初始化的时候就立刻需要的，而稍后的某些情况才需要的。 3、请解释一下 JavaScript 的同源策略。概念:同源策略是客户端脚本（尤其是Javascript）的重要的安全度量标准。它最早出自Netscape Navigator2.0，其目的是防止某个文档或脚本从多个不同源装载。这里的同源策略指的是：协议，域名，端口相同，同源策略是一种安全协议。指一段脚本只能读取来自同一来源的窗口和文档的属性。为什么要有同源限制？我们举例说明：比如一个黑客程序，他利用Iframe把真正的银行登录页面嵌到他的页面上，当你使用真实的用户名，密码登录时，他的页面就可以通过Javascript读取到你的表单中input中的内容，这样用户名，密码就轻松到手了。 4、GET和POST的区别，何时使用POST？ GET：一般用于信息获取，使用URL传递参数，对所发送信息的数量也有限制，一般在2000个字符 POST：一般用于修改服务器上的资源，对所发送的信息没有限制。 GET方式需要使用Request.QueryString来取得变量的值，而POST方式通过Request.Form来获取变量的值，也就是说Get是通过地址栏来传值，而Post是通过提交表单来传值。然而，在以下情况中，请使用 POST 请求：无法使用缓存文件（更新服务器上的文件或数据库）向服务器发送大量数据（POST 没有数据量限制）

CORS(跨域资源共享) 的配置

兼容情况：各种新版本的ie10,firefox,opera,safari,chrome以及移动版safari和Android浏览器 ie9及一下版本请使用flash方式来兼容通过OPTIONS请求握手一次的方式实现跨根域发送请求，需要服务端配置 nginx增加类似如下配置： [html]view plaincopy 1.server { 2. location / { 3. if ($request_method = 'OPTIONS') { 4. add_header 'Access-Control-Allow-Origin' '*'; 5. add_header 'Access-Control-Allow-Credentials' 'true'; 6. add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; 7. add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep- Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Ty pe'; 8. # add_header 'Access-Control-Max-Age' 1728000; 9. add_header 'Content-Type' 'text/plain charset=UTF-8'; 10. add_header 'Content-Length' 0; 11. return 200; 12. } 13.} 如果没有nginx转发，java需要如下代码： [html]view plaincopy 1.rundata.getResponse().addHeader("Access-Control-Allow-Origin", "*"); 2.rundata.getResponse().addHeader("Access-Control-Allow-Methods", "GET, POST, OPTIONS"); 3.rundata.getResponse().addHeader("Access-Control-Allow-Headers", "Origin, No- Cache, X-Requested-With, If-Modified-Since, Pragma, Last-Modified, Cache-Con trol, Expires, Content-Type, X-E4M-With");

前端解决跨域问题的8种方案(最新最全)

1) 在https://www.wendangku.net/doc/a612973846.html,/a.html中： document.domain = 'https://www.wendangku.net/doc/a612973846.html,'; var ifr = document.createElement('iframe'); ifr.src= 'https://www.wendangku.net/doc/a612973846.html,/b.html'; ifr.display= none;

AJAX使用XMLHttpRequest访问跨域问题解决

AJAX跨域访问的解决方法 Javascscript:使用web代理解决XMLHttpRequest跨域调用问题 XMLHttpRequest对象(IE、Firefox中的XMLHTTP对象)是当今尤其是ajax的web 应用程序的核心.但实际上,使用此对象来编写客户端web应用程序会在跨域的网络连接上受到web浏览器的严重限制. 为什么需要一个代理 web浏览器在网络连接的时候会强制执行一个安全限制,其中就包括调用XMLHttpRequest。此安全限制阻止脚本或者应用程序连接任何其他的不是来自本域的web服务(IE下可通过修改开启选项来允许跨域请求).如果你的web程序和程序使用的XML数据来自同一服务器,那不会有问题。但是,如果你访问一个web服务器，而web服务器返回页面请求另外一个如Yahoo! Web Service这样的服务器,那么这个访问就会受到限制。

这个问题有很多解决方案,最通用的就是在你的web服务器上安装一个代理.你可以通过调用自己的web服务代理来代替直接调用其它服务器上的web服务，通过代理发起XMLHttpRequest请求，然后代理传递请求到web服务,并且返回客户端应用程序所需要的数据。因为所有数据来自你自己的服务器,所以你的浏览器不会受到什么限制。出于安全考虑,你web服务器上安装的任何代理被限制使用是一个好主意.转发连接到任意网站url的开放式代理会被滥用。尽管很难限制连接只能来自你自己的应用程序,但是你可以阻止代理去连接那些你没有指定的服务器. Hard code the URL to connect to in the proxy itself 或者提供限制选项.这可以使得代理对不是你的客户端应用程序的用户较低的开放和较少的应用。其他解决方案除了通过使用web代理来转发应用程序的服务数据外,还有其他几种方式来绕过浏览器的跨域限制. ?使用阿帕奇的mod_rewrite or mod_proxy来从你的服务器上转发到另外的服务器.在你的客户端代码中你只要做请求就可以了,就好象工作在你自己的服务器上-------不会有浏览器的限制问题.然后阿帕奇会神奇的为你请求其他服务器. ?使用json或者动态