一个简略的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函数就能够不便的发送申请了。
发表回复