AJAX(XMLHttpRequest)跨域请求(三)

分类：Javascript| 发布：camnprbubuol| 查看： | 发表时间：2010/12/10

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

3，带验证信息的请求

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

<!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=’开始测试’ onclick=’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> 

<!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=’开始测试’ onclick=’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>

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

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.camnpr.com:801/CrossDomainAjax/RequestsWithCredentials.html 

Origin: http://www.camnpr.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.camnpr.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 

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.camnpr.com:801/CrossDomainAjax/RequestsWithCredentials.html

Origin: http://www.camnpr.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.camnpr.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 是会随请求一起发送的。如果我们多次点击测试按钮，则可以看到请求和响应的结果是这样的：
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.camnpr.com:801/CrossDomainAjax/RequestsWithCredentials.html 

Origin: http://www.camnpr.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.camnpr.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 

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.camnpr.com:801/CrossDomainAjax/RequestsWithCredentials.html

Origin: http://www.camnpr.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.camnpr.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提供的功能还比较简单，可以进行简单的请求，下面是一个使用的例子：

<!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=’开始测试’ onclick=’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> 

<!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=’开始测试’ onclick=’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 地址进行“简单请求”的测试，本页面允许任何地址进行跨域访问。（不好意思，个人网站可能被河蟹了）

365据说看到好文章不转的人，服务器容易宕机！

标签：Ajax JS Widget

原创文章如转载，请注明：转载自郑州网建-前端开发　http://camnpr.com/
本文链接：http://camnpr.com/archives/122.html

AJAX(XMLHttpRequest)跨域请求(二)(2010-12-10 9:59:27)
AJAX(XMLHttpRequest)跨域请求(一)(2010-12-10 9:56:45)
JavaScript应用框架JsHtaFramework(jsapp)支持云计算(2010-12-9 16:38:23)
仿Stack Overflow上的编辑器,告诉网站开发人员应该知道的事情(2010-11-28 13:16:25)
[JS金奖]可自动缩放的JS弹性相册(2010-11-11 0:16:50)
Js和CSS结合实现图片自动适应放大(2010-11-2 22:30:21)
JavaScript html js图片切割系统,裁剪,图片处理(2010-9-26 15:50:33)
JavaScript html js仿163网盘无刷新文件上传系统,.net和jsp两种demo(2010-9-26 15:45:35)
JS倒计时代码(2010-9-25 11:4:24)
【Tooltips】JS消息提醒框控件(2010-9-13 1:15:49)

AJAX(XMLHttpRequest)跨域请求(三)

相关文章

关注本站

一条新消息

小编推荐

热门文章

想你所想爱你所爱

AJAX(XMLHttpRequest)跨域请求(三)

相关文章

关注本站

一条新消息

小编推荐

热门文章

想你所想 爱你所爱

想你所想爱你所爱