什么是ajax
此概念截取于w3school
封装ajax
var ajax = {
get : function(url,callback){
// 首先需要创建XMLHttpRequest对象,这里要考虑到兼容性的问题,ie老版本需要使用ActiveXObject对象
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('MIcorosoft.XMLHTTP');
// 使用open方法规定请求类型
xhr.open('GET',url,true);
// 使用send方法向服务器发送请求
xhr.send();
// 添加状态改变事件
xhr.onreadystatechange = function(){
if(xhr.readyState === 4 && xhr.status === 200){
if(typeof callback === 'function'){
callback(xhr.responseText)
}
}
}
},
post : function(url,data,callback){
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('MIcrosoft.XMLHTTP');
xhr.open('POST',url,true);
// post请求需要设置请求头
xhr.setRequestHeader('content-type','Application/x-www-form-urlencoded;charset=utf-8');
xhr.send(data);
xhr.onreadystatechange = function(url,data,callback){
if(xhr.readyState === 4 && xhr.status === 200){
if(typeof callback === 'function'){
callback(xhr.responseText);
}
}
}
}
}
xhr.open()方法的参数,分别为请求方式,url地址,是否异步。
接下来我们测试get请求,这里使用json-server进行模拟
var getUsers = function(res){
console.log('get请求返回:' + res);
}
var url = 'http://localhost:3000/user';
ajax.get(url,getUsers);
get请求成功,接下来测试post请求
var addData = {
"name": "WangWu",
"age": 12,
"score": 100
};
//这里测试,发送json格式数据,模拟后端接收到的数据格式不正确,所以先改为formData格式
function jsonToString(json){
var dataArr = [];
for (var key in json) {
dataArr.push(key + "=" + json[key])
}
return dataArr.join("&")
}
ajax.post(url,JSON.stringify(addData),addUsers);
请求成功,返回值正确。
重新设置post请求的请求头。
var ajax = {
get : function(url,callback){
// 首先需要创建XMLHttpRequest对象,这里要考虑到兼容性的问题,ie老版本需要使用ActiveXObject对象
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('MIcorosoft.XMLHTTP');
// 使用open方法规定请求类型
xhr.open('GET',url,true);
// 使用send方法向服务器发送请求
xhr.send();
// 添加状态改变事件
xhr.onreadystatechange = function(){
if(xhr.readyState === 4 && xhr.status === 200){
if(typeof callback === 'function'){
callback(xhr.responseText)
}
}
}
},
post : function(url,data,callback){
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('MIcrosoft.XMLHTTP');
xhr.open('POST',url,true);
// post请求需要设置请求头
xhr.setRequestHeader('content-type','Application/json;charset=utf-8');
xhr.send(data);
xhr.onreadystatechange = function(url,data,callback){
if(xhr.readyState === 4 && xhr.status === 200){
if(typeof callback === 'function'){
callback(xhr.responseText);
}
}
}
}
}
这里再进行一次post测试,请求成功
ajax.post(url,JSON.stringify(addData),addUsers);
在测试过程中,感觉自己对请求时的数据格式还需要再钻研一下。