Ajax常用方法

harriszh 發布于2019-08-20 18:10 / 660人閱讀

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

Ajax的主要作用

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

javascript中的Ajax

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

javascript中Ajax的使用方法

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

open()方法

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

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

send()方法

xhr.send(null);

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

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

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

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

    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可將查詢的字符串參數加在url的末尾

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

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

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

get請求和post請求的區別

get請求會將參數跟在url后進行傳遞，而post則是作為http消息實體內容發送給服務器

get方式對于傳輸的數據有大小限制，通常不能大于2kb，而post方式傳遞的數據量大小沒有限制

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

jQuery中的Ajax

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

1.load()方法

load(url,data,callback);

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

load方法的傳遞方式是根據參數data來自動指定的

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

2.$.get()方法

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

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

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

3.$.post()方法

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

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

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

4.$.ajax()方法

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

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

GPU云服務器云服務器 Ajax方法調用ajax方法 ajax使用方法 query常用方法

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/84159.html

jQuery Ajax應用與常用插件

jQuery 實現Ajax應用使用load()方法異步請求數據使用load()方法通過Ajax請求加載服務器中的數據，并把返回的數據放置到指定的元素中，它的調用格式為： load(url,[data],[callback]) 參數url為加載服務器地址，可選項data參數為請求時發送的數據，callback參數為數據請求成功后，執行的回調函數使用getJSON()方法異步加載JSON格式數...

bingchen 2019-08-21 12:00 評論0 收藏0
JavaWEB開發14——ajax

摘要：一概述什么是同步，什么是異步同步現象客戶端發送請求到服務器端，當服務器返回響應之前，客戶端都處于等待卡死狀態異步現象客戶端發送請求到服務器端，無論服務器是否返回響應，客戶端都可以隨意做其他事情，不會被卡死的運行原理頁面發起請求，會將請求發送一、Ajax概述1．什么是同步，什么是異步同步現象：客戶端發送請求到服務器端，當服務器返回響應之前，客戶端都處于等待卡死狀態異步現象：客戶...

yearsj 2019-08-16 13:52 評論0 收藏0
Java基礎學習之AJAX技術簡單學習

摘要：是與服務器交換數據并更新部分網頁的藝術，在不重新加載整個頁面的情況下。對象是的核心，所有現代瀏覽器均支持對象和使用。用于在后臺與服務器交換數據。及時有效地幫助學員解決疑難問題，提高學員的學習積極性。　　Asynchronous JavaScript and XML(異步的 JavaScript 和 XML)。　　AJAX...

番茄西紅柿 2021-11-26 11:11 評論0 收藏2637
ajax請求相關

摘要：因為請求是異步的，我們無法獲知請求的進度和響應狀態，給我們提供了一個事件，我們可以通過監聽這個時間來關注這種變化，所以下一步是注冊事件。請求還沒有被發送。方法已調用，請求已發送到服務器。到此，請求準備完全完成。上一篇單獨寫的是ajax跨域，這一篇就來詳細說一說ajax，ajax是現代web開發中必不可少的一部分內容，非?；A也非常重要，這篇總結一下到目前為止我對ajax的理解。什么...

h9911 2019-08-30 14:00 評論0 收藏0
ajax請求相關

摘要：因為請求是異步的，我們無法獲知請求的進度和響應狀態，給我們提供了一個事件，我們可以通過監聽這個時間來關注這種變化，所以下一步是注冊事件。請求還沒有被發送。方法已調用，請求已發送到服務器。到此，請求準備完全完成。上一篇單獨寫的是ajax跨域，這一篇就來詳細說一說ajax，ajax是現代web開發中必不可少的一部分內容，非?；A也非常重要，這篇總結一下到目前為止我對ajax的理解。什么...

SolomonXie 2019-08-26 11:48 評論0 收藏0