Ajax-发送请求的五个步骤

浅浅的花香味﹌ 2023-07-14 10:38 10阅读 0赞

#### 概述 ####

`Asynchronous Javascript And XML`， AJAX 不是一门的新的语言，而是对现有技术的综合利用。

ajax 是一种技术方案，依赖浏览器提供的 XMLHttpRequest 对象发出 HTTP 请求和接收 HTTP 响应；实现了在页面不刷新的情况下和服务器进行数据交互。

本质是在HTTP协议的基础上以异步的方式与服务器进行通信。

同步和异步概念：

同步是阻塞模式，异步是非阻塞模式

*  同步：提交请求 >> 等待服务器处理 >> 处理完毕返回，这个期间浏览器不能干任何事。
 *  异步：请求通过事件触发 >> 服务器处理（这时浏览器仍然可以运作其它事情） >> 处理完毕

#### ajax 发送 HTTP 请求 ####

*  创建一个XMLHttpRequest对象
    
        /* 创建 XMLHttpRequest 对象 ；XMLHttpRequest 用于在后台与服务器交换数据。 这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新 */    
        var xhr = null;
        // 检查浏览器是否支持 XMLHttpRequest 对象
        if(window.XMLHttpRequest){ 
          // 若支持则创建 XMLHttpRequest 对象
          // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
          xhr = new XMLHttpRequest();
        }else { 
          // 若不支持创建 ActiveXObject
          // IE6, IE5 浏览器执行代码
          xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
 *  设置请求行
    
        xhr.open(method, url[,async]);
    
     *  `method` 请求类型 get或post
     *  `url` 请求路径（get 请求中的参数在此拼接）
     *  `async` 布尔值 true（异步）或 false（同步），默认为异步
 *  设置请求头， 标记请求体内容的解析方式（POST）
    
        setRequestHeader(header,value);
    
     *  `header` 头的名称
     *  `value` 头的值
 *  设置请求体（调用该方法，将请求发送到服务器）
    
        xhr.send(string);
    
     *  为 get 请求时，参数可不填或置空（请求参数在 url 中）
     *  为 post 请求时，string 为需要设置的请求参数
 *  接收响应数据
    
        // onreadystatechange 存储函数（或函数名），
        // 每当 readyState 属性改变时，就会调用该函数。
        xhr.onreadystatechange = function(){ 
          // 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
          // 0: 请求未初始化，1: 服务器连接已建立，2: 请求已接收，
          // 3: 请求处理中，4: 请求已完成，且响应已就绪
        
          if(this.readyState != 4) return;
          // 获得来自服务器，字符串形式的响应数据。
          console.log(this.responseText);
        }

##### get 请求 #####

// 1. 创建一个XMLHttpRequest对象
    var xhr = new XMLHttpRequest();
    
    // 2. 设置请求行
    // 第一个参数:请求方式 get/post
    // 第二个参数:请求的地址 需要在url后面拼上参数列表
    xhr.open("get", "get.php?name=Jepson");
    
    // 3. 设置请求头
    // 请求头中可以设置Content-Type,用以说明请求主体的内容是如何编码,
    // get请求时没有请求体,无需设置
    
    // 4. 设置请求体
    // get请求的请求体为空,因为参数列表拼接到url后面了
    xhr.send(null);
    
    // 5. 获取响应数据
    xhr.onreadystatechange = function(){ 
      if(this.readyState != 4) return;
      // 获得来自服务器，字符串形式的响应数据。
      console.log(this.responseText);
    }

##### post 请求 #####

// 1. 创建一个XMLHttpRequest对象
    var xhr = new XMLHttpRequest();
    
    // 2. 设置请求行 post请求的参数列表在请求体
    xhr.open("post", "post.php");
    
    // 3. 设置请求头, post 请求必须要设置 content-type, 
    // 标记请求体内容的解析方式, 不然后端无法解析获取数据
    xhr.setRequestHeader( "content-type", "application/x-www-form-urlencoded" );
    
    // 4. 设置请求体
    xhr.send( "name=Jepson&age=18" );
    
    // 5. 获取响应数据
    xhr.onreadystatechange = function(){ 
      if(this.readyState != 4) return;
      // 获得来自服务器，字符串形式的响应数据。
      console.log(this.responseText);
    }