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;
    } 
    

      

  • 相关阅读:
    Android:TabHost导航栏
    java:StringUtil工具类
    Android进阶篇MediaPlayer
    Android:图片滚轮
    Android:EditText焦点触发布局隐藏以及显示
    Android:Spinner的使用
    ASP.NET编程模型的理解
    ASP.NET页面事件(页面生命周期)
    根据用户喜欢的爱好选择不同风格CSS(ViewState)
    ASP.NET的页面指令
  • 原文地址:https://www.cnblogs.com/xieoxie3000question/p/13367285.html
Copyright © 2011-2022 走看看