Ajax的步骤
- readyState状态
• 0: 请求未初始化
• 1: 服务器连接已建立
• 2: 请求已接收
• 3: 请求处理中
• 4: 请求已完成，且响应已就绪
第一步 : 初始化 & 实例化
var xhr = new XMLHttpRequest()
第二步 : 创建链接, 用什么链接,和谁链接 同步 false 异步 true
xhr.open('get','http://baidu.com',true) // 默认异步
第三步 : 监听改变
xhr.onreadystatechange = function(){
if(xhr.readyState === 4 && xhr.status === 200){
console.log(xhr.responseText)
}
}
第四步 : 传输数据
xhr.send()
封装方法
function ajax(opt){
//默认
var default_opt = {
url:'',
method: 'GET',
async: true,
data: {},
success:null,
callback:null
}
//合并
var newOpt = Object.assign(default_opt, opt);
//实例化
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
xhr.onreadystatechange = function(){
if(xhr.readyState === 4 && xhr.status === 200){
newOpt.callback && newOpt.callback(xhr.responseText)
}
}
//get?
var search = '';
if(newOpt.method.toUpperCase() === 'GET'){
// ?name=zdd&age=30
search = '?' + Object.keys(newOpt.data).map(function(k){
return k + '=' + newOpt.data[k]
}).join('&');
}
//建立链接
xhr.open(newOpt.method, newOpt.url + search, newOpt.async);
//post?
var data = {};
if(newOpt.method.toUpperCase() === 'POST'){
//设置请求头
xhr.setRequestHeader('Content-Type', 'application/x-www-form-
urlencoded');
data = JSON.stringify(newOpt.data);
}
xhr.send(data);
}
-----------------------------------------------------------
ajax({
url: 'http://127.0.0.1:3000/api/data',
method: 'post',
async: true,
data: {
name: 'zdd',
age: 30
},
success: function (data) {
console.log('yes');
},
callback: function (data) {
console.log(JSON.parse(data));
}
})
