Ajax學習全套(最全最經典)

Ajax學習全套(最全最經典)_AJAX相關

最後更新：2017-01-18 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

ajax簡介

AJAX即“Asynchronous Javascript And XML”（非同步JavaScript和XML），是指一種建立互動式網頁應用的網頁開發技術。Ajax不是一種新的程式設計語言，而是使用現有標準的新方法。AJAX可以在不重新載入整個頁面的情況下，與伺服器交換資料。這種非同步互動的方式，使使用者單擊後，不必重新整理頁面也能擷取新資料。使用Ajax，使用者可以建立接近本地案頭應用的直接、高可用、更豐富、更動態Web使用者介面。

Ajax包括：

•XHTML和CSS

•使用文件物件模型(Document Object Model)作動態顯示和互動

•使用XML和XSLT做資料互動和操作

•使用XMLHttpRequest進行非同步資料接收

利用AJAX可以做：

•註冊時，輸入使用者名稱自動檢測使用者是否已經存在。

•登陸時，提示使用者名稱密碼錯誤

•刪除資料行時，將行ID發送到後台，後台在資料庫中刪除，資料庫刪除成功後，在頁面DOM中將資料行也刪除。

ajax偽造

iframe就是我們常用的iframe標籤：<iframe>。iframe標籤是架構的一種形式，也比較常用到，iframe一般用來包含別的頁面，例如我們可以在我們自己的網站頁面載入別人網站或者本站其他頁面的內容。iframe標籤的最大作用就是讓頁面變得美觀。iframe標籤的用法有很多，主要區別在於對iframe標籤定義的形式不同，例如定義iframe的長寬高。

因此，iframe標籤具有局部載入內容的特性，所以可以使用其來偽造Ajax請求。

<!DOCTYPE html><html>  <head lang="en">    <meta charset="UTF-8">    <title>偽造AJAX</title>  </head>  <body>    <div>      <p>請輸入要載入的地址：<span id="currentTime"></span></p>      <p>        <input id="url" type="text" />        <input type="button" value="提交" onclick="LoadPage();">      </p>    </div>    <div>      <h3>載入頁面位置：</h3>      <iframe id="iframePosition" style="width: 100%;height: 500px;"></iframe>    </div>    <script type="text/javascript">      window.onload= function(){        var myDate = new Date();        document.getElementById('currentTime').innerText = myDate.getTime();      };      function LoadPage(){        var targetUrl = document.getElementById('url').value;        document.getElementById("iframePosition").src = targetUrl;      }    </script>  </body></html>

原理是這樣的，設定一個提交按鈕，再設定一個輸入框，當我們輸入一個網址的時候，在當前的頁面載入輸入網址的頁面資訊，呈現在iframe框裡，這樣就能做到不重新整理URL來提交不同的資訊。

原生ajax

Ajax的核心是XMLHttpRequest對象(XHR)。XHR為向伺服器發送請求和解析伺服器響應提供了介面。能夠以非同步方式從伺服器擷取新資料。

一、XMLHttpRequest對象

Ajax的核心是XMLHttpRequest對象(XHR)。XHR為向伺服器發送請求和解析伺服器響應提供了介面。能夠以非同步方式從伺服器擷取新資料。

XHR的主要方法有：

1. void open(String method,String url,Boolen async)   用於建立請求    參數：    method： 請求方式（字串類型），如：POST、GET、DELETE...    url：  要請求的地址（字串類型）    async： 是否非同步（布爾類型）2. void send(String body)  用於發送請求  參數：    body： 要發送的資料（字串類型）3. void setRequestHeader(String header,String value)  用於佈建要求頭  參數：    header： 要求標頭的key（字串類型）    vlaue： 要求標頭的value（字串類型）4. String getAllResponseHeaders()  擷取所有回應標頭  傳回值：    回應標頭資料（字串類型）5. String getResponseHeader(String header)  擷取回應標頭中指定header的值  參數：    header： 回應標頭的key（字串類型）  傳回值：    回應標頭中指定的header對應的值6. void abort() 終止請求

XHR的主要屬性有：

1. Number readyState  狀態值（整數），可以確定請求/響應過程的當前活動階段 •0：未初始化。未調用open()方法 •1：啟動。已經調用open()方法，未調用send()方法 •2：發送。已經調用send()方法，未接收到響應 •3：接收。已經接收到部分資料 •4：完成。已經接收到全部資料，可以在用戶端使用 2. Function onreadystatechange         當readyState的值改變時自動觸發執行其對應的函數（回呼函數）  3. String responseText             作為響應主體被返回的文本（字串類型） 4. XmlDocument responseXML           伺服器返回的資料（Xml對象）  5. Number states   狀態代碼（整數），如：200、404... 6. String statesText              狀態文本（字串），如：OK、NotFound...

二、get請求

