Ajax的概述與實現(xiàn)過程
一、ajax概述
1、Ajax是Asynchronous([ə'sɪŋkrənəs) JavaScript XML的簡寫,不是一門新技術(shù),而是對現(xiàn)有技術(shù)的綜合利用。這一技術(shù)能夠向服務器請求額外數(shù)據(jù)而無需刷新頁面,帶來了更好的用戶體驗
2、Ajax技術(shù)的核心是XMLHttpRequest對象(簡稱XHR),這是由微軟首先引入的一個特性。在XHR出現(xiàn)之前,Ajax式的通信必須借助一些hack手段來實現(xiàn),大多數(shù)是使用隱藏的框架或內(nèi)嵌框架。
3、XHR為向服務器發(fā)送請求和解析服務器響應提供了流暢的接口。能夠以異步的方式從服務器取得更多的信息,意味著用戶單擊后,可以不必刷新頁面也能獲取新數(shù)據(jù)。也就是說可以使用XHR對象取得新數(shù)據(jù),然后再通過DOM將新數(shù)據(jù)插入到頁面中
4、雖然Ajax名字中有XML的成分,但是呢,Ajax通信與數(shù)據(jù)格式無關(guān),這種技術(shù)就是無須刷新頁面即可從服務器取得數(shù)據(jù),但不一定是XML數(shù)據(jù)
二、操作:原生ajax和jQuery中封裝的ajax
1、原生ajax:
ajax作用:發(fā)送請求(設置請求setRequest) 接收響應(getResponse)
A、ajax原生方式發(fā)送請求:
Ajax中最重要也是最固定的部分就是http請求。
1)建立連接:(IE7及以上版本都支持XMLHttpRequest)
var xhr = new XMLHttpRequest(); //創(chuàng)建異步請求對象
2)Get請求:格式必須是(url?name1=value1&name2=value2)
xhr.open("get","01-register.php?name="+name);//初始化異步get請求 xhr.send(null); //與服務器建立連接
3)Post請求
xhr.open('post','01-XMLHTTPRequest-test.php');//請求報文行 xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); /*post請求設置請求頭*/ xhr.send('name=rose&age=20'); //請求報文體
4)get和post請求的區(qū)別:
★get不需要設置請求頭,而post需要設置請求頭
★get的數(shù)據(jù)傳遞通過url進行,而post的數(shù)據(jù)在send方法中傳遞
B、ajax原生方式接收響應:
/*監(jiān)聽服務器的響應*/ xhr.onreadystatechange=function(){ /*判斷當前的響應是否成功 1.服務器做出了響應 2.響應的結(jié)果是正確的*/ if(xhr.status==200 && xhr.readyState==4){ var result=xhr.responseText; console.log(result); //輸出從服務器中獲取到的數(shù)據(jù) //接下來就可以對數(shù)據(jù)進行相應的處理了 } };
C、處理響應數(shù)據(jù):
/*監(jiān)聽*/ xhr.onreadystatechange=function(){ if(xhr.status==200 && xhr.readyState==4){ /*判斷狀態(tài)*/ var result; /*獲取響應報文中的Content-Type*/ var ct=xhr.getResponseHeader("Content-Type"); /*判斷Content-Type,進行數(shù)據(jù)的解析*/ if(ct.indexOf("xml") != -1){ result=xhr.responseXML; } else if(ct.indexOf("json") !=-1){ result=JSON.parse(xhr.responseText); } else{ result=xhr.responseText; } /*調(diào)用回調(diào)函數(shù)--委托--代理*/ success && success(result); } };
jQuery中封裝的ajax
$.ajax({ type: 請求方式(get/post), url: "register.php", data: 發(fā)送請求數(shù)據(jù), beforeSend:function(){返回false可以取消本次ajax請求}, success:function(result){ 成功響應后調(diào)用 }, error:function(err){ 錯誤響應時調(diào)用 }, complete:function(){ 響應完成時調(diào)用(包括成功和失敗) } });
jQuery中提供了專門的方法來序列化表單:
$('form').serialize(): //序列化表單(即格式化key=val & key=val);
三、響應
我們需要監(jiān)聽服務器的響應狀態(tài),然后對從服務器中獲取的數(shù)據(jù)做相應的處理。
1) onreadystatechange是JavaScript事件中的一種,用于監(jiān)聽XMLHttpRequest的狀態(tài)
2) readystate:響應狀態(tài),返回XMLHTTP請求的當前狀態(tài)
readyState 狀態(tài) |
狀態(tài)說明 |
(0)未初始化 |
此階段確認XMLHttpRequest對象是否創(chuàng)建,并為調(diào)用open()方法進行未初始化作好準備。值為0表示對象已經(jīng)存在,否則瀏覽器會報錯--對象不存在。 |
(1)載入 |
此階段對XMLHttpRequest對象進行初始化,即調(diào)用open()方法,根據(jù)參數(shù)(method,url,true)完成對象狀態(tài)的設置。并調(diào)用send()方法開始向服務端發(fā)送請求。值為1表示正在向服務端發(fā)送請求。 |
(2)載入完成 |
此階段接收服務器端的響應數(shù)據(jù)。但獲得的還只是服務端響應的原始數(shù)據(jù),并不能直接在客戶端使用。值為2表示已經(jīng)接收完全部響應數(shù)據(jù)。并為下一階段對數(shù)據(jù)解析作好準備。 |
(3)交互 |
此階段解析接收到的服務器端響應數(shù)據(jù)。即根據(jù)服務器端響應頭部返回的MIME類型把數(shù)據(jù)轉(zhuǎn)換成能通過responseBody、responseText或responseXML屬性存取的格式,為在客戶端調(diào)用作好準備。狀態(tài)3表示正在解析數(shù)據(jù)。 |
(4)完成 |
此階段確認全部數(shù)據(jù)都已經(jīng)解析為客戶端可用的格式,解析已經(jīng)完成。值為4表示數(shù)據(jù)解析完畢,可以通過XMLHttpRequest對象的相應屬性取得數(shù)據(jù)。 |
3) status:服務器的響應碼
常見響應碼:200—服務器成功返回網(wǎng)頁
404—請求網(wǎng)頁不存在
503—服務不可用
關(guān)于服務器響應碼,詳情請看————網(wǎng)絡傳輸協(xié)議(http協(xié)議)
以上就是本文的內(nèi)容,有需要的可以看下,希望對大家有所幫助。謝謝對腳本之家的支持!
- Ajax的使用代碼解析
- PHP AjaxForm提交圖片上傳并顯示圖片源碼
- JS 攔截全局ajax請求實例解析
- Ajax遍歷jSon后對每一條數(shù)據(jù)進行相應的修改和刪除(代碼分享)
- AJAX工作原理及優(yōu)缺點詳解
- AngularJS實現(xiàn)ajax請求的方法
- 使用Ajax生成的Excel文件并下載的實例
- AJAX請求隊列實現(xiàn)
- Ajax讀取txt并對txt內(nèi)容進行分頁顯示功能
- 在Thinkphp中使用ajax實現(xiàn)無刷新分頁的方法
- jstree創(chuàng)建無限分級樹的方法【基于ajax動態(tài)創(chuàng)建子節(jié)點】
- JavaScript將base64圖片轉(zhuǎn)換成formData并通過AJAX提交的實現(xiàn)方法
- jQuery插件ajaxFileUpload異步上傳文件
- 淺析Ajax語法
相關(guān)文章
javascript學習筆記(十九) 節(jié)點的操作實現(xiàn)代碼
javascript學習筆記之節(jié)點的操作實現(xiàn)代碼,包括節(jié)點的創(chuàng)建、添加、移除、替換、復制2012-06-06javascript Function函數(shù)理解與實戰(zhàn)
小編給大家?guī)硪黄P(guān)于javascript的基礎教學內(nèi)容,關(guān)于Function函數(shù)的訓練與理解,一起學習下吧。2017-12-12ASP小貼士/ASP Tips javascript tips可以當桌面
今天看到《ASP小貼士/ASP Tips》 我也去把JavaScript的tips 下下來了。 看看是A4的。 自己把他改成1024 * 768 剛好可以用來做桌面2009-12-12