小白來實現一個Ajax請求[Ajax使用方法及相關知識點詳細解析——超級全]

OBKoro1發表於2017-06-01

寫在前面：

本文主要總結整理Ajax使用方法背景知識點的詳細解析，以及Ajax跨域的具體使用方式並且對栗子進行了講解，需要的朋友可以過來參考下，喜歡的可以點波贊，或者關注一下本人，希望通過本文能夠作為一個Ajax的查詢資料，不懂Ajax？看這篇文章就可以了。

ajax簡介：

  • Ajax 的全稱是Asynchronous JavaScript and XML，意思是：非同步 JavaScript 和 XML
  • Ajax是使用XMLHttpRequest物件與伺服器端通訊的指令碼語言
  • 可以傳送及接收各種格式的資訊，包括JSON、XML、HTML和文字檔案。
  • AJAX可以無需重新整理頁面而與伺服器端進行通訊。
  • 允許你根據使用者事件來更新部分頁面內容。

Ajax工作原理：

Ajax的工作原理相當於在使用者和伺服器之間加了一箇中間層(Ajax引擎),使使用者操作與伺服器響應非同步化。並不是所有的使用者請求都提交給伺服器,像—些資料驗證(比如判斷使用者是否輸入了資料)和資料處理(比如判斷使用者輸入資料是否是數字)等都交給Ajax引擎自己來做, 只有確定需要從伺服器讀取新資料時再由Ajax引擎代為向伺服器提交請求。把這些交給了Ajax引擎，使用者操作起來也就感覺更加流暢了。

Ajax的優點：

  1. 頁面無重新整理，使用者體驗好。

    • AJAX最大優點就是能在不重新整理整個頁面的前提下與伺服器通訊維護資料。這使得Web應用程式更為迅捷地響應使用者互動，並避免了在網路上傳送那些沒有改變的資訊，減少使用者等待時間，帶來非常好的使用者體驗。

  2. 非同步通訊，更加快的響應能力。

    • AJAX使用非同步方式與伺服器通訊，不需要打斷使用者的操作，具有更加迅速的響應能力。優化了Browser和Server之間的溝通，減少不必要的資料傳輸、時間及降低網路上資料流量。

  3. 減少冗餘請求，減輕了伺服器負擔

    • AJAX的原則是“按需取資料”，可以最大程度的減少冗餘請求和響應對伺服器造成的負擔，提升站點效能。

  4. 基於標準化的並被廣泛支援的技術，不需要下載外掛或者小程式

  • AJAX基於標準化的並被廣泛支援的技術，不需要下載瀏覽器外掛或者小程式，但需要客戶允許JavaScript在瀏覽器上執行。
  1. 介面與應用分離。
  • Ajax使WEB中的介面與應用分離（也可以說是資料與呈現分離），有利於分工合作、減少非技術人員對頁面的修改造成的WEB應用程式錯誤、提高效率、也更加適用於現在的釋出系統。

Ajax應用場景：

  • 資料驗證。使用者的註冊，登入功能，通過與後臺互動資料，進行資料驗證
  • 按需取資料。按照需求，展示所需要的部分資料，而不是一股腦的將整個網頁全都展示出來。
  • 自動更新頁面。栗子：百度搜尋的提示,出現聯想提示語，展示使用者最有可能搜尋的詞彙。
  • 自動更新頁面。栗子：線上聊天室，設定一個定時器，每隔幾秒向請求資料，實時更新頁面資訊。

同步執行和非同步執行。

javascript同步表示sync，指的就是：程式碼依次執行。javascript 非同步表示async，指：程式碼執行不按順序，可以這麼理解：同步是在一條直線上的佇列，非同步不在一個佇列上 各走各的。javascript所謂的“執行緒”，就是這樣的一種概念。

雖然非同步執行可以實現多工並行執行，使執行的效率大大提高，但是非同步執行也會佔用瀏覽器的效能，不要胡亂的使用非同步執行。

