javascript实现ajax,回调获取相应结果

一个小小的经过:
开始写的时候打印出来的都是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')
posted @ 2020-10-22 11:01  vera-7c  阅读(593)  评论(0编辑  收藏  举报