Ajax經常使用方法

時間 2019-12-06

原文原文鏈接

Ajax的主要做用

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

javascript中的Ajax

在javascript中，ajax是經過XMLHttpRequest對象來實現的，這個對象用於和後臺進行數據的交互。在ie7以前，XHR是經過MSXML庫中的ActiveX對象實現的，ie7後咱們能夠直接使用 var xhr = new XMLHttpRequest();建立一個XHR對象，建立好以後，咱們就能夠經過xhr對象來調用相應的方法了。php

javascript中Ajax的使用方法

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

open()方法java
```
xhr.open('type','url',true);
```
第一個參數是請求類型，get/post
第二個參數是請求的地址
第三個參數表示請求是同步仍是異步，true表明異步處理
注意的一點就是，open方法不會發送請求，只是啓動一個請求準備發送ajax
send()方法json
```
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(){}
})