Ajax(一)

一.使用Ajax

// 1. 创建一个 XMLHttpRequest 类型的对象 —— 相当于打开了一个浏览器

var xhr = new XMLHttpRequest();

// 2. 打开与一个网址之间的连接 —— 相当于在地址栏输入访问地址

xhr.open('GET', 'http://127.0.0.1:3000/time');

// 3. 通过连接发送一次请求 —— 相当于回车或者点击访问发送请求

xhr.send(null);

// 4. 当接收到数据的时候

xhr.onload = function () {

  // 通过 xhr 的 responseText 获取到响应的响应体

  console.log(this.responseText)

};

二.常用的两种请求方式

GET方式：

浏览器地址栏输入URL，按回车

点击a标签，跳转到另一个页面

method属性等于get的表单提交（注意，如果表单没有指定method，则method的值默认为get）

通过Ajax发送的GET方式的请求

open(‘请求方式’，‘请求地址’)；

POST方式：

method属性等于post的表单提交

通过Ajax发送的POST方式的请求

---

Ajax发送post请求

   

   

---

验证用户名案例：

   

   

   

---

软件app-win中封装好的接口列表

请求方式     接口地址                参数                             返回值

GET              /time                                                         时间戳 [string]

GET              /query-get              任意                           发送给服务器的参数 [string]

POST           /query-post            任意                           提交给服务器的数据 [string]

POST           /checkUser             username:[string]      true或false

GET              /big-data                                                    返回一百万次时间戳 [string]

GET             /getMsg                                                      返回所有留言[JSON]

POST          /addMsg                 name:[string ]

                                                    content:[string]              添加成功：true
添加失败：false

POST           /fd                           FormData对象                 提交给服务器的数据 [JSON]

---

AJAX 进阶

在通过Ajax向服务器发送请求的过程中，XMLHttpRequest对象的状态会发生多次变化，由于readystatechange

事件是在 xhr 对象状态变化时触发（不单是在得到响应时），也就意味着这个事件会被触发多次。

xhr 对象的状态

有5种

用readyState属性表示

0/1/2/3/4   4响应体下载完成，可以直接使用