控制台测试ajax

Posted 2020-11-24 凌风95

有的时候需要测试下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中的介绍】