为什么要封装AJAX函数?
在网页中经常需要利用AJAX向后台请求数据,需要创建XMLHttpRequest对象。在请求个数不多时,可以单独写请求函数。可是如果请求数量多,就会有大量的重复性代码。为了减少冗余,就可以对请求函数进行封装,将一系列的请求操作逻辑封装好,我们只需调用这个函数,传入参数变量即可。
封装AJAX函数
function ajax(type,url,async,param,callback){
//创建变量
var xmlhttp=null;
//判断浏览器版本
if(window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}else{
xmlhttp=new ActiveXObject("Microsoft");
};
//type:数据传输方式(get/post)
//url:访问路径
//param:携带的数据,以字符串的方式传递,例:username=lisi
//async:是否异步(true/false)
if(type == "get"){ //当传输方式为get时,在访问路径后面添加传输的参数
xmlhttp.open(type,url+"?"+param,async);
};
var data=null;
if(type == "post"){ //当传输方式为Post时,添加http头
xmlhttp.open(type,url,async);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
data=param; //定义的变量为传输的数据
}
xmlhttp.send(data); //get:data为null;post:data为传输的数据
//判断访问状态
xmlhttp.onreadystatechange=function(){
//判断响应是否就绪
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
var num=JSON.parse(xmlhttp.responseText);
if(num){
callback(num)
}else{
alert("没有此书,请重新输入")
}
}
}
}
我们在调用ajax函数时,需要传递对应的参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#tab{
border: 1px solid black;
}
td{
border: 1px solid black;
}
</style>
<script src="json.js"></script>
<script>
window.onload=function(){
var btn=document.getElementById("btn");
var main=document.getElementById("main");
btn.addEventListener("click",function(){
document.querySelector(".trr").remove();
var codeValue=document.getElementById("code").value;
var param="bookcode="+codeValue;
console.log(param)
ajax("get","json.php",true,param,function(num){
if(num.flag == 0){
main.innerHTML="";
}else{
console.log(num)
var tr=document.createElement("tr");
tr.className="trr";
for(var key in num){
var td=document.createElement("td");
tr.appendChild(td);
td.innerHTML=num[key];
}
tab.appendChild(tr);
}
})
})
}
</script>
</head>
<body>
<span>请输入图书编号:</span>
<input type="text" name="bookcode" id="code">
<input type="button" id="btn" value="提交">
<div id="main"></div>
<table id="tab" cellspacing='0'>
<tr class="trr"></tr>
</table>
</body>
</html>