Ajax詳解

小編:啊南 25閱讀 2020.12.21

===》Ajax詳解《===

Ajax特性

1

1、Ajax是什么?

Asynchronous javascript and xml :異步的JS和XML

2

2、異步交互和同步交互

同步

--->發一個請求,就要等待服務器的響應結束。然后才能發第二個請求!中間這段時間就是一個字“卡”

--->刷新的是整個頁面??!

異步

--->發一個請求后,無需等待服務器的響應,然后就可以發第二個請求!

--->可以使用JS結束服務器的響應,然后使用JS來局部來機新

3

3、Ajax常見應用場景

百度搜索框

用戶注冊時(用戶名是否已被注冊)

4

4、Ajax的優缺點

優點

--->異步交互;增強了用戶的體驗!

--->性能:因為服務器無需再響應整個頁面,只需要響應部分內容,所以服務器的壓力減輕了

缺點:

Ajax不能應用在所有場景!

Ajax無端的增多了對服務器的訪問次數,給服務器到來了壓力!

Ajax發送異步請求(四步操作)

1

* Ajax其實只需學習一個對象:XMLHttpRequest,如果掌握了他,就掌握了Ajax??!

* 得到XMLHttpRequest

大多數瀏覽器都支持:var xmlHttp=new XMLHttpRequest();

IE6.0:var xmlHttp =new ActiveXObject("Microsoft.XMLHTTP");

編寫創建XMLHttpRequest對象的函數

functioncreateXMLHttpRequest(){

try{

return newXMLHttpRequest();

}catch(e){

try{

return newActiveXObject("Msxml2.XMLHTT P");

}catch(e){

try{

return newActiveXObject("Microsoft.XMLHTT P");

}catch(e){

alert(哥兒們,你用的是什么瀏覽 器???);

throw e;

}

}

}

}

2

服務器連接

---xmlHttp.open();用來打開與服務器的連接,它需要三個參數:

》請求方式:可以是GET或POST

》請求的URL:制定服務器端資源,例如:/day1/AServlet

》請求是否為異步:如果為true表示發送異步請求,否則為同步請求!

---xmlHttp.open("GET","/day1/AServlet",true);

3

發送請求

---xmlHttp。send(null);如果不給可能會造成部分瀏覽器無法發送!

》 參數:就是請求體內容!如果是GET請求,必須給出null。

4

---在xmlHttp對象的一個事件上注冊監聽器:onreadystatechange

---xmlHttp對象一共有5個狀態:

》0狀態:剛創建,還沒有調用open方法;

》1狀態:請求開始:調用了open方法,但還沒有調用send()方法

》2狀態:調用玩了send()方法;

》3狀態:服務器已經開始響應,但不表示響應結束!

》4狀態:服務器響應結束?。ㄍǔN覀冎魂P心這個狀態)

---得到xmlHttp對象的狀態:

》var state=xmlHttp.readState;//可能是0、1、2、3、4

---得到服務器響應的狀態碼

》var status=xmlHttp.status;//例如200、404、500

---得到服務器響應的內容

》var content =xmlHttp.responseText;//得到服務器的響應的文本格式的內容

》var content =xmlHttp.responseXML;//得到服務器的響應的XML響應的內容,它是Document對象了!

xmlHttp.onreadystatechange=function(){//xmlHttp的5種狀態都會調用本方法

if(xmlHttp.readyState==4 && xmlHttp.status==200){//雙重判斷:判斷是否為4狀態,而且還要判斷是否為200

//獲取服務器的響應內容

var text =xmlHttp.responseText;

}

};

第二例:發送POST請求(如果發送請求時需要帶有參數,一般都用POST請求)

* open:xmlHttp.open("POST" ....);

* 添加一步:設置Content-Type請求頭:

> xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

* send:xmlHttp.send("username=zhangSan&password=123");//發送請求時指定請求體

第三例:注冊表單之校驗用戶是否注冊!

1

編寫頁面:

* ajax3.jsp

> 給出注冊表單頁面

> 給用戶名文本框添加onblur事件的監聽

> 獲取文本框的內容,通過ajax4步發送給服務器,得到響應結果

* 如果為1:在文本框后顯示“用戶名已被注冊”

* 如果為0:什么都不做!

2

2編寫Servlet

* ValidateUsernameServlet

> 獲取客戶端傳遞的用戶名參數

> 判斷是否為itcast

* 是:返回1

* 否:返回0

第四例:響應內容為xml數據

* 服務器端:

> 設置響應頭:ContentType,其值為:text/xml;charset=utf-8

* 客戶端:

> var doc = xmlHttp.responseXML;//得到的是Document對象!

第五例:省市聯動

1

1. 頁面

===請選擇省份===

===請選擇城市===

2

2. ProvinceServlet

* ProvinceServlet:當頁面加載完畢后馬上請求這個Servlet!

> 它需要加載china.xml文件,把所有的省的名稱使用字符串發送給客戶端!

3

3. 頁面的工作

* 獲取這個字符串,使用逗號分隔,得到數組

* 循環遍歷每個字符串(省份的名稱),使用每個字符串創建一個元素添加到這個元素中

4

4. CityServlet

* CityServlet:當頁面選擇某個省時,發送請求!

* 得到省份的名稱,加載china.xml文件,查詢出該省份對應的元素對象!,把這個元素轉換成xml字符串,發送給客戶端

5

5. 頁面的工作

* 把中的所有子元素刪除,但不要刪除===請選擇城市===

* 得到服務器的響應結果:doc?。?!

* 獲取所有的子元素,循環遍歷,得到的內容

* 使用每個的內容創建一個元素,添加到

關聯標簽:
欧美日韩在线精品视频二区_日本高清在线精品一区_天天看片天天av免费观看