Ajax常用方法

harriszh 發(fā)布于2019-08-20 18:10 / 685人閱讀

摘要：在之前，是通過庫中的對象實現(xiàn)的，后我們可以直接使用創(chuàng)建一個對象，創(chuàng)建好之后，我們就可以通過對象來調(diào)用相應的方法了。

Ajax的主要作用

Ajax的主要作用是向服務器請求數(shù)據(jù)的同時無需卸載頁面，也就是局部刷新，可以帶來了更好的用戶體驗，同時ajax也有他的不足，比如破壞了瀏覽器的前進后退按鈕，對搜索引擎的支持不足，開發(fā)和調(diào)試工具缺乏

javascript中的Ajax

在javascript中，ajax是通過XMLHttpRequest對象來實現(xiàn)的，這個對象用于和后臺進行數(shù)據(jù)的交互。在ie7之前，XHR是通過MSXML庫中的ActiveX對象實現(xiàn)的，ie7后我們可以直接使用 var xhr = new XMLHttpRequest();創(chuàng)建一個XHR對象，創(chuàng)建好之后，我們就可以通過xhr對象來調(diào)用相應的方法了。

javascript中Ajax的使用方法

在javascript中，調(diào)用Ajax主要分為兩步，先open，再send
open指的是開啟一個請求，而send負責發(fā)送這個請求

open()方法

xhr.open("type","url",true);

第一個參數(shù)是請求類型，get/post
第二個參數(shù)是請求的地址
第三個參數(shù)表示請求是同步還是異步，true代表異步處理
注意的一點就是，open方法不會發(fā)送請求，只是啟動一個請求準備發(fā)送

send()方法

xhr.send(null);

send方法將請求送給服務器 send方法接受一個參數(shù)作為要發(fā)送的數(shù)據(jù)，如果不需要發(fā)送數(shù)據(jù)，參數(shù)設為null

檢測響應狀態(tài)碼
一般請求發(fā)送之后，我們可以根據(jù)xhr的status屬性來判斷下一步的操作，status屬性會返回一個http狀態(tài)碼
100-200表示請求已經(jīng)接受，需要繼續(xù)處理
200-300表示請求已被服務器成功接收
300-400表示重定向，需要客戶端采取進一步操作
400-500表示客戶端發(fā)生錯誤，妨礙了服務器的處理
500-600表示服務器處理請求的過程發(fā)生錯誤

`if((xhr.status>=200&&xhr.status<300)||xhr.status==304){    
   console.log(“request success”);
   }else{
       console.log(“request failed”);    
   } `

檢測 readyStatus屬性
發(fā)送異步請求的時候，一般要檢測xhr的readyState屬性，這個屬性表示請求過程的當前活動階段，一共有5個值，0,1,2,3,4
0代表為初始化，open()未調(diào)用
1代表啟動已調(diào)用open，未調(diào)用send
2代表已經(jīng)調(diào)用send, 但還沒有接受到響應
3代表接受到部分響應數(shù)據(jù)
4代表接受到全部響應數(shù)據(jù)
當readyState的值發(fā)生變化時，就會觸發(fā)一次readystatechange事件，用這個事件檢測每次狀態(tài)變化后的值。

    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(){ 
        if(xhr.readyState == 4){            
            if((xhr.status>=200&&xhr.status<300)||xhr.status==304){    
                console.log("request success");
            }else{
                console.log("request failed");    
            }
        }    
    } 
    xhr.open("get","test.php",true);        
    xhr.send(null);

get請求和post請求

get請求，常用于向服務器查詢某些信息，get可將查詢的字符串參數(shù)加在url的末尾

   xhr.open("get","test.phpname1=value1&name2=value2",true);

post請求，通常用于向服務器發(fā)送應該被保存的數(shù)據(jù)，post請求的主體可以包含格式不限且大量的數(shù)據(jù)，

 xhr.open("post","test.php",true);
 xhr.send("name1=value1&name2=value2");

get請求和post請求的區(qū)別

get請求會將參數(shù)跟在url后進行傳遞，而post則是作為http消息實體內(nèi)容發(fā)送給服務器

get方式對于傳輸?shù)臄?shù)據(jù)有大小限制，通常不能大于2kb，而post方式傳遞的數(shù)據(jù)量大小沒有限制

get方式會將請求的數(shù)據(jù)會被緩存起來，可以從瀏覽器的歷史記錄中讀取這些數(shù)據(jù)，所以會帶來一些安全性方面的問題，而post相對來說安全很多

jQuery中的Ajax

javascript的ajax操作比較復雜， jQuery提供了一系列的方法，大大簡潔了Ajax開發(fā)

1.load()方法

load(url,data,callback);

