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;
    }
  • 相关阅读:
    hdu 1251(字典树)(3种方法)
    HDU 2203(KMP算法)
    九度oj 题目1335:闯迷宫
    poj3894 bfs+记录路径
    状压dp--P2704
    状压dp--洛谷P2622
    动态规划--牛客多校number
    完全背包
    01背包--hdu
    莫比乌斯反演模板--Gym 101982B
  • 原文地址:https://www.cnblogs.com/xiaozhou223/p/13516727.html
Copyright © 2011-2022 走看看