控制台測試ajax

有的時候需要測試下web項目中post、get請求是否正確，但是這個時候電腦上沒有安裝測試工具，怎麼辦呢？直接用瀏覽器控制台測試，打開網站,F12控制台，在控制臺下複製粘貼下麵的ajax請求，之後ajax請求。

第一步：控制台寫方法

function ajax(req){
    var xhr=new XMLHttpRequest();
    xhr.onreadystatechange=function(){
        if(xhr.readyState===4){
            req.success&&req.success(xhr.responseText,xhr.status);
        }
    }
    req.method=req.method?req.method.toUpperCase():'GET';
    var data=null;
    var url=req.url;
    if(req.data){
        var arg='';
        for(var n in req.data){
            arg+=n+'='+encodeURIComponent(req.data[n])+'&'
        }
        arg=arg.slice(0,-1);
        if(req.method==='GET'){
            url=url+'?'+arg;
        }else{
            data=arg;
        }
    }
    if(req.headers){
        for(var h in req.headers){
            var v=req.headers[h];
            xhr.setRequestHeader(h,v);
        }
    }
    xhr.open(req.method,url);
    xhr.send(data);
}

第二步：控制台調用

ajax({url:"",method:"",data:{},headers:{},success:function(res){console.log(res)}})

url：請求的URL，method:post/get，data:參數，success:返回的數據列印出來

解釋

XMLHttpRequest 是 AJAX 的基礎。XMLHttpRequest 用於在後臺與伺服器交換數據。這意味著可以在不重新載入整個網頁的情況下，對網頁的某部分進行更新。
當請求被髮送到伺服器時，我們需要執行一些基於響應的任務。每當 readyState 改變時，就會觸發 onreadystatechange 事件。

簡單的ajax例子：

var xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        console.log(xmlhttp.responseText);
    }
}
xmlhttp.open("GET","url",true);
xmlhttp.send();

參考

想瞭解更多ajax的原理，可以查看 【runoob中的介紹】