zoukankan      html  css  js  c++  java
  • 小谢第45问:Ajax 是什么? 如何创建一个 Ajax

    创建步骤:

    面试手写(原生):

    //1:创建Ajax对象
    var xhr = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject('Microsoft.XMLHTTP');// 兼容IE6及以下版本
    //2:配置 Ajax请求地址
    xhr.open('get','index.xml',true);
    //3:发送请求
    xhr.send(null); // 严谨写法
    //4:监听请求,接受响应
    xhr.onreadysatechange=function(){
         if(xhr.readySates==4&&xhr.status==200 || xhr.status==304 )
              console.log(xhr.responsetXML)
    }
    

      

    jQuery写法 

     $.ajax({
              type:'post',
              url:'',
              async:ture,//async 异步  sync  同步
              data:data,//针对post请求
              dataType:'jsonp',
              success:function (msg) {
    
              },
              error:function (error) {
    
              }
            }) 
    

    promise 封装实现:

    // promise 封装实现:
    
    function getJSON(url) {
      // 创建一个 promise 对象
      let promise = new Promise(function(resolve, reject) {
        let xhr = new XMLHttpRequest();
    
        // 新建一个 http 请求
        xhr.open("GET", url, true);
    
        // 设置状态的监听函数
        xhr.onreadystatechange = function() {
          if (this.readyState !== 4) return;
    
          // 当请求成功或失败时,改变 promise 的状态
          if (this.status === 200) {
            resolve(this.response);
          } else {
            reject(new Error(this.statusText));
          }
        };
    
        // 设置错误监听函数
        xhr.onerror = function() {
          reject(new Error(this.statusText));
        };
    
        // 设置响应的数据类型
        xhr.responseType = "json";
    
        // 设置请求头信息
        xhr.setRequestHeader("Accept", "application/json");
    
        // 发送 http 请求
        xhr.send(null);
      });
    
      return promise;
    } 
    

      

  • 相关阅读:
    jsp第四次
    jsp第二次作业
    jsp第一次作业
    软件测试课堂练习
    11.11日
    10.28
    10.25
    10.21
    jsp第七周作业
    JSP第六周作业
  • 原文地址:https://www.cnblogs.com/xieoxie3000question/p/13367285.html
Copyright © 2011-2022 走看看