一个小小的经过:
开始写的时候打印出来的都是undefined,但是其实已经获取到了,打印的时候还没获取到而已;然后加了回调函数来获取,ajax的回调地狱,不过我现在只是一个get请求;这个时候用的还是onreadystatechange,之前的测试console还没删除,在这个部分发现if/else执行了3次,好像没有必要,改成了onloadned。
function Ajax(option){
var xhr = new XMLHttpRequest()
xhr.open(option.method,option.action,true)
xhr.onreadystatechange=()=>{
if(xhr.readyState==4 && xhr.status == 200){
return xhr.response
}else{
return xhr.responseText
}
}
xhr.onerror=()=>{
return xhr.response
}
xhr.send()
}
let option = {
method:'get',
action:'http://xxxx/cd/user/validEmail/xxxxx@qq.com'
}
console.log(Ajax(option))//undefined
function Ajax(option,callback){
var xhr = new XMLHttpRequest()
xhr.open(option.method,option.action,true)
xhr.onloadend=()=>{
if(xhr.readyState==4 && xhr.status == 200){
return callback(xhr.response)
}else{
return callback(xhr.responseText)
}
}
xhr.onerror=()=>{
return callback(xhr.responseText)
}
xhr.send()
}
function checkEmail(email){
let option = {
method:'get',
action:'http://xxxx/cd/user/validEmail/'+email
}
Ajax(option,doCheck)
function doCheck(res){
console.log(JSON.parse(res))//信息
}
}
checkEmail('xxxxx@qq.com')
promise封装和加兼容,then和callback感觉好微妙,callback对应的两种状态一样。
var Ajax = function(option) {
return new Promise((resolve,reject)=>{
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
var xhr = new XMLHttpRequest();
} else {
// code for IE6, IE5
var xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open(option.method, option.action, true)
xhr.onloadend = () => {
if (xhr.status == 200 && xhr.readyState == 4) {
resolve(xhr.response)
} else {
reject(xhr.responseText)
}
}
xhr.onerror = () => {
reject(xhr.responseText)
}
xhr.send()
})
}
function checkEmail(email) {
let option = {
method: 'get',
action: 'http://xxxx/cd/user/validEmail/'+email
}
Ajax(option).then(res=>{
console.log(JSON.parse(res))//信息
})
}
checkEmail('xxxxxx@qq.com')