【JavaScript】JS原生的ajax和Jquery的ajax的使用

jquery的ajax使用起來很輕鬆，但js的ajax卻是其底層，也需要有所瞭解。

簡單介紹一下，js的ajax需要哪些東西：

1.var xmlHttp = new xmlHttpRequest()，它是js的ajax實現的關鍵類 

2.請求行 xmlHttp.open()，設置請求的方式、地址、是否異步,get的參數在地址後設置

3.請求頭 xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded")，只需要post請求時設置

4.請求體 xmlHttp.send()，post的參數在這個函數中設置，get不需要填寫

5.回調函數 xmlHttp.onreadystatechange = function(){...}，請求成功後會調用此函數，具體對html操作的代碼放在裏面

js的ajax

onreadystatechange事件用來監控 readyState 的狀態值  和 status 的狀態值

status ：200時爲正常

readyState

• 調用了open之後狀態爲：1
• 調用了send之後，後臺將要做出響應時爲：2
• 開始接受後臺向數據響應狀態爲：3
• 接受後臺數據完成之後狀態爲：4

當readyState = 4，status = 200 的時候，需要將返回的時候，展示到客戶端

js的ajax的具體實現——get

function doAjax() {
            var xmlHttp;
            //根據不同的瀏覽器，獲取xmlHttpRequest()對象
            if (window.XMLHttpRequest) {//判斷window有沒有XMLHttpRequest對象
                xmlHttp = new XMLHttpRequest();
            } else {//IE6以下，需要使用ActiveXObject組件
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }

            //onreadystatechange事件用來監控readyState的狀態值
            //當readyState = 4的時候，需要將返回的時候，展示到客戶端
            xmlHttp.onreadystatechange = function () {
                console.log("xmlHttp.readyState=" + xmlHttp.readyState + ";xmlHttp.status=" + xmlHttp.status);
                //過濾判斷
                //1.readyState必須爲4，後臺的數據纔回反饋完畢
                //2.本次提交的的狀態代碼：200（正常）
                if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                    //後臺數據回填到前臺
                    document.getElementById("myFood").value = xmlHttp.responseText;
                }
            };

            //get請求如果有參數就需要在url後面拼接參數
            var food = document.getElementById("food").value;
            //設置請求行，異步提交true
            xmlHttp.open("get", "AjaxServlet?food=" + food, true);
            //無需設置請求頭
            //設置請求體，get的參數在url拼接了，所以不需要在這個函數中設置
            xmlHttp.send(null);
        }

js的ajax的具體實現——post

function doAjax(){
        var xmlHttp;
        //根據不同的瀏覽器，獲取xmlHttpRequest()對象
        if(window.XMLHttpRequest){//判斷window有沒有XMLHttpRequest對象
            xmlHttp = new XMLHttpRequest();
        }else{//IE6以下，需要使用ActiveXObject組件
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }

        //onreadystatechange事件用來監控readyState的狀態值
        xmlHttp.onreadystatechange = function(){
            console.log("xmlHttp.readyState="+xmlHttp.readyState+";xmlHttp.status="+xmlHttp.status);
            //過濾判斷
            //1.readyState必須爲4，後臺的數據纔回反饋完畢
            //2.本次提交的的狀態代碼：200（正常）
            if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
                //後臺數據回填到前臺
                document.getElementById("myFood").value = xmlHttp.responseText;
            }
        };

        //post如果有參數，就在請求體中傳遞
        var food = document.getElementById("food").value;
        //設置請求行，異步提交true
        xmlHttp.open("get","AjaxServlet",true);
        //設置請求頭（GET方式忽略此步驟）:setRequestHeader()
        xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        //設置請求體，post的參數在這個函數中設置(如果有參數)
        xmlHttp.send("food="+food);
	}

Jquery的ajax

這個就比較簡單了，只貼出最常用的一種

$.ajax({
 type:"get",//get或者post
 url:"abc",//請求的url地址
 data:{},//請求的參數
 dataType:"json",//json代表傳入的json類型數據
 timeout:3000,//3秒後提示錯誤
 beforeSend:function(){ 
 // 發送之前就會進入這個函數
 // return false 這個ajax會停止，如果沒有return false就會繼續
 },
 success:function(data){// 成功拿到結果放到這個函數 data就是拿到的結果
 },
 error:function(){//失敗的函數
 },
 complete:function(){//不管成功還是失敗 都會進這個函數
 }
})
// 常用 無註釋
$.ajax({
 type:"get",
 url:"",
 data:{},
 dataType:"json",
 success:function(data){
 }
})

如果對您有所幫助，請點個贊支持一下作者~

這次一定！