load方法主要是用來遠程載入HTML代碼并插入DOM
第一個參數(shù)是要訪問的HTML的url地址
第二個參數(shù)是要發(fā)送至服務器的key:value數(shù)據(jù)
第三個參數(shù)是回調(diào)函數(shù)，需要注意的是：load方法的回調(diào)函數(shù)無論請求成功或者失敗都會執(zhí)行

load方法的傳遞方式是根據(jù)參數(shù)data來自動指定的

$("#submit").load("test.php",function(){});    //    無參數(shù)傳遞，get方式
$("#submit").load("test.php"{name:"fang",age:"30"},function(){});    //    有參數(shù)傳遞，post方式

2.$.get()方法

$.get(url,data,callback,type)

前兩個參數(shù)和load方法是一樣的
但是回調(diào)函數(shù)只有在載入成功的時候才會執(zhí)行
第四個參數(shù)是服務器返回的內(nèi)容格式，如xml,html,json,script,text

$.get("test.php",{
                name : "fang",
                age : "33"
},function(){
//回調(diào)函數(shù)
},type)

3.$.post()方法

$.post(url,data,callback,type)

前兩個參數(shù)和load,$.get()方法是一樣的
但是回調(diào)函數(shù)只有在載入成功的時候才會執(zhí)行
第四個參數(shù)是服務器返回的內(nèi)容格式，如xml,html,json,script,text

$.post("test.php",{
                name : "fang",
                age : "33"
},function(){
//回調(diào)函數(shù)
},type)

4.$.ajax()方法

$.ajax()方法，這是方法不僅可是實現(xiàn)上面的load,$.get(),$.post()方法，而且還可以設定多種狀態(tài)下的回調(diào)函數(shù)
$.ajax(options)是jQuery的最底層Ajax實現(xiàn)，這個方法只有一個參數(shù)，但是這個參數(shù)內(nèi)包含了所需要的一切信息，參數(shù)以key:value形式存在，所有參數(shù)都是可選的
$.ajax(url,type,timeout,data,datatype,beforeSend,complete,success,error,global)這些是所有的參數(shù)
url:發(fā)送請求的地址
type:請求方式，默認get
timeout:設置請求超時時間
data:發(fā)送到服務器的數(shù)據(jù)
datatype:預期服務器返回的數(shù)據(jù)類型
beforeSend:發(fā)送請求前可以修改XMLHttpRequest對象的函數(shù)
complete:請求完成后調(diào)用的回調(diào)函數(shù)
success:請求成功后調(diào)用的回調(diào)函數(shù)
error:請求失敗后調(diào)用的回調(diào)函數(shù)
global:表示是否觸發(fā)全局Ajax事件，默認為true

$.ajax({
    url:"test.php",
    type:"GET",
    datatype:"json",
    beforeSend:function(){},
    success:function(){},
    error:function(){},
    complete:function(){}
})

云服務器 GPU云服務器 Ajax方法調(diào)用ajax方法 ajax使用方法 query常用方法

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/84159.html

發(fā)表評論

登陸后可評論

0條評論

harriszh

男|高級講師

我要關(guān)注我要私信

TA的文章

BUI Webapp用于項目中的一點小心得

閱讀 1711·2019-08-30 15:54
前端面試題總結(jié)——綜合問題(持續(xù)更新中)

閱讀 3361·2019-08-26 17:15
在瀏覽器調(diào)起本地應用的方法

閱讀 3565·2019-08-26 13:49
leetcode 鏈表相關(guān)題目解析

閱讀 2607·2019-08-26 13:38
【刷算法】丑數(shù)

閱讀 2325·2019-08-26 12:08
webstorm預覽html配置localhost為本機ip地址

閱讀 3116·2019-08-26 10:41
籃球即時比分api接口調(diào)用示例代碼

閱讀 1397·2019-08-26 10:24
Webpack包教不包會

閱讀 3410·2019-08-23 18:35

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

Ajax常用方法

相關(guān)文章

**jQuery Ajax應用與常用插件**

JavaWEB開發(fā)14——ajax

**Java基礎(chǔ)學習之AJAX技術(shù)簡單學習**

ajax請求相關(guān)

ajax請求相關(guān)

發(fā)表評論

0條評論

harriszh

男|高級講師

TA的文章

BUI Webapp用于項目中的一點小心得

前端面試題總結(jié)——綜合問題(持續(xù)更新中)

在瀏覽器調(diào)起本地應用的方法

leetcode 鏈表相關(guān)題目解析

【刷算法】丑數(shù)

webstorm預覽html配置localhost為本機ip地址

籃球即時比分api接口調(diào)用示例代碼

Webpack包教不包會

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

Ajax常用方法

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！