关于前端:封装一个自己的通用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 中的代码如下：

<?php

if(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 函数就能够不便的发送申请了。

一个简略的 Ajax 申请