AJAX 入门 - 技术栈

01-AJAX 简介

1.1 什么是 AJAX ？

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 不是新的编程语言，而是一个标准。
AJAX 在不重新加载整个页面的情况下, 和服务器进行数据交互, 进行局部刷新, 也称为局部刷新技术。

1.2 同步和异步

同步: 发送请求, 必须等待响应, 在响应没有返回之前, 客户端什么事情都没法干 ,只能等待响应的返回。
异步: 发送请求, 不必等待响应, 客户端该干嘛干嘛, 当响应返回的时候, 通知客户端来处理响应。
举例：
同步：对讲机: 通话之前要先对号, 接通之后才能通话。
异步：QQ/微信发送信息: 发送完信息, 去看视频; 不需要等待回复, 当对方回复的时候, 会通知来处理响应。
同步: 去照相馆照相, 照完相等清洗照片, 每个2分钟问一下照片洗出来了吗, 直到照片洗出来才去理发。
异步: 去照相馆照相, 照完相等清洗照片; 告诉老板洗出来给我打电话,我过来取; 然后去理发了。
同步请求是刷新整个页面的技术. 响应的时候会返回整个页面的 html 代码.。

异步请求是局部刷新技术, 不会返回整个页面数据, 只会返回页面中的小部分数据。

1.3 AJAX 用于什么场景?

适合于处理响应速度要求特别高的, 或者提高用户体验的功能。
地图类: 导航, 使用同步延时特别高; 使用异步。
秒杀系统: 实时展示商品数量, 还有多久...
提高用户体验表单使用最多: 比如, 用户名唯一性验证。

手机端软件: 都是异步；后端项目: 后台都是异步。

02-AJAX 基础

2.1 创建异步对象

XMLHttpRequest 对象: 用来发送异步请求以及获取响应数据, 它是构造函数

var ajax = new XMLHttpRequest();
console.log(ajax);
// 兼容性处理, 在早期浏览器(IE5, IE6, IE7) , 有兼容问题
// IE5, IE6 内核的浏览器, 使用 ActiveXObject 对象来处理异步请求
if(XMLHttpRequest) { // 若浏览器支持此对象, 使用这个对象来创建
ajax = new XMLHttpRequest();
} else { // IE5, IE6 兼容处理
ajax = new ActiveXObject("Microsoft.HTTP");
}
console.log(ajax);

2.2 发送请求

1）方法介绍

|------------------------------|----------------------------------------------------------------------------------------------------------|
| 方法 | 描述 |
| open(method,url,async) | 配置请求, 规定请求方式、请求地址以及是否异步处理请求。 * method：请求方式；GET 或 POST * url：请求地址 * async：true（异步）或 false（同步）, 默认异步 |
| send(string) | 将请求发送到服务器。 * string：仅用于 POST 请求, 用于传递参数 |

2）开发步骤