这几天大家一定都在忙着面试或者是想要去面试吧,所以针对大家的面试我来讲讲面试中对于ajax的问题的回答,前几天我也遇到这个坑结果没有爬上来,所以今天写这个文章的目的是想要提醒各位这个地方一定要注意,说起来原声ajax确实不如jquery封装过的ajax好用,但是还是得知道它怎么写和其中的区别。
原声ajax请求
var http=null;
if(window.ActiveXObject){
http=new ActiveXObject('Microsoft.XmlHTTP');
}else{
http=new XMLHttpRequest();
}
复制代码
先定义XMLHttpRequest()然后用这个去进行请求
var url=;
指定url
http.open('GET',url,true);
第一个参数选择哪种方式提交数据
第二个参数是选择传递的地址
第三个参数是选择是否异步传输,true:异步,false:同步
复制代码
之后定义需要请求的url,和请求的方式使用open方法请求
http.readystatechange=function(){
if(http.status==4&&http.status==200){
返回的对象状态值为4
返回的状态码为200
var text=http.responseText;//返回值赋值到DOM
console.log(text)
} 简单的异常处理 if(http.status==404){ alert('响应失败'); } } 发送一个 HTTP 请求 http.send();
复制代码
最后判断请求是否成功,然后打印结果
贴出来完整的代码
var btn=document.getElementById('btn');
btn.onclick=function(){
var http=null; if(window.ActiveXObject){ http=new ActiveXObject('Microsoft.XmlHTTP'); }else{ http=new XMLHttpRequest(); } var url= //指定url http.open('GET',url,true); 第一个参数选择哪种方式提交数据 第二个参数是选择传递的地址 第三个参数是选择是否异步传输,true:异步,false:同步
当状态发生改变就触发的事件(可以理解为node.onchange=function()) http.readystatechange=function(){ if(http.status==4&&http.status==200){ 返回的对象状态值为:4 返回的状态码为200 var text=http.responseText;//返回值赋值到DOM console.log(text)
} 简单的异常处理 if(http.status==404){ alert('响应失败'); } } 发送一个 HTTP 请求 http.send(); }
复制代码
这就是一个完整的原声ajax请求,接下来演示jquery ajax请求
$.ajax({ url:'/comm/test1.php', type:'POST', //GET async:true, //或false,是否异步 data:{ name:'yang',age:25 }, timeout:5000, //超时时间 dataType:'json', //返回的数据格式:json/xml/html/script/jsonp/text success:function(data,textStatus,jqXHR){ console.log(data) console.log(textStatus) console.log(jqXHR) }, error:function(xhr,textStatus){ console.log('错误') console.log(xhr) console.log(textStatus) } })
复制代码
因为请求非常简单所以整体代码就都贴出来了,其中url是请求地址,type为请求方式,async为是否异步,timeout为超时时间,dataType为返回格式,success为正确返回的参数,error为报错时的参数
jquery是吧ajax进行了二次封装,所以用起来特别的方便不需要现new一个XMLHttpRequest()就能实现请求
通过上述代码总结来说就是:
jQuery是javascript的一个框架,也就是有人做好了很多功能,你直接拿来用就好了。比如实现Ajax。纯javascript,你可能需要些好多函数,来新建对象,捕捉事件,处理异常等。但用jQuery,你只要按规则调用一个方法就行。当然,jQuery还有很多其他功能,详见jquery手册。
ajax是javascript的一个应用方向,主要是通过javascript异步访问服务器端的数据(通常是XML数据或Json数据),来实现无刷新更新页面内容,或提交信息。上面说了,如果用jquery会很容易实现ajax。
到这里这篇文章就接近尾声了,如果文章中还有没有讲到的部分,请在下面留言区进行留言我会一一进行解答,还请给为大神为我 的文章多提宝贵的意见,我都会采纳的,谢谢