Ajax(6)：Ajax实操

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

Ajax的操作

环境搭建

进行ajax的请求前先用express框架搭建一个本地的服务器服务

1. 首先进行npm换源

   npm install -g cnpm --registry=https://registry.npm.taobao.org  # 以后直接cnpm下载
   

2. 安装express和path模块

3. 搭建服务器

   // 引入express框架
   const express = require('express');
   // 路径处理模块
   const path = require('path')
   // 创建web服务
   const app = express();
   
   // 静态资源访问服务功能
   app.use(express.static(path.join(__dirname, 'public')));
   
   // 监听端口
   app.listen(3000);
   // 控制台提示输出
   console.log('服务器成功')
   

   目录结构

   

ajax的四步

1. 创建XMLHttpRequest对象，也就是Ajax对象（IE6不兼容），用来发送http请求

   let xhr = new XMLHttpRequest()
   

2. 发送请求之前对Ajax对象进行一些配置

   xhr.open([Http Method], [Url], [Async], [User-Name], [User-Pass]);
   
   /*
    *	1. Http Method：请求方式(一共8个)
    *		-GET/DELETE/HEAD/OPTTONS/TRACE/CONNECT
    *		-POST/PUT
    *	2. Url：向服务器发送请求的API接口地址
    *	3. Async：设置Ajax的请求，默认为异步，true为异步，false为同步(项目都是异步)
    *	4/5. User-Name/User-Pass：用户名密码，一般不用
    */
   

3. 事件监听：一般监听的都是Ready-State-Change事件（Ajax状态发生改变），基于这个时间可以获取服务器返回的Response

   xhr.onreadystatechange=() => {
   	if(xhr.readyState == 4) {
       if((xhr.status >= 200 && xhr.status <= 300) || xhr.status == 304) {
         alert(xhr.responseText);
       } else {
         alert('xhr is unsuccessful' + xhr.status)
       }
     }
   }
   
   // 更多的操作
   xhr.onreadystatechange=() => {
     if(!/^(2|3)\d{2}&/.test(xhr.status)) return; // => 如果不是2 3开头的状态码，证明信息获取失败，直接返回空
     
     if(xhr.readyState == 2) {
       let time = xhr.getResponseHeader('date');
       console.log(new Date(time));// => 把time字符串转换成Date对象，并且会自动转换成北京时间
     }
     
   	if(xhr.readyState == 4) {
       if((xhr.status >= 200 && xhr.status <= 300) || xhr.status == 304) {
         alert(xhr.responseText);
       } else {
         alert('xhr is unsuccessful' + xhr.status)
       }
     }
   }
   

4. 发送Ajax请求：从这开始，Ajax开始执行

   xhr.send([请求主体内容])  // get请求可以传null，post请求传递json数据或url参数格式的数据
   

Ajax对象状态码

0 => UNSENT（unset），刚创建Ajax对象

1 => OPENED（opend），执行.open操作，已经配置好Ajax对象

2 => LOADING（loading），执行.send操作后，开始ajax请求，服务器把响应头返回之后，客户端接收，状态码才变成2（服务器的响应头信息被客户端接收，包括服务器信息，http状态码）

3 => HEADERS_RECEIVED（headers_receive），响应主体内容正在被返回

4 => DONE（done），响应主体已经被客户端接收

XHR的属性方法

属性

1. xhr.response 响应主体内容

2. xhr.responseType 相应主题内容的数据格式（客户端完成）

3. xhr.responseText 响应主体的内容是字符串

4. xhr.responseXML 响应主体的内容是XML文档

5. xhr.status 返回是的HTTP状态码

6. xhr.statusText 返回是的HTTP状态码的描述

7. xhr.timeout 设置请求超时时间

   // 设置超时时间，当请求时间超过这个时间则自动中断ajax请求
   xhr.timeout = 100	// 单位为毫秒
   
   // ontimeout是一个监听函数，能够在timeout的时候触发
   xhr.ontimeout = () => { alert('超时了') };
   

8. xhr.withCredentials 是否允许跨域（Flase）

方法

1. xhr.abort() 设置强制中断Ajax请求

   // 立即中断Ajax请求
   xhr.abort()
   
   // onabort是一个监听函数，能够在Ajax被abort函数中断的时候触发
   xhr.onabort = () => { alert('Ajax被中断了') };
   

2. xhr.getAllResponseHeaders() 获取所有响应头信息

3. xhr.getResponseHeader([key]) 获取key对应的响应头信息

   // 获取响应头中服务器的信息
   xhr.getResponseHeader('date')
   

4. xhr.setRequestHeader() 设置请求头

   xhr.setRequestHeader('myheaders', 'nameagesex')	// 这一步必须写在open也就是配置ajax后面
   

   W3C 的 cors 标准对于跨域请求也做了限制，规定对于跨域请求，客户端允许获取的response header字段只限于“simple response header”和“Access-Control-Expose-Headers

5. xhr.open() 打开URL请求，进行配置xhr的起始工作

6. xhr.send() 发送Ajax请求

7. xhr.overrideMimeType() 重写MIME类型