原声ajax与jquery ajax请求的区别

        这几天你们必定都在忙着面试或者是想要去面试吧，因此针对你们的面试我来说讲面试中对于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) } }) 
复制代码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(); } 
复制代码

        由于请求很是简单因此总体代码就都贴出来了，其中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。

        到这里这篇文章就接近尾声了，若是文章中还有没有讲到的部分，请在下面留言区进行留言我会一一进行解答，还请给为大神为我 的文章多提宝贵的意见，我都会采纳的，谢谢