舉個例子：在負荷很重的客戶/伺服器系 統中，時間延遲頻繁且漫長，在這種環境下就比較適宜宜採用非同步執行模式。

關於同步和非同步，大概只能說這些，有興趣的朋友可以自己深入瞭解一下。

開始一個Ajax請求需要了解的背景知識：

XMLHttpRequest物件:

Ajax的核心是XMLHttpRequest物件，它是Ajax實現的關鍵，傳送非同步請求、接受響應以及執行回撥都是通過它來完成，下面我們就來聊一聊XMLHttpRequest物件是什麼鬼？擁有哪些屬性、方法，這些都是用來幹什麼的，這對於我們系統性的瞭解Ajax請求是非常有幫助的。

XMLHttpRequest物件的屬性：

XMLHttpRequest物件的屬性

XMLHttpRequest物件的方法：

XMLHttpRequest物件的方法

圖片出處

XMLHttpRequest雖然目前還沒有被W3C所採納，但是它已經是一個事實的標準，因為所有現代瀏覽器（IE7+、Firefox、Chrome、Safari 以及 Opera）均支援 XMLHttpRequest 物件。，XMLHttpRequest物件的使用方式極其簡單，先不要懵逼。繼續往下看。

Ajax的跨域請求由哪些部分組成的

  • HTTP請求的方法或動作，Ajax請求方式 ("POST" 或 "GET")， 預設為 "GET"。注意：其它 HTTP 請求方法，如 PUT 和 DELETE 也可以使用，但僅部分瀏覽器支援。
  • 你需要請求的URL,總得告訴伺服器請求的地址是什麼吧?
  • 請求頭,包含一些客戶端環境資訊,身份驗證資訊等
  • 請求體,也就是請求正文,請求正文中可以包含客戶端提交的查詢字串資訊,表單資訊等等.

GET和POST兩種請求方式對比：

小白來實現一個Ajax請求[Ajax使用方法及相關知識點詳細解析——超級全]

在前後端分離的情況下，對於前端的小夥伴來說，一般是後端選擇請求介面，請求方式，讓我們去使用，所以請求方式的選擇這點，稍微瞭解一下即可。

Ajax的跨域請的回覆：http響應：

  • 一個數字和文字組成的狀態碼,用來顯示請求是成功還是失敗
  • 響應頭,響應頭和請求頭一樣包含許多有用的資訊,例如伺服器型別,日期時間,內容型別和長度等.
  • 響應體,也就是響應正文.

伺服器端返回的：常見的HTTP狀態碼

小白來實現一個Ajax請求[Ajax使用方法及相關知識點詳細解析——超級全]

關於http的狀態碼還有非常多，不止上圖這點這麼簡單，有興趣的可以看本人之前寫的一篇文章：http狀態碼詳解。

如何使用Ajax

本文中的栗子採用菜鳥教程ajax的栗子：ajax例項

實現Ajax的四個步驟：

  1. 新建一個XMLHttpRequest物件。
  2. open方法表示初始化請求，此時並沒有傳送。
  3. 定義資料返回後的回撥函式，裡面的程式碼在readystatechange值改變的時候執行。
  4. 傳送請求。

使用Ajax的一個栗子，裡面註釋的也較為詳細：