GET用於向伺服器查詢某些資訊：

<!DOCTYPE html><html><head lang="en">  <meta charset="UTF-8">  <title></title></head><body>  <h1>XMLHttpRequest - Ajax請求</h1>  <input type="button" onclick="XmlGetRequest();" value="Get發送請求" />  <script src="/statics/jquery-1.12.4.js"></script>  <script type="text/javascript">    function GetXHR(){      var xhr = null;      if(XMLHttpRequest){        xhr = new XMLHttpRequest();      }else{        xhr = new ActiveXObject("Microsoft.XMLHTTP");      }      return xhr;    }    function XmlGetRequest(){      var xhr = GetXHR();      // 定義回呼函數      xhr.onreadystatechange = function(){        if(xhr.readyState == 4){          // 已經接收到全部響應資料，執行以下操作          var data = xhr.responseText;          console.log(data);        }      };      // 指定串連方式和地址----檔案方式      xhr.open('get', "/test/", true);      // 發送請求      xhr.send();    }  </script></body></html>

三、post請求

POST請求用於向伺服器發送應該被儲存的資料。POST請求的主體可以包含非常多的資料，而且格式不限。

<!DOCTYPE html><html><head lang="en">  <meta charset="UTF-8">  <title>POST</title></head><body>  <h1>XMLHttpRequest - Ajax請求</h1>  <input type="button" onclick="XmlPostRequest();" value="Post發送請求" />  <script src="/statics/jquery-1.12.4.js"></script>  <script type="text/javascript">    function GetXHR(){      var xhr = null;      if(XMLHttpRequest){        xhr = new XMLHttpRequest();      }else{        xhr = new ActiveXObject("Microsoft.XMLHTTP");      }      return xhr;    }    function XmlPostRequest(){      var xhr = GetXHR();      // 定義回呼函數      xhr.onreadystatechange = function(){        if(xhr.readyState == 4){          // 已經接收到全部響應資料，執行以下操作          var data = xhr.responseText;          console.log(data);        }      };      // 指定串連方式和地址----檔案方式      xhr.open('POST', "/test/", true);      // 佈建要求頭      xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');      // 發送請求      xhr.send('n1=1;n2=2;');    }  </script></body></html>

jquery ajax

jQuery 提供多個與 AJAX 有關的方法。

通過 jQuery AJAX 方法，您能夠使用 HTTP Get 和 HTTP Post 從遠程伺服器上請求文本、HTML、XML 或 JSON - 同時您能夠把這些外部資料直接載入網頁的被選元素中。

•jQuery 不是生產者，而是大自然搬運工。

•jQuery Ajax本質 XMLHttpRequest 或 ActiveXObject

註：2.+版本不再支援IE9以下的瀏覽器

1. jQuery.get(...)    所有參數：       url: 待載入頁面的URL地址       data: 待發送 Key/value 參數。     success: 載入成功時回呼函數。     dataType: 返回內容格式，xml, json, script, text, html2.jQuery.post(...)    所有參數：       url: 待載入頁面的URL地址       data: 待發送 Key/value 參數     success: 載入成功時回呼函數     dataType: 返回內容格式，xml, json, script, text, html3.jQuery.getJSON(...)    所有參數：       url: 待載入頁面的URL地址       data: 待發送 Key/value 參數。     success: 載入成功時回呼函數。4.jQuery.getScript(...)    所有參數：       url: 待載入頁面的URL地址       data: 待發送 Key/value 參數。     success: 載入成功時回呼函數。5.jQuery.ajax(...)    部分參數：       url：請求地址       type：請求方式，GET、POST（1.9.0之後用method）     headers：要求標頭       data：要發送的資料   contentType：即將發送資訊至伺服器的內容編碼類別型(預設: "application/x-www-form-urlencoded; charset=UTF-8")      async：是否非同步     timeout：佈建要求逾時時間（毫秒）    beforeSend：發送請求前執行的函數(全域)     complete：完成之後執行的回呼函數(全域)     success：成功之後執行的回呼函數(全域)      error：失敗之後執行的回呼函數(全域)     accepts：通過要求標頭發送給伺服器，告訴伺服器當前用戶端課接受的資料類型     dataType：將伺服器端返回的資料轉換成指定類型      "xml": 將伺服器端返回的內容轉換成xml格式      "text": 將伺服器端返回的內容轉換成普通文字格式設定      "html": 將伺服器端返回的內容轉換成普通文字格式設定，在插入DOM中時，如果包含JavaScript標籤，則會嘗試去執行。     "script": 嘗試將傳回值當作JavaScript去執行，然後再將伺服器端返回的內容轉換成普通文字格式設定      "json": 將伺服器端返回的內容轉換成相應的JavaScript對象     "jsonp": JSONP 格式使用 JSONP 形式調用函數時，如 "myurl?callback=?" jQuery 將自動替換 ? 為正確的函數名，以執行回呼函數

寫一個最簡單的例子：

<!DOCTYPE html><html><head lang="en">  <meta charset="UTF-8">  <title></title></head><body>  <p>    <input type="button" onclick="XmlSendRequest();" value='Ajax請求' />  </p>  <script type="text/javascript" src="jquery-1.12.4.js"></script>  <script>    function JXmlSendRequest(){      $.ajax({        url: "http://c2.com:8000/test/",  // 訪問url地址        type: 'GET',            // get方式提交        dataType: 'text',　　　　　　　　　　 // 資料類型        success: function(data, statusText, xmlHttpRequest){ // 成功後返回的結果          console.log(data);        }      })    }  </script></body></html>

跨域ajax

由於瀏覽器存在同源策略機制，同源策略阻止從一個源載入的文檔或指令碼擷取或設定另一個源載入的文檔的屬性。所以ajax本身是不可以跨域的，通過產生一個script標籤來實現跨域。因為script標籤的src屬性是沒有跨域的限制的。

瀏覽器同源策略並不是對所有的請求均制約：

•制約： XmlHttpRequest

•不制約： img、iframe、script等具有src屬性的標籤

註：自己類比跨域，需要現在自己電腦的host檔案裡面添加兩條網域名稱，我這裡添加的是zhangyanlin.com和aylin.com這兩個網域名稱

一、JSONP實現跨域請求

JSONP是一個非官方的協議，它允許在伺服器端整合Script tags返回至用戶端，通過javascript callback的形式實現跨域訪問。jsonp只能通過get方式進行跨域請求

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title></head><body>  <input type="button" value="Ajax" onclick="DoAjax();"/>  <input type="button" value="JsonpAjax" onclick="JsonpAjax();"/>  <script src="/statics/jquery-1.12.4.js"></script>  <script src="http://aylin.com:8002/statics/jquery.cookie.js"></script>  <script>    function func(arg) {      console.log(arg); // 輸出結果就是python代碼給傳過來的列表[11,22,33,]    }    function DoAjax() {      $.ajax({        url: 'http://alex.com:8002/index',        type: 'POST',        data: {'k1': 'v1'},        success: function (arg) {          console.log(arg);        }              });    }    function JsonpAjax() {//      var tag = document.createElement('script');//      tag.src = "http://alex.com:8002/index";//      document.head.appendChild(tag);//      document.head.removeChild(tag);      $.ajax({        url: "http://aylin.com:8002/index",        dataType: 'jsonp',        jsonpCallBack: 'func'  // 對端給返回函數名，函數接收的參數是內容      })    }  </script></body></html>

aylin.com網域名稱這邊可以給定義函數

# 採用pythontornado架構來進行的class IndexHandler(tornado.web.RequestHandler):  def get(self):    self.write('func([11,22,33]);')  def post(self, *args, **kwargs):    self.write('t2.post')

在這裡jsonp就採用script標籤的src來進行跨域請求的

二、CORS

上面那種方法說到瀏覽器的同源策略導致ajax無法進行跨域傳輸，那麼這種方法就可以突破瀏覽器限制來進行傳輸。當資料發送給對方網域名稱的時候，對方已經收到，但是在返回的時候被瀏覽器給阻擋，我們可以寫一串類似於身份證的字串，通過瀏覽器的預檢，從而達到資料的傳輸。

這方面分為簡單請求和非簡單請求

條件：  1、請求方式：HEAD、GET、POST  2、要求標頭資訊：    Accept    Accept-Language    Content-Language    Last-Event-ID    Content-Type 對應的值是以下三個中的任意一個                application/x-www-form-urlencoded                multipart/form-data                text/plain注意：同時滿足以上兩個條件時，則是簡單請求，否則為複雜請求

簡單請求只一次請求，而複雜請求是兩次請求，在發送資料之前會先發一次請求用於做“預檢”，只有“預檢”通過後才再發送一次請求用於資料轉送。

基於cors實現AJAX請求:

1、支援跨域，簡單請求

伺服器設定回應標頭：Access-Control-Allow-Origin = '網域名稱' 或 '*'

<!DOCTYPE html><html><head lang="en">  <meta charset="UTF-8">  <title></title></head><body>  <p>    <input type="submit" onclick="XmlSendRequest();" />  </p>  <p>    <input type="submit" onclick="JqSendRequest();" />  </p>  <script type="text/javascript" src="jquery-1.12.4.js"></script>  <script>    function XmlSendRequest(){      var xhr = new XMLHttpRequest();      xhr.onreadystatechange = function(){        if(xhr.readyState == 4) {          var result = xhr.responseText;          console.log(result);        }      };      xhr.open('GET', "http://c2.com:8000/test/", true);      xhr.send();    }    function JqSendRequest(){      $.ajax({        url: "http://c2.com:8000/test/",        type: 'GET',        dataType: 'text',        success: function(data, statusText, xmlHttpRequest){          console.log(data);        }      })    }  </script></body></html>

class MainHandler(tornado.web.RequestHandler):  def get(self):    self.set_header('Access-Control-Allow-Origin', "http://www.xxx.com")    self.write('{"status": true, "data": "seven"}')

2、支援跨域，複雜請求

由於複雜請求時，首先會發送“預檢”請求，如果“預檢”成功，則發送真實資料。

•“預檢”請求時，允許請求方式則需伺服器設定回應標頭：Access-Control-Request-Method

•“預檢”請求時，允許要求標頭則需伺服器設定回應標頭：Access-Control-Request-Headers

•“預檢”緩衝時間，伺服器設定回應標頭：Access-Control-Max-Age

<!DOCTYPE html><html><head lang="en">  <meta charset="UTF-8">  <title></title></head><body>  <p>    <input type="submit" onclick="XmlSendRequest();" />  </p>  <p>    <input type="submit" onclick="JqSendRequest();" />  </p>  <script type="text/javascript" src="jquery-1.12.4.js"></script>  <script>    function XmlSendRequest(){      var xhr = new XMLHttpRequest();      xhr.onreadystatechange = function(){        if(xhr.readyState == 4) {          var result = xhr.responseText;          console.log(result);        }      };      xhr.open('PUT', "http://aylin.com:8000/test/", true);      xhr.setRequestHeader('k1', 'v1');      xhr.send();    }    function JqSendRequest(){      $.ajax({        url: "http://aylin.com:8000/test/",        type: 'PUT',        dataType: 'text',        headers: {'k1': 'v1'},        success: function(data, statusText, xmlHttpRequest){          console.log(data);        }      })    }  </script></body></html>

class MainHandler(tornado.web.RequestHandler):  def put(self):    self.set_header('Access-Control-Allow-Origin', "http://www.xxx.com")    self.write('{"status": true, "data": "seven"}')  def options(self, *args, **kwargs):    self.set_header('Access-Control-Allow-Origin', "http://www.xxx.com")    self.set_header('Access-Control-Allow-Headers', "k1,k2")    self.set_header('Access-Control-Allow-Methods', "PUT,DELETE")    self.set_header('Access-Control-Max-Age', 10)

3、跨域傳輸cookie

在跨域請求中，預設情況下，HTTP Authentication資訊，Cookie頭以及使用者的SSL認證無論在預檢請求中或是在實際請求都是不會被發送。

如果想要發送：

•瀏覽器端：XMLHttpRequest的withCredentials為true

•伺服器端：Access-Control-Allow-Credentials為true

•注意：伺服器端響應的 Access-Control-Allow-Origin 不能是萬用字元 *

<!DOCTYPE html><html><head lang="en">  <meta charset="UTF-8">  <title></title></head><body>  <p>    <input type="submit" onclick="XmlSendRequest();" />  </p>  <p>    <input type="submit" onclick="JqSendRequest();" />  </p>  <script type="text/javascript" src="jquery-1.12.4.js"></script>  <script>    function XmlSendRequest(){      var xhr = new XMLHttpRequest();      xhr.onreadystatechange = function(){        if(xhr.readyState == 4) {          var result = xhr.responseText;          console.log(result);        }      };      xhr.withCredentials = true;      xhr.open('PUT', "http://aylin.com:8000/test/", true);      xhr.setRequestHeader('k1', 'v1');      xhr.send();    }    function JqSendRequest(){      $.ajax({        url: "http://aylin.com:8000/test/",        type: 'PUT',        dataType: 'text',        headers: {'k1': 'v1'},        xhrFields:{withCredentials: true},        success: function(data, statusText, xmlHttpRequest){          console.log(data);        }      })    }  </script></body></html>

class MainHandler(tornado.web.RequestHandler):  def put(self):    self.set_header('Access-Control-Allow-Origin', "http://www.xxx.com")    self.set_header('Access-Control-Allow-Credentials', "true")    self.set_header('xxoo', "seven")    self.set_header('zhangyanlinhenshuai', "feichangshuai")    self.set_header('Access-Control-Expose-Headers', "shuai,shuaishuai")    self.set_cookie('kkkkk', 'vvvvv');    self.write('{"status": true, "data": "seven"}')  def options(self, *args, **kwargs):    self.set_header('Access-Control-Allow-Origin', "http://www.xxx.com")    self.set_header('Access-Control-Allow-Headers', "k1,k2")    self.set_header('Access-Control-Allow-Methods', "PUT,DELETE")    self.set_header('Access-Control-Max-Age', 10)

以上所述是小編給大家介紹的Ajax學習全套(最全最經典)的全部敘述，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對雲棲社區網站的支援！

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More