欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

控制台测试ajax

程序员文章站 2022-05-25 09:57:11
有的时候需要测试下web项目中post、get请求是否正确,但是这个时候电脑上没有安装测试工具,怎么办呢?直接用浏览器控制台测试,打开网站,F12控制台,在控制台下复制粘贴下面的ajax请求,之后ajax请求。 第一步:控制台写方法 第二步:控制台调用 url:请求的URL,method:post/ ......

有的时候需要测试下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的原理,可以查看