控制台测试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的原理,可以查看
上一篇: 微博营销推广课堂:微博流量从哪里来?