站長資訊網(wǎng)本篇文章給大家?guī)砹岁P(guān)于ajax進(jìn)行交互的相關(guān)知識，其中包括同步異步、回調(diào)函數(shù)、promise的使用等等相關(guān)問題，希望對大家有幫助。
同步和異步
同步: 指的就是事情要一件一件做。等做完前一件才能做后一件任務(wù)
異步: 不受當(dāng)前任務(wù)的影響，兩件事情同時進(jìn)行，做一件事情時，不影響另一件事情的進(jìn)行。
編程中：異步程序代碼執(zhí)行時不會阻塞其它程序代碼執(zhí)行,從而提升整體執(zhí)行效率。
ajax的概念
什么是ajax
1 Ajax: asynchronous javascript and xml (異步j(luò)s和xml)
2 是可以與服務(wù)器進(jìn)行(異步/同步)交互的技術(shù)之一。
ajax的語言載體是javascript。 最大特點(diǎn)：頁面不刷新 ajax的一些常見應(yīng)用,使網(wǎng)頁無刷新向web服務(wù)器發(fā)送請求數(shù)據(jù).
ajax出現(xiàn)的歷史
1999年，微軟公司發(fā)布IE5瀏覽器的時候嵌入的一種技術(shù)。起初名字是XMLHttp
直到2005年，google公司發(fā)布了一個郵箱產(chǎn)品gmail，內(nèi)部有使用ajax技術(shù)，該事情引起人們對ajax的注意，也使得一蹶不振的javascript語言從此被人們重視起來
ajax的使用
XMLHttpRequest對象
瀏覽器內(nèi)建對象，用于與服務(wù)器通信(交換數(shù)據(jù)) ， 由此我們便可實(shí)現(xiàn)對網(wǎng)頁的部分更新，而不是刷新整個頁面。這個請求是異步的，即在往服務(wù)器發(fā)送請求時，并不會阻礙程序的運(yùn)行，瀏覽器會繼續(xù)渲染后續(xù)的結(jié)構(gòu)。
ajax的運(yùn)行
一定要打開phpsudy,js文件與php文件在同一主機(jī)下,才能請求成功.
GET請求的創(chuàng)建
請求的創(chuàng)建與發(fā)送
主流瀏覽器(火狐、google、蘋果safari、opera,包括IE8以上的版本)的創(chuàng)建方式,也是現(xiàn)在主要使用的.
//1. 創(chuàng)建一個XMLHttpRequest對象var xhr = new XMLHttpRequest(); //2. 設(shè)置請求的類型,以及地址 // 第一個參數(shù):請求方式 get/post // 第二個參數(shù):請求的地址 需要在url后面拼上參數(shù)列表 // 第三個參數(shù)：默認(rèn)是異步xhr.open("get", "01.php?name=Jepson"，異步/同步); //3.發(fā)送請求到服務(wù)器xhr.send(null);
手冊位置
http://www.w3school.com.cn/ajax/ajax_xmlhttprequest_create.asp
GET的使用
例1:在頁面中添加一個按鈕,點(diǎn)擊一次向php后臺發(fā)送一個請求,php將一段文字寫入a.txt
<body> <input type="button" onclick="fn()" value="點(diǎn)擊發(fā)送ajax" /> <script> function fn(){ // 1 實(shí)例化對象 let xhr = new XMLHttpRequest(); // 2 設(shè)置請求的類型以及地址 xhr.open('get','./02.php'); // 3 發(fā)送請求,get請求則設(shè)置為空,post請求則設(shè)置參數(shù) xhr.send(); } </script></body>
php代碼如下
<?php$str = '越懶散,越懶!';$file = './a.txt';$f = fopen($file,'a'); fwrite($f,$str);?>
ajax狀態(tài)
通過監(jiān)控請求狀態(tài)，當(dāng)狀態(tài)等于4的時候才能接受數(shù)據(jù)
xhrObj.onreadystatechange – 監(jiān)聽readyState狀態(tài)，當(dāng)狀態(tài)發(fā)生改變可調(diào)用對應(yīng)函數(shù)處理
ajax五種狀態(tài)的作用
/*xhrObj.readyState – 返回當(dāng)前請求的狀態(tài)
xhr.readyState = 0時-未初始化,對象已建立,尚未調(diào)用open()
xhr.readyState = 1時-初始化,對象建立未調(diào)用send()
xhr.readyState = 2時-發(fā)送數(shù)據(jù),send()方法調(diào)用,但是當(dāng)前的狀態(tài)及http頭未知,請求未完成
xhr.readyState = 3時-數(shù)據(jù)傳輸中,接受部分?jǐn)?shù)據(jù)
xhr.readyState = 4時-響應(yīng)內(nèi)容解析完成
*/
例:獲取ajax請求過程的四種狀態(tài)
// 1 實(shí)例化對象 let xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ // 4 使用回調(diào)函數(shù)檢測當(dāng)前的狀態(tài) console.log(xhr.readyState); // 獲取服務(wù)器狀態(tài)碼 console.log(xhr.status) // 接受服務(wù)器返回數(shù)據(jù) console.log(xhr.responseText); } // 2 創(chuàng)建請求 xhr.open('get','http://localhost/web/index.php'); // 3 發(fā)送請求 xhr.send();
返回服務(wù)器狀態(tài)碼 xhr.status
1**：請求收到，繼續(xù)處理
2**：操作成功收到，分析、接受
3**：完成此請求必須進(jìn)一步處理
4**：請求包含一個錯誤語法或不能完成
5**：服務(wù)器執(zhí)行一個完全有效請求失敗
100——客戶必須繼續(xù)發(fā)出請求 101——客戶要求服務(wù)器根據(jù)請求轉(zhuǎn)換HTTP協(xié)議版本 200——客戶端請求成功 201——提示知道新文件的URL 202——接受和處理、但處理未完成 203——返回信息不確定或不完整 204——請求收到，但返回信息為空 205——服務(wù)器完成了請求，用戶代理必須復(fù)位當(dāng)前已經(jīng)瀏覽過的文件 206——服務(wù)器已經(jīng)完成了部分用戶的GET請求 300——請求的資源可在多處得到 301——刪除請求數(shù)據(jù) 302——在其他地址發(fā)現(xiàn)了請求數(shù)據(jù) 303——建議客戶訪問其他URL或訪問方式 304——客戶端已經(jīng)執(zhí)行了GET，但文件未變化 305——請求的資源必須從服務(wù)器指定的地址得到 306——前一版本HTTP中使用的代碼，現(xiàn)行版本中不再使用 307——申明請求的資源臨時性刪除 400——錯誤請求，如語法錯誤 401——請求授權(quán)失敗 402——保留有效ChargeTo頭響應(yīng) 403——請求不允許 404——沒有發(fā)現(xiàn)文件、查詢或URl 405——用戶在Request-Line字段定義的方法不允許 406——根據(jù)用戶發(fā)送的Accept拖，請求資源不可訪問 407——類似401，用戶必須首先在代理服務(wù)器上得到授權(quán) 408——客戶端沒有在用戶指定的餓時間內(nèi)完成請求 409——對當(dāng)前資源狀態(tài)，請求不能完成 410——服務(wù)器上不再有此資源且無進(jìn)一步的參考地址 411——服務(wù)器拒絕用戶定義的Content-Length屬性請求 412——一個或多個請求頭字段在當(dāng)前請求中錯誤 413——請求的資源大于服務(wù)器允許的大小 414——請求的資源URL長于服務(wù)器允許的長度 415——請求資源不支持請求項(xiàng)目格式 416——請求中包含Range請求頭字段，在當(dāng)前請求資源范圍內(nèi)沒有range指示值，請求也不包含If-Range請求頭字段 417——服務(wù)器不滿足請求Expect頭字段指定的期望值，如果是代理服務(wù)器，可能是下一級服務(wù)器不能滿足請求 500——服務(wù)器產(chǎn)生內(nèi)部錯誤 501——服務(wù)器不支持請求的函數(shù) 502——服務(wù)器暫時不可用，有時是為了防止發(fā)生系統(tǒng)過載 503——服務(wù)器過載或暫停維修 504——關(guān)口過載，服務(wù)器使用另一個關(guān)口或服務(wù)來響應(yīng)用戶，等待時間設(shè)定值較長 505——服務(wù)器不支持或拒絕支請求頭中指定的HTTP版本
服務(wù)器響應(yīng)值接收
如需獲得來自服務(wù)器的響應(yīng)，請使用 XMLHttpRequest 對象的 responseText 或 responseXML 屬性。
| 屬性 | 描述 |
|---|---|
| response | 獲得字符串形式的響應(yīng)數(shù)據(jù)。 |
| responseXML | 獲得 XML 形式的響應(yīng)數(shù)據(jù)(知道)。 |
接受服務(wù)器返回值
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> </head> <script type="text/javascript"> function f1(){ //創(chuàng)建ajax對象 var xhr = new XMLHttpRequest(); //設(shè)置請求的地址 xhr.open('get','./reponse.php'); //發(fā)送請求,如果是get請求則參數(shù)設(shè)置為null xhr.send(); //顯示ajax的狀態(tài) /* ajax的四中狀態(tài) 0 對象已創(chuàng)建,請求連接未初始化(尚未調(diào)用open方法) 1 請求連接已經(jīng)已經(jīng)建立沒有調(diào)用send方法 2 請求連接已建立,調(diào)用send方法 3 數(shù)據(jù)已經(jīng)開始傳輸?shù)形赐瓿? 4 數(shù)據(jù)傳輸已經(jīng)完成,請求已經(jīng)完成 */ // onreadystatechange 當(dāng)請求的狀態(tài)發(fā)生改變時,就會觸發(fā) xhr.onreadystatechange=function(){ //顯示五種狀態(tài) //console.log(xhr.readyState); //判斷當(dāng)?shù)恼埱鬆顟B(tài)等于4時,代表數(shù)據(jù)傳輸完成 if(xhr.readyState==4 && xhr.status==200){ //使用responseText接受服務(wù)器端傳遞的數(shù)據(jù) //alert(xhr.responseText); //追加顯示到頁面中 document.body.innerHTML+=xhr.responseText; } } //alert(xhr.responseText); } </script> <body> <input type="button" name="" value="點(diǎn)我發(fā)送請求" onclick="f1();"> </body></html>
服務(wù)器代碼
<?php$a = '1234';echo $a;?>
總結(jié):
1 創(chuàng)建對象let xhr = new XMLHttpRequest();2 設(shè)置請求 xhr.open(get,請求地址)3 發(fā)送請求 xhr.send()4 判斷狀態(tài)接收返回值 xhr.onreadystatechange = funtion(){ if(xhr.readyState==4 && xhr.status==200){// 接受返回值let str = xhr.response }}
get和post的區(qū)別
1 get是地址欄的方式訪問的,是可見的
2 get方式傳遞數(shù)據(jù)量比較小.安全性低.
3 post以非地址欄的形式訪問,能夠安全且大量的穿遞數(shù)據(jù)
常見post使用
表單中使用, ajax中使用
POST方式
請求步驟
-
創(chuàng)建Ajax對象。
-
設(shè)置回調(diào)函數(shù)。接收后臺返回的結(jié)果
-
設(shè)置請求
-
設(shè)置請求頭信息“Content-type,application/x-www-form-urlencoded”
-
發(fā)送請求。
實(shí)現(xiàn)請求
setRequestHeader() 設(shè)置請求頭信息
application/x-www-form-urlencoded 設(shè)置傳遞參數(shù)時,使用的編碼格式(默認(rèn))
例:以post的方式傳遞數(shù)據(jù)
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> </head> <script type="text/javascript"> function f1(){ //實(shí)例化ajax對象 var xhr = new XMLHttpRequest(); //設(shè)置請求的參數(shù),設(shè)置以post方式發(fā)送請求 xhr.open('post','./post.php'); //如果需要像 HTML 表單那樣 POST 數(shù)據(jù),以&形式傳輸數(shù)據(jù) xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded'); //構(gòu)造傳遞的參數(shù),形式與get傳參的方式一致 var data = 'name=張三&age=19'; //發(fā)送請求 xhr.send(data); //接受返回的信息 xhr.onreadystatechange=function(){ //驗(yàn)證當(dāng)前的裝態(tài)接受返回的信息 if(xhr.readyState==4){ //接受服務(wù)器返回的信 var info = xhr.responseText; alert(info); } } } </script> <body> <input type="button" name="" value="post請求" onclick="f1();"> </body></html>
同步和異步請求
異步：不等待ajax請求響應(yīng)完畢，直接執(zhí)行下面的代碼
同步：等待ajax請求響應(yīng)完畢后，再執(zhí)行下面的代碼
ajax的異步
異步示意圖
ajax的同步
同步請求
驗(yàn)證同步與異步
js代碼
<body> <input type="button" onclick="fn()" value="點(diǎn)擊發(fā)送ajax" /> <script> function fn(){ // 1 實(shí)例化對象 let xhr = new XMLHttpRequest(); // 獲取ajax的四種狀態(tài) xhr.onreadystatechange = function(state){ // console.log(xhr.readyState); //alert(xhr.responseText) if(xhr.readyState==4){ console.log(xhr.response) } } // 2 設(shè)置請求的類型以及地址,第三個參數(shù)設(shè)置為false,表示同步,設(shè)置為true表示異步(默認(rèn)) xhr.open('get','http://localhost/demo.php',false); // 3 發(fā)送請求,get請求則設(shè)置為空,post請求則設(shè)置參數(shù) xhr.send(); // 驗(yàn)證同步必須寫的 console.log(11111); } // console.log(eval('{}')); // console.log(eval('({})')); </script>
PHP代碼
<?php$str = '越懶散,越懶!';$file = './a.txt';$f = fopen($file,'a'); fwrite($f,$str); // 讓代碼沉睡十秒之后,再向下執(zhí)行 sleep(10); echo '這是輸出的內(nèi)容';?>
測試同步請求時,獲取返回結(jié)果的responseText一定要放在send()之前
服務(wù)返回數(shù)據(jù)格式處理
類型
Text（又稱HTML格式）
XML格式
JSON格式
Text類型處理
<script type="text/javascript"> var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ if(xhr.readyState==4){ //接受返回的消息 var info =xhr.responseText; alert(info); } } xhr.open('get','./geshi.php'); xhr.send(null); </script>[php代碼]echo '<h2>完了,就要完了!</h2>';
json數(shù)據(jù)的處理
使用JOSN.parse()將PHP輸出的json字符串轉(zhuǎn)化為對象
<script type="text/javascript"> var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ if(xhr.readyState==4){ //接受返回的消息, var info =xhr.responseText; //將json數(shù)組轉(zhuǎn)化為js對象 var str = JSON.parse(info); console.log(str); } } xhr.open('get','./geshi.php'); xhr.send(null);</script>[PHP代碼]echo json_encode(array("name"=>'張三',"age"=>'12'));
xml數(shù)據(jù)的處理
<script type="text/javascript"> var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ if(xhr.readyState==4){ //接受返回的消息,使用responseXML接受 var info =xhr.responseXML; var msg=info.getElementsByTagName('msg')[0].innerHTML; console.log(msg); } } xhr.open('get','./geshi.php'); xhr.send(null);</script>[PHP代碼]<?phpheader('content-type:text/xml;charset=utf-8');echo '<?xml version="1.0" encoding="utf-8" ?> <response> <status>1</status> <msg>返回的的消息</msg> </response>';
回調(diào)函數(shù)的嵌套
概念
回調(diào)函數(shù)是一個作為變量傳遞給另外一個函數(shù)的函數(shù)，它在主體函數(shù)執(zhí)行完之后執(zhí)行。
正常的代碼都是鏈?zhǔn)讲僮?某一步執(zhí)行出問題,則向下停止,而回調(diào)則不然.
常見的典型異步回調(diào)
setTimeout(function(){ console.log('1s之后做的事情'); setTimeout(function(){ console.log('2s之后做的事情'); setTimeout(function(){ console.log('3s之后做的事情'); },1000); },1000); },1000);
在回調(diào)函數(shù)中嵌套,就是上一個函數(shù)執(zhí)行完成,再執(zhí)行下一個
promise使用
在JavaScript的世界中，所有代碼都是單線程執(zhí)行的。由于這個“缺陷”，導(dǎo)致JavaScript的所有網(wǎng)絡(luò)操作，瀏覽器事件，都必須是異步執(zhí)行。異步執(zhí)行可以用回調(diào)函數(shù)實(shí)現(xiàn).
Promise使ES6中引入的一個異步編程解決方案，與傳統(tǒng)的ES5方法相比它的結(jié)構(gòu)更合理，功能更強(qiáng)大.
特點(diǎn)
Promise對象代表一個異步操作，有三種狀態(tài)：pending（進(jìn)行中）、fulfilled（已成功）和rejected（已失?。?。只有異步操作的結(jié)果，可以決定當(dāng)前是哪一種狀態(tài)，任何其他操作都無法改變這個狀態(tài).
語法:
var p = new Promise(function(resolve,reject){}) resolve 代表 決定(成功); reject 代表 失敗
使用
基本使用
const p = new Promise(function(resolve,reject){ setTimeout(function(){ // resolve('我是成功的') reject('這是失敗的'); },2000) });
.then(callback)的使用(成功時調(diào)用)
.catch(callback的用法(失敗時調(diào)用)
p.then(function(data){ console.log('resolved成功回調(diào)'); console.log('成功回調(diào)接受的值：',data); }).catch(function(reason, data){ console.log('catch到rejected失敗回調(diào)'); console.log('catch失敗執(zhí)行回調(diào)拋出失敗原因：',reason); }); 效果和寫在then的第二個參數(shù)里面一樣。它將大于10的情況下的失敗回調(diào)的原因輸出
注意:resolve和reject的兩種狀態(tài)
resolve作用是，將Promise對象的狀態(tài)從“未完成”變?yōu)椤俺晒Α保磸?pending 變?yōu)?resolved），在異步操作成功時調(diào)用，并將異步操作的結(jié)果，作為參數(shù)傳遞出去；
reject作用是，將Promise對象的狀態(tài)從“未完成”變?yōu)椤笆 保磸?pending 變?yōu)?rejected），在異步操作失敗時調(diào)用，并將異步操作報出的錯誤，作為參數(shù)傳遞出去。
promise改造ajax依賴調(diào)用
使用promise檢測ajax的請求狀態(tài)，利用promise的成功狀態(tài)函數(shù)，返回ajax請求到的數(shù)據(jù)
第一步,將ajax進(jìn)行封裝
const ajaxParam=param=>{ return new Promise(function(resolve,reject){ let xhr = new XMLHttpRequest(); xhr.open('get',param.url); // 默認(rèn)是true,表示異步 xhr.send(); xhr.onreadystatechange = function(){ if(xhr.readyState==4 ){ if(xhr.status==200){ resolve(xhr.responseText) }else{ reject(xhr.responseText) } } } }); }
第二步:使用then和catch獲取結(jié)果,
ajaxPromise({type:'get',url:'http//:www.baidu.com',data:null}).then(function(data){ }).catch(function(data){ });
擴(kuò)展:
Promise.all()
所有的異步請求完成才執(zhí)行的方法.
Promse.all在處理多個異步處理時非常有用，比如說一個頁面上需要等兩個或多個ajax的數(shù)據(jù)回來以后才正常顯示，在此之前只顯示loading圖標(biāo)。
let wake = (time) => { return new Promise((resolve, reject) => { setTimeout(() => { resolve(`${time / 1000}秒后醒來`) }, time) })}let p1 = wake(3000);let p2 = wake(2000);Promise.all([p1, p2]).then((result) => { console.log(result) // [ '3秒后醒來', '2秒后醒來' ]}).catch((error) => { console.log(error)})只有兩次調(diào)用promise都執(zhí)行完畢,才會執(zhí)行all
Promise.race()
Promse.race就是賽跑的意思，意思就是說，Promise.race([p1, p2, p3])里面哪個結(jié)果獲得的快，就返回那個結(jié)果，不管結(jié)果本身是成功狀態(tài)還是失敗狀態(tài)。
let p1 = new Promise((resolve, reject) => { setTimeout(() => { resolve('success') },1000)})let p2 = new Promise((resolve, reject) => { setTimeout(() => { reject('failed') }, 500)})Promise.race([p1, p2]).then((result) => { console.log(result)}).catch((error) => { console.log(error) // 打開的是 'failed'})
【相關(guān)教程推薦：AJAX視頻教程】
