ajax温习
工作中一直有写JS,也一直有用jquery,在感受jquery便利之余,也对它产生了依赖,已至于许多功能只知使用而不知原生写法,就像ajax。
今天不小心翻看了以前学习的视频,温故了一下原生ajax写法及原理,正好捣鼓捣鼓。这也是面试经常会遇到的问题,动手封装下原生的ajax函数何乐而不为了,代码如下:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
function ajaxfn(obj){ /*传入一个json对象 *type:为请求方式,如get,post *data:传输的数据 *async:异步请求,默认为true *dataType:返回的数据类型 *url:这请求地址 *fnok:为请求成功时的回调,默认传入返回的数据 *fnerror:为请求失败的回调,默认传入当前的服务器状态码,如500,404 */ var xhr=null, type=obj.type?obj.type.toLowerCase():"get",//默认是get url=obj.url, data=obj.data?JSON.stringify(obj.data):null, dataType=obj.dataType?obj.dataType.toLowerCase():"text", async=true;//默认是异步 if(obj.async==false){ async=false; } //创建XMLHttpRequest对象 try{ xhr=new XMLHttpRequest(); }catch(e){ //兼容ie6 xhr=new ActiveXObject('Microsoft.XMLHTTP'); } //连接服务器 xhr.open(type,url,async); //发送请求 if(type=="post"){//如果是post请求得先设置请求头,application/x-www=form-urlencoded适合绝大多数的应用场景 xhr.setRequestHeader("content-type","application/x-www=form-urlencoded"); } xhr.send(data); //监听过程 xhr.onreadystatechange=function(){ /*readyState请求状态 *0:请求未初始化(还没有调用open()) *1:请求已经建立,但是还没有发送(还没有调用send()) *2:请求已发送,正在处理中(通常现在可以从响应中获取内容头)。 *3:请求处理中,通常响应中已有部分数据可用了,但是服务器还没有完成响应的生成。 *4:响应已经完成;可以获取并使用服务器的响应了. */ if(xhr.readyState==4){//请成完成 /*常用http状态码 *200:服务器成功返回网页 *304:未修改,使用缓存 *403:服务器拒绝请求 *404:请求的网页不存在 *503:服务器暂时不可用 *500:服务器内部错误 */ if(xhr.status==200){//返回成功 switch (dataType){ case "text"://接收到字符串 obj.fnok && obj.fnok(xhr.responseText); break; case "json"://接收到json字符串数据 obj.fnok && obj.fnok(JSON.parse(xhr.responseText)); break; case "xml"://接收到xml格式数据 obj.fnok && obj.fnok(xhr.responseXML); break; } }else{ obj.fnerror && obj.fnerror(xhr.status); } } } } }
注:为了兼容IE6,ie7,ie8(兼容模式)支持JSON对象的stringify(),parse()方法,引入了一个json2.js文件,文件下载地址如下:https://github.com/douglascrockford/JSON-js
使用示例如下:
ajaxfn({ type:'get',//请求方式 url:'test.txt',//请求地址 dataType:'text',//返回的数据类型 fnok:function(data){//请求成功的回调 alert(data); }, fnerror:function(data){//请求失败的回调 alert(data); } });
个人知识有限,如有错误的地方,望指正,共同学习共同进步!
好好学习!天天向上!