function loadXMLDoc()
{//點選事件
  var xmlhttp;
  if (window.XMLHttpRequest)
  {
    // IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執行程式碼
    xmlhttp=new XMLHttpRequest();
  }
  else
  {
    // IE6, IE5 瀏覽器執行程式碼
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
 //1、上面是建立XMLHttpRequest物件
  xmlhttp.open("POST","/try/Ajax/demo_post2.php",true);// 2、open方法表示初始化請求，此時並沒有傳送。
  xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  xmlhttp.send("fname=Henry&lname=Ford");//4、傳送請求
  xmlhttp.onreadystatechange=function();
  {//3、當引數被傳入伺服器的時候，引用監聽事件。
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    //判斷readyState四種狀態，當執行四步完成之後，並且返回的是200（成功）
    {
      document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
}
複製程式碼

1、新建一個XMLHttpRequest物件：

XMLHttpRequest物件在上文介紹了他的屬性和方法，如上所述， Ajax的核心是XMLHttpRequest物件，這一步是必不可少的，下面就是它的使用語法。

var xmlhttp = new XMLHttpRequest();//沒看錯，就是這麼簡單
複製程式碼

Ajax相容IE7以下：

XMLHttpRequest物件是IE7才開始支援的，老版本IE5和IE6使用的是ActiveX 物件，使用方式是一樣的，區別在於要建立不同的物件。IE7以上自帶XMLHttpRequest物件，如果要相容IE5和IE6只需判斷瀏覽器中是否存在XMLHttpRequest物件。

var xmlhttp;
  if (window.XMLHttpRequest)//檢查是否有XMLHttpRequest物件
  {
    // IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執行程式碼
    xmlhttp=new XMLHttpRequest();
  }
  else
  {
    // IE6, IE5 瀏覽器執行程式碼
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
複製程式碼

2、open方法表示初始化請求，此時並沒有傳送。

open方法的語法open(method,url,async)

  1. 引數一：method——請求方式，get或者post。（預設為get）
  2. 引數二：url——請求路徑,檔案在伺服器上的位置
  3. 引數三：async——true：非同步請求。false:同步請求。（預設為true，非同步請求。）

3.定義資料返回後的回撥函式，裡面的程式碼在readystatechange值改變的時候執行。

觸發Ajax的時候，XMLHttpRequest 的狀態會不斷變化，這個值就存在readyState屬性中。

readyState屬性：

readyState只有5個值{0，1，2，3，4}，只讀不能寫。

0: XMLHttpRequest物件建立完成。————還沒有呼叫open()方法

1: XMLHttpRequest物件初始化完成。————open() 方法已呼叫，但是 send()方法未呼叫。請求還沒有被髮送。

2: 請求已經傳送。———Send() 方法已呼叫，HTTP 請求已傳送到 Web 伺服器。未接收到響應。

3: 伺服器已經返回了資料（但是還沒有被解析，可能只一段http報文）。————正在解析響應內容

4: 資料解析已經完成。————響應內容解析完成,可以在客戶端呼叫了

資料解析完成之後會返回一個http的狀態碼，通過XMLHttpRequest.status獲得該值，判斷是否為200，判斷是否請求成功。

onreadystatechange事件：

每當readyState屬性值改變時，就會觸發 onreadystatechange 事件。——通過監聽onreadystatechange事件,來判斷請求的狀態。

4、傳送請求

  1. send（）方法必須在open（）之後。
    • 在使用GET方式請求時無需填寫引數
    • 在使用POST方式時需要使用setRequestHeader()來新增http頭，然後在 send() 方法中規定您希望傳送的資料

get:

xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
	xmlhttp.send();
複製程式碼

post：

  xmlhttp.open("POST","/try/ajax/demo_post2.php",true);
  xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  xmlhttp.send("fname=Henry&lname=Ford");
複製程式碼

菜鳥教程的栗子：get方式、post方式

寫在後面：

想到當初自己不會Ajax的時候，畏Ajax如洪水猛獸，希望小夥伴們，看了本文就能寫出自己的第一個Ajax來，這也是我想寫這篇文章的意義所在。十多天沒寫文了，這篇文章也準備了好幾天，寫的不好之後，歡迎指正，謝謝。

最後：如需轉載，請放上原文連結並署名。碼字不易，感謝支援！因為我經常看不懂別人寫的分享，所以個人寫文比較偏小白，寫的不好之處，歡迎指點。然後就是希望看完的朋友點個喜歡，也可以關注一下我。

個人blog and 掘金個人主頁

參考資料：

Ajax與資料傳輸

Ajax入門（一）從0開始到一次成功的GET請求

Ajax 總結篇

菜鳥教程——AJAX 教程

以上。2017.6.1

相關文章