首先我们来看下面这段代码，通过发送ajax请求得到后台的数据，通过遍历动态生成页面结构
// 1.创建对象
var xhr = new XMLHttpRequest();
// 2.设置请求行
xhr.open("get","./server/nav-json.php");
// 3.设置请求体
xhr.send();
// 4.让异步对象接收服务器响应数据:一个成功的响应包含两个条件：1.服务器成功响应了 2.数据解析完毕可以使用了
xhr.onreadystatechange = function(){
if(xhr.status == 200 && xhr.readyState == 4){
var result = xhr.responseText;
// 在js中通过JSON.parse方法将json格式的字符串转换为js数组或者对象(
// 如果文件以[]来描述数据，那么就转换为数组
// 如果文件以{}来描述数据，那么就转换为对象)
var data = JSON.parse(result);
var html = "";
for(var i=0;i<data.length;i++){
html += "<li>" +
'<a href="#">' +
'<img src="'+data[i].src+'" alt="">' +
'<p>'+data[i].text+'</p>' +
'</a>' +
'</li>';
}
// 将生成的页面结构添加到dom元素中
document.querySelector("ul").innerHTML = html;
}
接下来就对它进行封装，首先找出可变部分作为参数
type:请求方式
url:请求url
data:传递给服务器的参数
callback:客户端的动态结构的渲染方式
function ajax(type,url,data,callback){
// 1.创建对象
var xhr = new XMLHttpRequest();
// 2.设置请求行
xhr.open(type,url,data?url+data:url);
// 3.设置请求体
xhr.send();
// 4.让异步对象接收服务器响应数据:一个成功的响应包含两个条件：1.服务器成功响应了 2.数据解析完毕可以使用了
xhr.onreadystatechange = function(){
if(xhr.status == 200 && xhr.readyState == 4){
// 获取响应头
// getAllResponseHeaders:获取所有响应头
var rh = xhr.getResponseHeader("Content-Type");
var result = xhr.responseText;
// 在js中通过JSON.parse方法将json格式的字符串转换为js数组或者对象(
// 如果文件以[]来描述数据，那么就转换为数组
// 如果文件以{}来描述数据，那么就转换为对象)
callback(result);
}
}
}
// 实现动态结构的渲染
function render(result){
var data = JSON.parse(result);
var html = "";
for(var i=0;i<data.length;i++){
html += "<li>" +
'<a href="#">' +
'<img src="'+data[i].src+'" alt="">' +
'<p>'+data[i].text+'</p>' +
'</a>' +
'</li>';
}
// 将生成的页面结构添加到dom元素中
document.querySelector("ul").innerHTML = html;
}
ajax("get","./server/nav-json.php",null,render);
上面的封装方式的缺点：1.参数数量固定：在调用的时候必须传入四个参数
2.参数的顺序固定：在调用的时候必须按照顺序进行参数的传递
3.不方便后期封装功能的扩展与修改
解决方式：通过传入对象的方式来设置参数
option是一个对象，它里面包含着相关的属性：如type,url,data,success
var $ = {
// 将{"name":"jack","age":20} 从键值对格式转换为 ?name=jack&age=20
getpa:function(data){
if(data && typeof data == "object"){
var str = "?";
for(var key in data){
str = str + key + "=" + data[key] + "&";
}
str = str.substr(0,str.length-1);
}
return str;
},
// option.type:请求方式
// option.url:请求的url
// option.data:当前请求所传递的参数:规定参数必须是以对象的形式传递{"name":"jack","age":20}
// option.success:渲染方式
ajax:function(option){
// 接收用户参数进行相应处理
var type = option.type || 'get';
// location.href 可以获取当前文件的路径
var url = option.url || location.href;
// 接收参数:传递的参数必须是对象
var data = this.getpa(option.data) || "";
// 响应成功之后的回调
var success = option.success;
// 创建异步对象
var xhr = new XMLHttpRequest();
// 让异步对象发送请求
if(type == "get"){
// 拼接参数
url += data;
data = null;
}
xhr.open(type,url);
if(type == "post"){
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
}
xhr.send(data);
// 让异步对象接收响应
xhr.onreadystatechange = function(){
// 一个成功的响应有两个条件：1.服务器成功响应 2.数据解析完毕可以使用
if(xhr.status == 200 && xhr.readyState == 4){
// 接收响应的返回值 responseText responseXML
var rh = xhr.getResponseHeader("Content-Type");
// 判断
if(rh.indexOf("xml") != -1){
var result = xhr.responseXML;
}
else if(rh.lastIndexOf("json") != -1){
var result = JSON.parse(xhr.responseText);
}else{
var result = xhr.responseText;
}
// 接收数据之后，调用回调函数
success && success(result);
}
}
}
}
以上就完成了我们ajax的封装，这种封装方法是比较推荐了，当然了解jQuery的同学应该一眼都看得出来，跟jQuery中ajax的使用方式很相似，不过我们只是简单的封装，并没有像jQuery一样做了大量兼容，以及多方面的考虑，我们的目的只是为了更加熟练地去理解和掌握ajax，在下一节会介绍jQuery中的ajax