AJAX感悟-记2023-5-14夜2：00

2.1. 介绍
2.1.1 定义【重点】
Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)，在客户端使用XMLHTTPRequest对象发异步请求与服务器进行交互。

2.1.2 传统请求的问题【了解】
客户端(浏览器)在没有收到服务器返回的响应之前，客户端一直处于在线等待状态，用户体验不好，导致客户没有收到服务端返回响应的原因有：

1)、网络慢；

2)、服务器太忙了；

2.1.3 Ajax优势和作用

ajax的作用：在客户端使用XMLHTTPRequest对象发异步请求与服务器进行交互；

ajax的优势：用户体验好，减轻服务端的压力；

2.1.4 Ajax请求与传统请求的区别：

• 传统方式请求：

• ajax方式请求：【重点】

  ajax原理，见下图：【重点】

  

  2.1.5 应用场景：

  只要是页面中局部更新内容都可以使用ajax进行处理。

  2.1.5.1 表单验证：

  2.1.5.2 数据分页显示： 

  2.2. 原理

  2.2.1 方法

  2.2.1.1 XMLHttpRequest

  语法：

   let xhr =new XMLHttpRequest();

  描述：创建 ajax对象

  2.2.1.2 open

  语法：

  xhr.open(method,url,async)
  描述：规定请求的类型、URL 以及是否异步处理请求。

  2.2.1.3 send

  语法：

  xhr.send(string)
  描述：将请求发送到服务器。string：仅用于 POST 请求

  2.2.2 属性
  2.2.2.1 readyState

  语法：

  xhr.readyState
  描述：在创建ajax对象，配置ajax对象，发送请求，以及接收完服务器端响应数据，这个过程中的每一个步骤都会对应一个数值，这个数值就是ajax状态值。

  包含的状态值：

  (1)0：请求未初始化，还没有调用open

  (2)1：请求已经建立，但是还没有发送send

  (3)2：请求已经发送

  (4)3：请求正在处理中，通常响应中已经有部分数据可以用了

  (5)4：响应已经完成，可以获取并使用服务器的响应

  2.2.2.2 status

  语法：

  xhr.status
  描述：无论AJAX访问是否成功，由HTTP协议根据所提交的信息，服务器所返回的HTTP头信息代码，该信息使用“ajax.status”所获得；（由数字1XX,2XX三位数字组成)

  常见状态码：200，304，404，500

  2.2.2.3 responseText

  语法：

  xhr.responseText
  描述：获得来自服务器的响应

  2.2.3 事件
  语法：

  xhr.onreadystatechange  = callback
  描述：当请求被发送到服务器时，每当 readyState 改变时，就会触发 onreadystatechange 事件

  2.3 实现步骤
  (1)创建Ajax对象

  (2)Ajax请求的地址与请求方式

  (3)发送请求

  (4)获取服务器响应给客户端的数据

  (5)处理服务器响应数据JSON.parse和JSON.stringify

  完整案例
  2.4. ajax的get和post传参
  2.4.1 get
  语法：

  xhr.open('get', 'http://www.api.com?username=ujiuye&password=123456')
  描述：get传参只需要在url地址后按照?key=value格式进行传递

  代码案例：
   

   
  
  
     
     
     
     
  
  
     

  帐号： 
  
     
  密码：
  
     
  密码：
  
     
  
     
  
  

  2.4.2 post

  语法1:xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded') 
  xhr.send('username=ujiuye&password=123456');

• 语法2：xhr.setRequestHeader('Content-Type', 'application/json') 
  let data = {username:'ujiuye',password:'123456'}
  xhr.send(JSON.stringify(data))

  描述：使用setRequestHeader设置响应头，并传递对应的post参数

  代码案例：
  
  
     
     
     
     
  
  
     

  帐号： 
  
     
  密码：
  
     
  密码：