原声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) } })

复制代码

        因为请求非常简单所以整体代码就都贴出来了，其中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。

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

转载于:https://juejin.im/post/5a950caef265da4e8f04d0de