輕松理解JavaScript之AJAX

2019-11-19 17:08:40

字體：大中小

來源：轉載

供稿：網友

摘要

AJAX技術是網頁構建的必備技能之一，本文希望能幫助大家輕松的學習這項技術

一、什么是ajax?

ajax(異步javascript xml) 能夠刷新局部網頁數據而不是重新加載整個網頁。

二、如何使用ajax?

第一步：創建xmlhttprequest對象

創建xmlhttprequest對象，XMLHttpRequest對象用來和服務器交換數據。

var xmlhttp =new XMLHttpRequest();

第二步：注冊回調函數

onreadystatechange函數，當服務器響應請求并返回數據后，我們想要客戶端處理這些數據就需要使用onreadystatechange函數，每次xmlhttprequest對象的readyState發生改變都會觸發onreadystatechange函數。對于readyState會在下一章節詳細介紹。

 xmlHttp.onreadystatechange= callback;  function callback(){}

第三步：配置和發送請求

使用xmlhttprequest對象的open（）和send（）方法配置和發送資源請求給服務器。

xmlhttp.open(method,url,async) method包括get 和post，url主要是文件或資源的路徑，async參數為true(代表異步)或者false（代表同步）

xmlhttp.send();使用get方法發送請求到服務器。

xmlhttp.send(string);使用post方法發送請求到服務器。

post表單數據需要使用xmlhttprequest對象的setRequestHeader方法增加一個HTTP頭。

post 發送請求什么時候能夠使用呢？

(1)更新一個文件或者數據庫的時候。

(2)發送大量數據到服務器，因為post請求沒有字符限制。

(3)發送用戶輸入的加密數據。

xhttp.open("POST", "ajax_test.aspx", true);xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");xhttp.send("fname=Henry&lname=Ford");

第四步：處理響應數據

使用xmlhttprequest對象的responseText或responseXML屬性獲得服務器的響應。

使用responseText屬性得到服務器響應的字符串數據，使用responseXML屬性得到服務器響應的XML數據。

在回調函數中使用readyState==4和status==200判斷交互是否結束，響應是否正確，并根據需要獲取服務器端返回的數據，更新頁面內容。

function callback(){  if(xmlHttp.readyState == 4){   //判斷交互是否成功   if(xmlHttp.status == 200){    //獲取服務器返回的數據    //獲取純文本數據    var responseText =xmlHttp.responseText;    document.getElementById("info").innerHTML = responseText;   }  }}

三、AJAX運行過程中5種狀態（readyState）

在AJAX實際運行當中，對于訪問XMLHttpRequest（XHR）時并不是一次完成的，而是分別經歷了多種狀態后取得的結果，對于這種狀態在AJAX中共有5種，這五種狀態是由AJAX引擎切換設置的，分別是。

0 ：定義了XHR，但還未初始化

1 ：調用send()方法，正在發送請求，請求發送完畢后，開始等待接收響應

2 ：響應接收完成

3 ：正在解析響應內容

4 ：響應內容解析完成，返回給客戶端調用

對于上面的狀態，其中“0”狀態是在定義后自動具有的狀態值，而對于成功訪問的狀態（得到信息）我們大多數采用“4”進行判斷。

值得注意的是，狀態每切換一次，都會觸發onreadystatechange 事件，所以整個過程onreadystatechange 事件被觸發5次

四、AJAX的優缺點

優點

1、最大的一點是頁面無刷新，在頁面內與服務器通信，不需要打斷用戶的操作，具有更加迅速的響應能力給用戶的體驗非常好。