Unit01： AJAX 、 AJAX的使用
【Ajax】
同步交互與異步交互
同步交互：客戶端向服務(wù)器端發(fā)送請求，服務(wù)器響應(yīng)的過程中，用戶 不能 做 任何 事情；
異步交互：客戶端向服務(wù)器端發(fā)送請求，服務(wù)器響應(yīng)的過程中，用戶 可以 做 其他 事情；
?
AJAX : Asynchronous JavaScript and xml;
?????? (不嚴(yán)格定義)客戶端與服務(wù)器端進(jìn)行交互，無需刷新當(dāng)前壓面；
?????? AJAX實現(xiàn)的是 B/S 下的異步交互；
?
實現(xiàn)異步交互的技術(shù)：
?????? <iframe src="" />
?????? 百度地圖
?
同步 VS 異步
同步：
?????? 執(zhí)行速度相對慢
?????? 響應(yīng)的是完整的HTML頁面
異步：
?????? 執(zhí)行速度相對快
?????? 響應(yīng)部分?jǐn)?shù)據(jù)
?
?
AJAX具有一個核心對象：
?????? XMLHttpRequest對象；集成在瀏覽器中，
?????? 創(chuàng)建XMLHttpRequest對象：
?????? function getXHR(){
????????????? var xhr=null;
????????????? if(window.XMLHttpRequest){
???????????????????? xhr=new XMLHttpRequest();
????????????? }else{
???????????????????? xhr=new ActiveXObject('Microsoft.XMLHttp');
????????????? }
????????????? return xhr;
?????? }
?????? var xhr=getXHR();
?
AJAX的核心對象：
??? 屬性：
?????? readyState????? 監(jiān)聽服務(wù)器當(dāng)前的通信狀態(tài)
?????? status???????????? 判斷服務(wù)器端狀態(tài)碼
?????? responseText?? 接受服務(wù)器數(shù)據(jù)
??? 方法：
?????? open(method,url,async)? 與服務(wù)器建立連接
??????????????????????????? ?- async 設(shè)置是否異步
?????? send()?????????????????? 向服務(wù)器發(fā)送請求
??? 事件：
?????? onreadystatechange
?
實現(xiàn)ajax異步交互步驟：
?????? 1.創(chuàng)建XMLHttpRequest對象
?????? 2.與服務(wù)器端建立連接；open(method,url,async);
????????????? async:設(shè)置是否異步，默認(rèn)true，異步；
????????????? 官方認(rèn)為XMLHttpRequest對象就是為了實現(xiàn)異步操作的；寫false會出錯；
?????? 3.向服務(wù)器端發(fā)送請求：send("請求參數(shù)")
????????????? 請求參數(shù)格式：key=value；
????????????? 如果請求的是get方式：send不起作用，但不能省略；send(null );
?????? 4.客戶端接受服務(wù)器端的響應(yīng)：
????????????? onreadystatechange事件- 監(jiān)聽服務(wù)器
?
????????????? readyState屬性：得到服務(wù)器當(dāng)前的通信狀態(tài)；
????????????? 0 服務(wù)器端尚未初始化
????????????? 1 客戶端正在發(fā)送請求，服務(wù)器正在接受請求
????????????? 2 客戶端請求完成，服務(wù)器接受完成；
????????????? 3 請求成功，客戶端正在接受服務(wù)器的數(shù)據(jù)，正在響應(yīng)
????????????? 4 響應(yīng)完成，
?
????????????? 使用status屬性，判斷服務(wù)器端狀態(tài)碼(200)
?
????????????? responseText屬性
????????????? 接受服務(wù)器數(shù)據(jù) 格式（html）
?
GET與POST的區(qū)別
GET請求類型：
?????? send()方法不起作用，但不能神省略；
?????? xhr.send(null)
?????? 請求參數(shù)添加到 url?key=value;
POST請求類型：
?????? send()方法起作用,但必須要在send()之前，使用setRequestHeader()方法設(shè)置請求頭；
?????? xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
?
另外一種實現(xiàn)ajax異步交互步驟：
?????? 1.創(chuàng)建XMLHttpRequest對象
?????? 2.注冊監(jiān)聽；- onreadystatechange事件；
?????? 3.與服務(wù)器端建立連接；open(method,url,async);
?????? 4.向服務(wù)器端發(fā)送請求：send("請求參數(shù)")
?
實現(xiàn)ajax異步交互的6步：
?????? 1.創(chuàng)建XMLHttpRequest對象
?????? 2.建立連接
?????? 3.發(fā)送請求
?????? 4.注冊監(jiān)聽
?????? ? 5.獲取服務(wù)器當(dāng)前的通信狀態(tài)
?????? ? 6.判斷服務(wù)器端狀態(tài)碼(200)
?
轉(zhuǎn)載于:https://www.cnblogs.com/mbyund/p/6406477.html
總結(jié)
以上是生活随笔為你收集整理的Unit01： AJAX 、 AJAX的使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
