AJAX（XMLHttpRequest）进行跨域请求方法详解（三）

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

3，带验证信息的请求

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

[xhtml] view plaincopy

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>孟宪会之AJAX跨域请求测试</title>
</head>
<body>
<input type='button' value='开始测试' οnclick='crossDomainRequest()' />
<div id="content"></div>
<mce:script type="text/javascript"><!--
var xhr = new XMLHttpRequest();
var url = 'http://dotnet.aspx.cc/RequestsWithCredentials.aspx';
function crossDomainRequest() {
document.getElementById("content").innerHTML = "开始进行请求……";
if (xhr) {
xhr.open('GET', url, true);
xhr.onreadystatechange = handler;
xhr.withCredentials = "true";
xhr.send();
} else {
document.getElementById("content").innerHTML = "不能创建 XMLHttpRequest。";
}
}
function handler(evtXHR) {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var response = xhr.responseText;
document.getElementById("content").innerHTML = "结果：" + response;
} else {
document.getElementById("content").innerHTML += "<br/>执行状态 status：" + xhr.status;
}
}
else {
document.getElementById("content").innerHTML += "<br/>执行状态 readyState：" + xhr.readyState;
}
}
// --></mce:script>
</body>
</html>

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

[xhtml] view plaincopy

GET /RequestsWithCredentials.aspx HTTP/1.1
Host: dotnet.aspx.cc
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_hui.com:801/CrossDomainAjax/RequestsWithCredentials.html
Origin: http://www.meng_xian_hui.com:801
HTTP/1.x 200 OK
Date: Sun, 10 Jan 2010 14:12:26 GMT
Server: Microsoft-IIS/6.0
X-Powered-By: ASP.NET
X-AspNet-Version: 2.0.50727
Access-Control-Allow-Origin: http://www.meng_xian_hui.com:801
Access-Control-Allow-Credentials: true
Set-Cookie: ASP.NET_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 是会随请求一起发送的。如果我们多次点击测试按钮，则可以看到请求和响应的结果是这样的：

[xhtml] view plaincopy

GET /RequestsWithCredentials.aspx HTTP/1.1
Host: dotnet.aspx.cc
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_hui.com:801/CrossDomainAjax/RequestsWithCredentials.html
Origin: http://www.meng_xian_hui.com:801
Cookie: ASP.NET_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: ASP.NET
X-AspNet-Version: 2.0.50727
Access-Control-Allow-Origin: http://www.meng_xian_hui.com: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: ASP.NET_SessionId=fn2zf0zq1cuwgf45fm5fw145; visit=2 这一行，访问计数器已经被一起发送到服务器。

4，IE8 中的实现方法

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

[xhtml] view plaincopy

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>孟宪会之AJAX跨域请求测试</title>
</head>
<body>
<input type='button' value='开始测试' οnclick='crossDomainRequest()' />
<div id="content"></div>
<mce:script type="text/javascript"><!--
var xhr = new XDomainRequest();
var url = 'http://dotnet.aspx.cc/SimpleCrossSiteRequests.aspx';
function crossDomainRequest() {
document.getElementById("content").innerHTML = "开始……";
if (xhr) {
xhr.open('GET', url);
xhr.onload = handler;
xhr.send();
} else {
document.getElementById("content").innerHTML = "不能创建 XDomainRequest";
}
}
function handler(evtXHR) {
document.getElementById("content").innerHTML = "结果：" + xhr.responseText;
}
// --></mce:script>
</body>
</html>

另外，IE8的实现方法与其他浏览器不同。更多内容请参考 XDomainRequest 对象，地址是：
http://msdn.microsoft.com/zh-cn/library/cc288060(VS.85).aspx

最后，愿意测试的朋友可以访问这个 http://dotnet.aspx.cc/SimpleCrossSiteRequests.aspx 地址进行“简单请求”的测试，本页面允许任何地址进行跨域访问

转载于:https://www.cnblogs.com/telwanggs/p/5000018.html

AJAX（XMLHttpRequest）进行跨域请求方法详解（三）相关推荐

AJAX（XMLHttpRequest）进行跨域请求方法详解（二）
注意:以下代码请在Firefox 3.5.Chrome 3.0.Safari 4之后的版本中进行测试.IE8的实现方法与其他浏览不同. 2,预检请求预检请求首先需要向另外一个域名的资源发送一个 HT ...
跨域ajax post json 403,跨域请求403详解
0.环境说明 1.下文中跨域实现为服务器域名 http://yaogy.jd.com 向本地项目 leo.com 发起跨域请求,本地进行debug. 2.本地项目 Spring 版本为 4.3.0. ...
JQuery - Ajax和Tomcat跨域请求问题解决方法！
JQuery - Ajax和Tomcat跨域请求问题解决方法! 参考文章: (1)JQuery - Ajax和Tomcat跨域请求问题解决方法! (2)https://www.cnblogs.com/ ...
原生JS实现Ajax和JSONP跨域请求
背景: 对接身份证录入和门锁卡号录入设备中,安装驱动完成后,提供的接口服务是http://localhost:8099/?cmd=readbcardid&charset=gbk,返回的数据格式 ...
Ajax的Post跨域请求
Ajax的Post跨域请求什么是跨域请求同协议,同ip,同端口视为一个域,两个域之间互相访问就是跨域访问请求. 根据浏览器的同源策略,一个域中的脚本只具有访问本域资源的权限,无法访问其他域的资源. ...
跨域资源共享CORS详解
最近深入了解了CORS的相关东西,觉得阮一峰老师的文章写得最详细易懂了,所有转载作为学习笔记. 原文地址:跨域资源共享 CORS 详解 CORS是W3C的一个标准,全称是跨域资源共享(Cross-or ...
python跨域攻击教学_关于python 跨域处理方式详解
因为浏览器的同源策略限制,不是同源的脚本不能操作其他源下面的资源,想操作另一个源下面的资源就属于跨域了,这里说的跨域是广义跨域,我们常说的代码中请求跨域,是狭义的跨域,即在脚本代码中向非同源域发送ht ...
python headr方法_对Python发送带header的http请求方法详解
简单的header import urllib2 request = urllib2.Request('http://example.com/') request.add_header('User-A ...
ajax跨域请求 xml,XMLHttpRequest的跨域请求
动态添加一个标签,而script标签的src属性是没有跨域的限制的.这样说来,这种跨域方式其实与ajax XmlHttpRequest协议无关了. 这样其实"jQuery AJAX跨域问题& ...

AJAX（XMLHttpRequest）进行跨域请求方法详解（三）

AJAX（XMLHttpRequest）进行跨域请求方法详解（三）相关推荐

最新文章

热门文章