輕松理解JavaScript之AJAX

摘要

創(chuàng)新互聯(lián)公司專注于企業(yè)全網(wǎng)營銷推廣、網(wǎng)站重做改版、張店網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5響應(yīng)式網(wǎng)站、商城網(wǎng)站制作、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為張店等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

AJAX技術(shù)是網(wǎng)頁構(gòu)建的必備技能之一，本文希望能幫助大家輕松的學(xué)習(xí)這項(xiàng)技術(shù)

一、什么是ajax?

ajax(異步j(luò)avascript xml) 能夠刷新局部網(wǎng)頁數(shù)據(jù)而不是重新加載整個(gè)網(wǎng)頁。

二、如何使用ajax?

第一步：創(chuàng)建xmlhttprequest對象

創(chuàng)建xmlhttprequest對象，XMLHttpRequest對象用來和服務(wù)器交換數(shù)據(jù)。

var xmlhttp =new XMLHttpRequest();

第二步：注冊回調(diào)函數(shù)

onreadystatechange函數(shù)，當(dāng)服務(wù)器響應(yīng)請求并返回?cái)?shù)據(jù)后，我們想要客戶端處理這些數(shù)據(jù)就需要使用onreadystatechange函數(shù)，每次xmlhttprequest對象的readyState發(fā)生改變都會觸發(fā)onreadystatechange函數(shù)。對于readyState會在下一章節(jié)詳細(xì)介紹。

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

第三步：配置和發(fā)送請求

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

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

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

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

post表單數(shù)據(jù)需要使用xmlhttprequest對象的setRequestHeader方法增加一個(gè)HTTP頭。

post 發(fā)送請求什么時(shí)候能夠使用呢？

(1)更新一個(gè)文件或者數(shù)據(jù)庫的時(shí)候。

(2)發(fā)送大量數(shù)據(jù)到服務(wù)器，因?yàn)閜ost請求沒有字符限制。

(3)發(fā)送用戶輸入的加密數(shù)據(jù)。

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

第四步：處理響應(yīng)數(shù)據(jù)

使用xmlhttprequest對象的responseText或responseXML屬性獲得服務(wù)器的響應(yīng)。

使用responseText屬性得到服務(wù)器響應(yīng)的字符串?dāng)?shù)據(jù)，使用responseXML屬性得到服務(wù)器響應(yīng)的XML數(shù)據(jù)。

在回調(diào)函數(shù)中使用readyState==4和status==200判斷交互是否結(jié)束，響應(yīng)是否正確，并根據(jù)需要獲取服務(wù)器端返回的數(shù)據(jù)，更新頁面內(nèi)容。

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

三、AJAX運(yùn)行過程中5種狀態(tài)（readyState）

在AJAX實(shí)際運(yùn)行當(dāng)中，對于訪問XMLHttpRequest（XHR）時(shí)并不是一次完成的，而是分別經(jīng)歷了多種狀態(tài)后取得的結(jié)果，對于這種狀態(tài)在AJAX中共有5種，這五種狀態(tài)是由AJAX引擎切換設(shè)置的，分別是。

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

1 ：調(diào)用send()方法，正在發(fā)送請求，請求發(fā)送完畢后，開始等待接收響應(yīng)

2 ：響應(yīng)接收完成

3 ：正在解析響應(yīng)內(nèi)容

4 ：響應(yīng)內(nèi)容解析完成，返回給客戶端調(diào)用

對于上面的狀態(tài)，其中“0”狀態(tài)是在定義后自動(dòng)具有的狀態(tài)值，而對于成功訪問的狀態(tài)（得到信息）我們大多數(shù)采用“4”進(jìn)行判斷。

值得注意的是，狀態(tài)每切換一次，都會觸發(fā)onreadystatechange 事件，所以整個(gè)過程onreadystatechange 事件被觸發(fā)5次

四、AJAX的優(yōu)缺點(diǎn)

優(yōu)點(diǎn)

1、最大的一點(diǎn)是頁面無刷新，在頁面內(nèi)與服務(wù)器通信，不需要打斷用戶的操作，具有更加迅速的響應(yīng)能力給用戶的體驗(yàn)非常好。

2、減輕服務(wù)器的負(fù)擔(dān)，ajax的原則是“按需取數(shù)據(jù)”，可以最大程度的減少冗余請求，和響應(yīng)對服務(wù)器造成的負(fù)擔(dān)。

缺點(diǎn)

1、ajax干掉了back按鈕，即對瀏覽器后退機(jī)制的破壞。

2、對搜索引擎的支持比較弱。

 以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持創(chuàng)新互聯(lián)！

標(biāo)題名稱：輕松理解JavaScript之AJAX
文章來源：http://muchs.cn/article40/ghepho.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、網(wǎng)站制作、商城網(wǎng)站、ChatGPT、全網(wǎng)營銷推廣、

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

網(wǎng)站建設(shè)網(wǎng)站維護(hù)公司