Ajax面试题-手写ajax请求的五个步骤

今天药忘吃喽~ 2023-05-29 03:16 6阅读 0赞

## Ajax 请求的五个步骤 ##

创建 XMLHttpRequest 对象； 设置请求行；设置请求头（针对 post 请求）；设置请求体；接收响应数据

/* 创建 XMLHttpRequest 对象 ；XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新 */
    // var xhr = new 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");
    }
    
    // 设置请求行，向服务器发送请求；用于说明XMLHttpRequest对象要从哪里获取数据.通常可以是网站中的数据,也可以是本地中其他文件中的数据。
    // open(method,url,async);规定请求的类型、URL 以及是否异步处理请求。
    // method：请求的类型；GET 或 POST；
    // url：文件在服务器上的位置；
    // async：true（异步）或 false（同步）
    xhr.open('GET','http://ajax.com/phpFile/time.php',true);
    
    // post 请求需要设置请求头
    // xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    
    // 设置请求体；
    // send(string); 将请求发送到服务器。string：仅用于 POST 请求
    xhr.send(null); // get请求参数可不填或置空
    
    /* 设置响应HTTP请求状态变化的函数 */
    // onreadystatechange 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
    xhr.onreadystatechange = function(){ 
      // 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
      // 0: 请求未初始化，1: 服务器连接已建立，2: 请求已接收，3: 请求处理中，4: 请求已完成，且响应已就绪
      // console.log(this.readyState);
    
      if(this.readyState != 4) return;
      
      // 获得来自服务器，字符串形式的响应数据。
      console.log(this.responseText);
    }