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

時間 2019-11-07

原文原文鏈接

寫在前面：

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

ajax簡介：

Ajax 的全稱是Asynchronous JavaScript and XML，意思是：異步 JavaScript 和 XML
Ajax是使用XMLHttpRequest對象與服務器端通訊的腳本語言
能夠發送及接收各類格式的信息，包括JSON、XML、HTML和文本文件。
AJAX能夠無需刷新頁面而與服務器端進行通訊。
容許你根據用戶事件來更新部分頁面內容。

Ajax工做原理：

Ajax的工做原理至關於在用戶和服務器之間加了一箇中間層(Ajax引擎),使用戶操做與服務器響應異步化。並非全部的用戶請求都提交給服務器,像—些數據驗證(好比判斷用戶是否輸入了數據)和數據處理(好比判斷用戶輸入數據是不是數字)等都交給Ajax引擎本身來作, 只有肯定須要從服務器讀取新數據時再由Ajax引擎代爲向服務器提交請求。把這些交給了Ajax引擎，用戶操做起來也就感受更加流暢了。php

Ajax的優勢：

頁面無刷新，用戶體驗好。html
- AJAX最大優勢就是能在不刷新整個頁面的前提下與服務器通訊維護數據。這使得Web應用程序更爲迅捷地響應用戶交互，並避免了在網絡上發送那些沒有改變的信息，減小用戶等待時間，帶來很是好的用戶體驗。
異步通訊，更加快的響應能力。前端
- AJAX使用異步方式與服務器通訊，不須要打斷用戶的操做，具備更加迅速的響應能力。優化了Browser和Server之間的溝通，減小沒必要要的數據傳輸、時間及下降網絡上數據流量。
減小冗餘請求，減輕了服務器負擔java
- AJAX的原則是「按需取數據」，能夠最大程度的減小冗餘請求和響應對服務器形成的負擔，提高站點性能。
基於標準化的並被普遍支持的技術，不須要下載插件或者小程序ajax

AJAX基於標準化的並被普遍支持的技術，不須要下載瀏覽器插件或者小程序，但須要客戶容許JavaScript在瀏覽器上執行。

界面與應用分離。

Ajax使WEB中的界面與應用分離（也能夠說是數據與呈現分離），有利於分工合做、減小非技術人員對頁面的修改形成的WEB應用程序錯誤、提升效率、也更加適用於如今的發佈系統。

Ajax應用場景：

數據驗證。用戶的註冊，登陸功能，經過與後臺交互數據，進行數據驗證
按需取數據。按照需求，展現所須要的部分數據，而不是一股腦的將整個網頁全都展現出來。
自動更新頁面。栗子：百度搜索的提示,出現聯想提示語，展現用戶最有可能搜索的詞彙。
自動更新頁面。栗子：在線聊天室，設置一個定時器，每隔幾秒向請求數據，實時更新頁面信息。

同步執行和異步執行。

javascript同步表示sync，指的就是：代碼依次執行。javascript 異步表示async，指：代碼執行不按順序，能夠這麼理解：同步是在一條直線上的隊列，異步不在一個隊列上各走各的。javascript所謂的「線程」，就是這樣的一種概念。小程序

雖然異步執行能夠實現多任務並行執行，使執行的效率大大提升，可是異步執行也會佔用瀏覽器的性能，不要胡亂的使用異步執行。後端

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

關於同步和異步，大概只能說這些，有興趣的朋友能夠本身深刻了解一下。瀏覽器

開始一個Ajax請求須要瞭解的背景知識：

XMLHttpRequest對象:

Ajax的核心是XMLHttpRequest對象，它是Ajax實現的關鍵，發送異步請求、接受響應以及執行回調都是經過它來完成，下面咱們就來聊一聊XMLHttpRequest對象是什麼鬼？擁有哪些屬性、方法，這些都是用來幹什麼的，這對於咱們系統性的瞭解Ajax請求是很是有幫助的。

XMLHttpRequest對象的屬性：

XMLHttpRequest對象的方法：

圖片出處

XMLHttpRequest雖然目前尚未被W3C所採納，可是它已是一個事實的標準，由於全部現代瀏覽器（IE7+、Firefox、Chrome、Safari 以及 Opera）均支持 XMLHttpRequest 對象。，XMLHttpRequest對象的使用方式極其簡單，先不要懵逼。繼續往下看。

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

HTTP請求的方法或動做，Ajax請求方式 ("POST" 或 "GET")，默認爲 "GET"。注意：其它 HTTP 請求方法，如 PUT 和 DELETE 也可使用，但僅部分瀏覽器支持。
你須要請求的URL,總得告訴服務器請求的地址是什麼吧?
請求頭,包含一些客戶端環境信息,身份驗證信息等
請求體,也就是請求正文,請求正文中能夠包含客戶端提交的查詢字符串信息,表單信息等等.

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

在先後端分離的狀況下，對於前端的小夥伴來講，通常是後端選擇請求接口，請求方式，讓咱們去使用，因此請求方式的選擇這點，稍微瞭解一下便可。

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

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

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

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

如何使用Ajax

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

實現Ajax的四個步驟：

新建一個XMLHttpRequest對象。
open方法表示初始化請求，此時並無發送。
定義數據返回後的回調函數，裏面的代碼在readystatechange值改變的時候執行。
發送請求。

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

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

一、新建一個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");
  }
複製代碼

二、open方法表示初始化請求，此時並無發送。

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

參數一：method——請求方式，get或者post。（默認爲get）
參數二：url——請求路徑,文件在服務器上的位置
參數三：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事件,來判斷請求的狀態。

四、發送請求

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方式