ajax封装 php,封装一个自己的通用Ajax

一个简单的Ajax请求

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

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

ajax01.html代码：

Ajax

点击上面的按钮，我会变哦

/*********************************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);

};

可以看到使用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函数后，我们就来使用这个函数发起一个请求吧

Ajax

点击上面的按钮，我会变哦

//获取元素

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');

};

效果如下图：

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