zoukankan      html  css  js  c++  java
  • 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')
    
  • 相关阅读:
    DES 算法的 C++ 与 JAVA 互相加解密
    ORACLE SQL 小记
    ACE 的头文件包含
    WTL 程序中显示 HTML
    GIS 中地理坐标和屏幕坐标的标准转换方法
    算盘中国古代伟大的计算器
    DELPHI 开发的 OCX 控件在 MFC 程序中编辑框快捷键不好使的解决
    服务端程序线程运行信息管理器
    ATL::CImage 的透明通道的处理与格式转换
    kinect sdk开发入门WPFdemo笔记
  • 原文地址:https://www.cnblogs.com/vera-7c/p/13856974.html
Copyright © 2011-2022 走看看