zoukankan      html  css  js  c++  java
  • 创建Ajax

    概念:它是一种异步通信的方法,通过直接由 js 脚本向服务器发起 http 通信,然后根据服务器返回的数据,更新网页的相应部分,而不用刷新整个页面的一种方法。

    创建步骤:

    原生:

    //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;
    }
  • 相关阅读:
    Git学习-创建版本库
    使用Vim编辑器,如何退出
    设置既定目录的命令提示符
    字符数组和字符串
    一波杂乱的分享
    全国软件设计大赛C/C++语言练习
    HDU 1720、1062、2104、1064、2734、1170、1197、2629
    hdu 2000-2010 ACM
    HDU——算法练习1000 1089-1096
    爬虫学习笔记之为什么要设置超时时间,怎么设置(使用selenium)
  • 原文地址:https://www.cnblogs.com/xiaozhou223/p/13516727.html
Copyright © 2011-2022 走看看