AJAX（XMLHttpRequest）進行跨域請求方法詳解

時間 2019-11-16

標籤 ajax xmlhttprequest 進行請求方法詳解欄目 Ajax 简体版

原文原文鏈接

3，帶驗證信息的請求javascript

身份驗證是Web開發中常常遇到的問題，在跨域請求中，默認狀況下是不發送驗證信息的。要想發送驗證信息，須要進行withCredentials 屬性，下面就是一個簡單請求的例子：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>

點擊「開始測試」，咱們能夠檢測到下面的請求執行過程：java

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 是會隨請求一塊兒發送的。若是咱們屢次點擊測試按鈕，則能夠看到請求和響應的結果是這樣的：跨域

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提供的功能還比較簡單，能夠進行簡單的請求，下面是一個使用的例子：app

<!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測試