簡單理解JavaScript之AJAX

本文主要介紹了JavaScript中的AJAX的相關知識，具有很好的參考價值，以下跟著小編一起來看下吧

##摘要

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、最大的一點是頁面無刷新，在頁面內與伺服器通信，不需要打斷使用者的操作，具有更加迅速的響應能力給用戶的體驗非常好。

2、減輕伺服器的負擔，ajax的原則是“按需取資料”，可以最大程度的減少冗餘請求，和回應對伺服器造成的負擔。

缺點

1、ajax幹掉了back按鈕，也就是對瀏覽器後退機制的破壞。

2、對搜尋引擎的支援比較弱。

以上是簡單理解JavaScript之AJAX的詳細內容。更多資訊請關注PHP中文網其他相關文章！