封装一个本身的通用Ajax

时间 2021-03-16

标签 php html ajax json 跨域服务器 app 函数 post url 栏目软件设计繁體版

原文原文链接

一个简单的Ajax请求

首先在封装一个本身的ajax函数以前，咱们须要先知道怎么实现一个简单的ajax请求。php

这里我建了两个文件，ajax01.html和ajax01.phphtml

ajax01.html代码：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>
/*********************************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步json

参数说明：跨域

xhr.status------------------------status ：响应的 HTTP 状态，200表示响应成功服务器

xhr.readyState-----------------readyState该属性表示请求/响应过程的当前活动阶段，这个属性可取的值以下：app

0 ：未初始化。还没有调用 open() 方法。
1 ：启动。已经调用 open() 方法，但还没有调用 send() 方法。
2 ：发送。已经调用 send() 方法，但还没有接收到响应。
3 ：接收。已经接收到部分响应数据。
4 ：完成。已经接收到所有响应数据，并且已经能够在客户端使用了。函数

xhr.onreadystatechange----------------------readyState属性状态变化事件，只要 readyState 属性的值由一个值变成另外一个值，都会触发一次 readystatechange 事件。能够利用这个事件来检测每次状态变化后 readyState 的值。post

xhr.responseText---------------------------------responseText ：做为响应主体被返回的文本。url

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函数就能够方便的发送请求了。