请求地址*.json_面试题：原生ajax的请求过程

一、请求流程

1. 创建XMLHTTPRequest对象。
2. 使用open方法设置和服务器的交互信息。
3. 设置发送的数据，开始和服务器端交互。
4. 注册事件。
5. 更新界面。

二、步骤解析

1. 创建XMLHTTPRequest对象

   XMLHttpRequest是AJAX的基础。所有现代浏览器均支持XMLHttpRequest对象，(IE5 和 IE6 使用 ActiveXObject)。

   //新建XMLHttpRequest对象
   var ajax = new XMLhttpRequest();
   
   //老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveX 对象
   var activex = new ActiveXObject("Microsoft.XMLHTTP");
   
   //适配所有浏览器
   var ajax;
   if (window.XMLHttpRequest){  // 适配 IE7+,Firefox,Chrome,Opera,Safari
      ajax=new XMLHttpRequest();  
   }
   else{                        // 适配 for IE6, IE5
      ajax=new ActiveXObject("Microsoft.XMLHTTP");  
   }
   
   

2. 使用open方法设置和服务器的交互信息

   使用open方法设置请求参数 请求方式和请求地址

   // method：请求的类型；GET 或 POST  
   // url：文件在服务器上的位置  
   // async：true(异步)或 false(同步)，默认为true
   ajax.open(method,url,async) 
   
   //设置get请求
   ajax .open ('get','xxxx/xxxx?xx=xxxx');
   
   //设置post请求，post 请求要设置请求头
   ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
   ajax.open('post','xxx/xxxx');
   
   

3. 设置发送的数据，开始和服务器端交互。

   //请求发送
   ajax.send();
   
   //如果POST请求需要发送表单那样的数据
   ajax.send('name=xl&age=22')
   

4. 注册事件。

   当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当 readyState 改变时，就会触发 onreadystatechange 事件。readyState 属性存有 XMLHttpRequest 的状态信息。

   // onreadystatechange:存储函数(或函数名)，每当 readyState 属性改变时，就会调用该函数。
   
   // readyState:存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
   // 0: 请求未初始化
   // 1: 服务器连接已建立
   // 2: 请求已接收
   // 3: 请求处理中
   // 4: 请求已完成，且响应已就绪
   
   // status: 200: "OK" 或 404: 未找到页面
   
   ajax.onreadystatechange = function (){
       if(xhr.readyState == 4 && xhr.staus == 200 ){
       //5.请求成功
           console.log(xhr.responsetext)
           ...相关相应操作
       }
   

   GET请求

   //1.创建异步对象
   var ajax = new XMLhttpRequest();
   
   //2.设置请求参数 请求方式 和 请求地址
   ajax .open ('get','xxxx/xxxx?xx=xxxx');
   
   //3.发送请求
   ajax.send();
   
   //4.注册事件 onreadystatechange 状态改变就会调用
   ajax.onreadystatechange = function (){
       if(ajax.readyState == 4 && ajax.staus == 200 ){
       //5.请求成功
           console.log(ajax.responsetext)
       }
   }
   

   POST请求

   // 1.创建异步对象
   var xhr = new XMLHttpRequest();
   
   // 2.设置请求方式和请求地址
   //  post 请求要设置请求头
   xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
   xhr.open('post','xxx/xxxx');
   
   //3.发送请求
   // a.不需要数据的时候
   xhr.send()
   // b.需要发送data
   xhr.send('name=xl&age=22')
   
   //4.注册事件 onreadystatechange 状态改变就会调用
   xhr.onreadystatechange = function (){
       if(xhr.readyState == 4 && xhr.staus == 200 ){
       //5.请求成功
           console.log(xhr.responsetext)
       }
   

5. 更新界面。

三、方法封装

如果封装ajax函数需要考虑到的关键点：

• 请求方式(get)，请求参数要与地址拼接后放到open方法中。
• 请求方式post，请求参数类型是json数据类型，要将json转字符串后放到send方法中。
• 对服务器响应处理时获取响应头中的响应数据格式。
• 响应的格式是json对象，处理响应结果要将字符串转json对象。
• 设置ajax函数的默认参数减少代码冗余。

function ajax (options) {
  // 存储的是默认值
  var defaults = {
   type: 'get',
   url: '',
   data: {},
   header: {
    'Content-Type': 'application/x-www-form-urlencoded'
    },
   success: function () {},
   error: function () {}
  };
  // 使用options对象中的属性覆盖defaults对象中的属性
  Object.assign(defaults, options);
  // 创建ajax对象
  var xhr = new XMLHttpRequest();
  // 拼接请求参数的变量
  var params = '';
  // 循环用户传递进来的对象格式参数
  for (var attr in defaults.data) {
    // 将参数转换为字符串格式
    params += attr + '=' + defaults.data[attr] + '&';
   }
  // 将参数最后面的&截取掉 
  // 将截取的结果重新赋值给params变量
  params = params.substr(0, params.length - 1);
  // 判断请求方式
  if (defaults.type == 'get') {
    defaults.url = defaults.url + '?' + params;
   }
  // 配置ajax对象
  xhr.open(defaults.type, defaults.url);
  // 如果请求方式为post
  if (defaults.type == 'post') {
    // 用户希望的向服务器端传递的请求参数的类型
    var contentType = defaults.header['Content-Type']
    // 设置请求参数格式的类型
    xhr.setRequestHeader('Content-Type', contentType);
    // 判断用户希望的请求参数格式的类型
    // 如果类型为json
    if (contentType == 'application/json') {
     // 向服务器端传递json数据格式的参数
     xhr.send(JSON.stringify(defaults.data))
    }else {
     // 向服务器端传递普通类型的请求参数
     xhr.send(params);
    }

   }else {
   // 发送请求
   xhr.send();
  }
  // 监听xhr对象下面的onload事件
  // 当xhr对象接收完响应数据后触发
  xhr.onload = function () {
   // xhr.getResponseHeader()
   // 获取响应头中的数据
   var contentType = xhr.getResponseHeader('Content-Type');
   // 服务器端返回的数据
   var responseText = xhr.responseText;
   // 如果响应类型中包含applicaition/json
   if (contentType.includes('application/json')) {
    // 将json字符串转换为json对象
    responseText = JSON.parse(responseText)
   }
   // 当http状态码等于200的时候
   if (xhr.status == 200) {
    // 请求成功 调用处理成功情况的函数
    defaults.success(responseText, xhr);
   }else {
    // 请求失败 调用处理失败情况的函数
    defaults.error(responseText, xhr);
   }
  }
 }
 ajax({
  type: 'post',
  // 请求地址
  url: 'http://localhost:3000/responseData',
  success: function (data) {
   console.log('这里是success函数');
   console.log(data)
  }
 })


代码参考链接：https://juejin.cn/post/6844904071371948046

---