AJAX知识梳理

一、AJAX简介

　　1、是什么

　　　　AJAX 并非编程语言。

              AJAX 仅仅组合了：

　　　　      浏览器内建的 XMLHttpRequest 对象（从 web 服务器请求数据）

　　　　　　JavaScript 和 HTML DOM（显示或使用数据）

　　2、优缺点

　　　　优点

　　　　1）无刷新获取数据

　　　　2）允许我们根据用户事件来更新部分页面内容

　　　　缺点

　　　　1）没有历史浏览，不能回退

　　　　2）存在跨域问题

　　　　3）SEO不友好

　　3、如何工作

　　　　1）网页中发生一个事件（页面加载、按钮点击）

　　　　2）由 JavaScript 创建 XMLHttpRequest 对象

　　　　3）XMLHttpRequest 对象向 web 服务器发送请求

　　　　4）服务器处理该请求

　　　　5）服务器将响应发送回网页

　　　　6）由 JavaScript 读取响应

　　　　7）由 JavaScript 执行正确的动作（比如更新页面）

　　　4、基本操作

　　　　1）创建对象

　　　　　　const xhr = new XMLHttpRequest()；

　　　　2）初始化 ——设置请求方式method,和请求路径url

　　　　　　xhr.open(method,url)

　　　　3）发送

　　　　　　xhr.send();

　　　　4）事件绑定——处理服务端返回的结果

　　　　　　xhr.onreadystatechange = function(){

　　　　　　　　// 判断响应状态码

　　　　　　　　if(xhr.status >= 200 && xhr.status < 300){    // 成功

　　　　　　　　　　//   处理响应体——xhr.response

　　　　　　　　}

　　　　　　}

　　　5、设置请求参数

　　　　GET: 在url后面通过 ? 连接，多个参数用 & 连接

　　　　POST: 在send里添加参数用 &或： 连接或直接字符串等任意类型，格式，只要服务端有对应的处理方式