原生js封装Ajax函数

￡神魔★判官ぃ 2022-05-23 04:26 230阅读 0赞

Ajax，是 Asynchronous JavaScript + XML 的简写。指一种创建交互式网页应用的网页开发的技术。  
通过异步模式，提升了用户体验。优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用。Ajax引擎在客户端运行，承担了一部分本来由服务器承担的工作，从而减少了大量用户下的服务器负载。  
Ajax最大的特点就是局部刷新。

Ajax 技术核心是 XMLHttpRequest 对象(简称 XHR)

Ajax的封装函数

//把传入的所有数据看成一个对象obj

//示例 obj=\{type:"get",url:"data.json",data:\{\},success:function()\{\},error:function()\{\}\}  
/\*obj里含要发送的请求类型：get  或  post  
要有路径  url  
传的值data 可有可无  
后面是成功时success调用的方法，失败时error调用的方法  
 \* \*/  
  
  
function Ajax(obj)\{  
if(window.XMLHttpRequest)\{  
var xhr = new XMLHttpRequest();  
\}else\{  
var xhr = new ActiveXObject("Microsoft.XMLHTTP");  
\}//这个if语句 浏览器兼容  
var str = "";  
for(var attr in obj\["data"\])\{//遍历传入的数据data：\{\}  
str+= attr+"="+obj\["data"\]\[attr\]+"&";//属性=属性值 并以&连接  
\}//遍历data，并用&连接起来，但是最后是以&结尾的，要消除最后一个&  
str = str.replace(/&$/,"");//把最后一个&替换为空（就是去掉最后那个&）  
  
  
if(obj\["type"\].toLowerCase() == "get")\{  
//判断请求类型是get还是post，为防止大小写不匹配，全部转换为小写  
if(obj\["data"\]===undefined)\{//判断是否有data值  
xhr.open("get",obj\["url"\],true);  
\}else\{  
xhr.open("get",obj\["url"\]+"?"+str,true);//get类型以？连接  
\}  
  
xhr.send();  
\}else\{  
xhr.open("post",obj\["url"\],true);//post方式  
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");  
//post类型要加这句话，数据转换为form格式，死记  
xhr.send(str);//注意传str  
\}  
  
xhr.onreadystatechange = function()\{//接收服务器返回的信息  
if(xhr.readyState == 4)\{  
if(xhr.status==200)\{  
var data = xhr.responseText;  
obj\["success"\](data);//成功时调用的方法  
\}else\{  
if(obj\["error"\])\{//失败时调用的方法  
obj\["error"\]();  
\}  
  
\}  
  
\}  
\}  
\}