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;
    }
  • 相关阅读:
    简单工厂,工厂方法,抽象工厂,三种工厂模式
    Redis锁完美解决高并发秒杀问题
    30分钟教你写一个mybatis框架
    List实现队列--杀人游戏
    .Net 事务
    EF架构~为EF DbContext生成的实体添加注释(T5模板应用)
    移动开发规范概述
    Git设置当前分支为默认push分支
    git——简易指南
    .Net内存泄露原因及解决办法
  • 原文地址:https://www.cnblogs.com/xiaozhou223/p/13516727.html
Copyright © 2011-2022 走看看