封装一个自己的通用Ajax

作者 : 开心源码 本文共4325个字,预计阅读时间需要11分钟 发布时间: 2022-05-14 共172人阅读

一个简单的Ajax请求

首先在封装一个自己的ajax函数之前,我们需要先知道怎样实现一个简单的ajax请求。

这里我建了两个文件,ajax01.html和ajax01.php

ajax01.html代码:

<!doctype html><html><head> <meta charset="UTF-8"> <title>Ajax</title></head><body>   <input type="button" id="getContent" value="点我获取内容" />   <div id="container">点击上面的按钮,我会变哦</div></body><script>/*********************************ajax**********************************/   //获取元素   var getContent = document.getElementById("getContent");   var container = document.getElementById("container");   var user_info = document.getElementById("user_info");      //给元素增加单击事件解决函数   getContent.onclick = function (){       //1.创立XHR对象       var xhr = new XMLHttpRequest();              //4.给请求增加状态变化事件解决函数       xhr.onreadystatechange = function (){           //判断状态码           if(xhr.status==200 && xhr.readyState==4){               //将返回的json数据解析后保存在变量res中               var res = JSON.parse(xhr.responseText);               container.innerHTML = res.name;           }       };       //2.初始化请求       xhr.open('get','ajax01.php?name=张三&age=16',true);       //假如是post请求,需要设置这个请求头       //xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");              //3.发送请求       xhr.send(null);      };</script></html>

可以看到使用ajax发请求并获取响应数据只要要简单的4步

参数说明:

xhr.status————————status :响应的 HTTP 状态,200表示响应成功

xhr.readyState—————–readyState该属性表示请求/响应过程的当前活动阶段,这个属性可取的值如下:

0 :未初始化。尚未调用 open() 方法。
1 :启动。已经调用 open() 方法,但尚未调用 send() 方法。
2 :发送。已经调用 send() 方法,但尚未接收到响应。
3 :接收。已经接收到部分响应数据。
4 :完成。已经接收到一律响应数据,而且已经可以在用户端使用了。

xhr.onreadystatechange———————-readyState属性状态变化事件,只需 readyState 属性的值由一个值变成另一个值,都会触发一次 readystatechange 事件。可以利用这个事件来检测每次状态变化后 readyState 的值。

xhr.responseText———————————responseText :作为响应主体被返回的文本。

xhr.responseXML ——————————-responseXML :假如响应的内容类型是 “text/xml” 或者 “application/xml” ,这个属性中将保存包含着响应数据的 XML DOM 文档

这里需要注意的是,使用ajax发送post请求时要先将 Content-Type 头部信息设置为 application/x-www-form-urlencoded如下:

xhr.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”);

头部信息设置的设置肯定要在open()方法之后,send方法之前,代码如下:

//初始化请求xhr.open('post','ajax01.php',true);//假如是post请求,需要设置这个请求头xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");       //发送请求,假如还要发送数据,将数据传入send方法中xhr.send('name=张三&age=16');

假如还要发送数据,把数据传入send()中

ajax01.php中的代码如下:

<?phpif(empty($_POST)){   //接收get请求参数,并将数据格式化为json字符串返回给ajax   echo json_encode($_GET);}else{   //接收post请求参数,并将数据格式化为json字符串返回给ajax   echo json_encode($_POST);}?>

好了,在知道了如何使用ajax发起一个简单的请求后,我们现在可以来动手封装一个自己的通用ajax函数了

封装自己的通用Ajax函数
闲话少说,我们直接上代码吧

/**封装一个自己的ajax函数*有5个参数,最后一个参数可选** @param method(必选)    请求类型  get 和 post* @param url(必选)       请求的url地址   相同域名下的页面(此函数不支持跨域请求)* @param data(必选)      请求协带的数据  以js对象的形式定义,如:{name:'张三'}* @param callback(必选)  回调函数,可接收一个参数,这个参数就是服务器响应的数据* @param type(可选)      指定服务器响应的数据类型(可选值:json,xml,text),假如是json模式,则使用json解析数据,默认为text普通字符串*/function myAjax(method,url,data,callback,type){   //创立兼容 XMLHttpRequest 对象   var xhr;   if (window.XMLHttpRequest){//IE7+, Firefox, Chrome, Opera, Safari     xhr=new XMLHttpRequest();   }else{// code for IE6, IE5     xhr=new ActiveXObject("Microsoft.XMLHTTP");   }   //给请求增加状态变化事件解决函数   xhr.onreadystatechange = function (){       //判断状态码       if(xhr.status==200 && xhr.readyState==4){           //根据type参数,判断返回的内容需要进行怎么的解决           if(type=='json'){               //取得 json 形式的响应数据,并使用parse方法解析               var res = JSON.parse(xhr.responseText);           }else if(type=='xml'){               //取得 XML 形式的响应数据               var res = responseXML;           }else{               //取得字符串形式的响应数据               var res = xhr.responseText;           }           //调用回调函数,并将响应数据传入回调函数           callback(res);       }   };      //判断data能否有数据   var param = '';   //这里使用stringify方法将js对象格式化为json字符串   if(JSON.stringify(data) != '{}'){       url += '?';       for(var i in data){           param += i+'='+data[i]+'&';   //将js对象重组,拼接成url参数存入param变量中       }       //使用slice函数提取一部分字符串,这里主要是为了去除拼接的最后一个&字符       //slice函数:返回一个新的字符串。包括字符串从 start 开始(包括 start)到 end 结束(不包括 end)为止的所有字符。       param = param.slice(0,param.length-1);     }   //判断method能否为get   if(method == "get"){       //是则将数据拼接在url后面       url = url+param;   }   //初始化请求   xhr.open(method,url,true);   //假如method == post   if(method == "post"){       xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");       //发送请求       xhr.send(param);   }else{       //发送请求       xhr.send(null);   }   }

封装好了我们自己的ajax函数后,我们就来使用这个函数发起一个请求吧

<!doctype html><html><head> <meta charset="UTF-8"> <title>Ajax</title></head><body>   <input type="button" id="getContent" value="点我获取内容" />   <div id="container">点击上面的按钮,我会变哦</div></body><script>   //获取元素   var getContent = document.getElementById("getContent");   var container = document.getElementById("container");   var user_info = document.getElementById("user_info");      //给元素增加单击事件解决函数   getContent.onclick = function (){       //使用自己封装的ajax函数发送一个post请求       myAjax('post','ajax01.php',{name:'张三',age:16},function(res){           console.log(res);           container.innerHTML = res.name;       },'json');   };</script></html>

效果如下图:


这里我们封装好的ajax函数就能正常使用了,比使用原生js要写那么多代码方便多了,现在我们只需简单的调用这个ajax函数即可以方便的发送请求了。

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 封装一个自己的通用Ajax

发表回复