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