Meaning: The following code is tested in Firefox 3.5, Chrome 3.0, and Safari 4 versions. The implementation of IE8 is different from other browsing methods.
3, request with authentication information
Authentication is a common problem in web development, and in cross-domain requests, no authentication information is sent by default. To send the verification information, you need to do the Withcredentials attribute, here is an example of a simple request:
[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> dimant Ajax cross-domain request test </title>
- </head>
- <body>
- <input type=' button ' value=' Start testing ' 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 = "Start request ...";
- if (XHR) {
- Xhr.open (' GET ', url, true);
- Xhr.onreadystatechange = handler;
- xhr.withcredentials = "true";
- Xhr.send ();
- } else {
- document.getElementById ("Content"). InnerHTML = "Cannot create XMLHttpRequest. ";
- }
- }
- function Handler (EVTXHR) {
- if (xhr.readystate = = 4) {
- if (xhr.status = =) {
- var response = Xhr.responsetext;
- document.getElementById ("Content"). InnerHTML = "Result:" + response;
- } else {
- document.getElementById ("Content"). InnerHTML + = "<br/> Execution Status:" + Xhr.status;
- }
- }
- else {
- document.getElementById ("Content"). InnerHTML + = "<br/> Execution Status readyState:" + xhr.readystate;
- }
- }
- --></mce:script>
- </body>
- </html>
Click "Start Test", we can detect the following request execution process:
[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 OK
- Date:sun, 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
As you can see from the response above, cookies are sent along with the request. If we click the Test button multiple times, we can see that the result of the request and response is this:
[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 OK
- Date:sun, 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
Pay attention to cookie:asp.net_sessionid=fn2zf0zq1cuwgf45fm5fw145; visit=2 this line, the access counter has been sent together to the server.
The implementation method in 4,IE8
IE8 has started to support cross-domain access to resources, but the functionality provided by IE8 is simple enough to make a simple request, and here's an example of how to use it:
[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> dimant Ajax cross-domain request test </title>
- </head>
- <body>
- <input type=' button ' value=' Start testing ' 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 = "Start ...";
- if (XHR) {
- Xhr.open (' GET ', url);
- xhr.onload = handler;
- Xhr.send ();
- } else {
- document.getElementById ("Content"). InnerHTML = "Cannot create xdomainrequest";
- }
- }
- function Handler (EVTXHR) {
- document.getElementById ("Content"). InnerHTML = "Result:" + xhr.responsetext;
- }
- --></mce:script>
- </body>
- </html>
In addition, IE8 is implemented differently than other browsers. For more information, please refer to the Xdomainrequest object with the address:
http://msdn.microsoft.com/zh-cn/library/cc288060 (vs.85). aspx
Finally, a friend willing to test can visit this http://dotnet.aspx.cc/SimpleCrossSiteRequests.aspx address for a "simple request" test, this page allows any address for cross-domain access
AJAX (XMLHttpRequest) cross-domain request method in detail (iii)
