目录
一.AJAX简介
服务器向浏览器传输数据时，浏览器需要跳转到一个新的"URL "或者"重新渲染网页 "，才可以接收来自服务器的数据，这对于现代用户来说是不友好的，因为观感极差
那么有没有一种办法可以使浏览器接收服务器的数据 ，并且不更新网页 只是动态的更新网页 的部分数据呢？
随着这个问题"AJAX"应运而生，使用"AJAX"可以做到以下事情：
- 不刷新页面更新网页
- 在页面加载后从服务器请求数据
- 在页面加载后从服务器接收数据
- 在后台向服务器发送数据
二.XMLHttpRequests对象
2.1XMLHttpRequests对象简介
XMLHttpRequests对象是AJAX的基石
使用 XMLHttpRequests对象****允许前端向后端发送一个数据请求用来获得数据
这个数据请求的过程可以分为下面"四大步"：
- 创建XMLHttpRequests对象
- 定义回调函数
- 打开XMHttpRequests对象
- 向服务器发送请求
2.2创建XMLHttpRequests对象
创建XMLHttpRequests对象的语法：
var myXMLR = new XMLHttpRequests();
2.3定义回调函数
回调函数是作为参数传递给另一个函数的函数
定义回调函数我们可以使用XMLHttpRequests对象提供的"onload()"函数，该函数用来指定当请求响应后应该执行的函数
xhttp.onload = function(){
//当相应准备就绪时要做什么
}
2.4发送请求
向服务器发送请求，我们可以使用"open() "方法来打开XMLHttpRequests 对象，再使用"send()"方法来发送请求
xhttp.open("open","ajax_info.txt");
xhttp.send();
2.5XMLHttpRequests对象方法介绍
|-------------------------------------|--------------------------------------------------------------------------------------------------------------------|
| 方法 | 描述 |
| new XMLHttpRequests() | 创建新的XMLHttpRequests对象 |
| abort() | 取消当前请求 |
| getAllResponseHeaders() | 返回头部信息 |
| getReponseHeader() | 返回特定的头部信息 |
| open(method,url,async,user,psw) | 规定请求 * method:请求类型GET或POST * url:文件位置 * async:true(异步)或false(同步) * user:可选的用户名 * psw:可选的密码 |
| send() | 向服务器发送请求，用于GET请求 |
| send(string) | 向服务器发送请求，用于POST请求 |
| setRequestHeader() | 将标签/值对添加到要发送的标头 |
2.6XMLHttpRequests对象属性
| 属性 | 描述 |
|---|---|
| onload | 定义接收到(加载)请求时要调用的函数 |
| onreadystatechange | 定义当readyState属性发生变化时调用的函数 |
| readyState | 保存XMLHttpRequests的状态 * 0：请求未初始化 * 1：服务器连接已建立 * 2：请求已收到 * 3：正在处理请求 * 4：请求已完成响应且已就绪 |
| responseText | 以字符串形式返回响应数据 |
| responseXML | 以XML数据返回响应数据 |
| status | 返回请求的状态号 * 200："ok" * 403："Forbidden" * 404："Not Found" |
| statusText | 返回状态文本,比如("OK"、"Not Found"等) |
ps ："当readyState为4且status为200时，响应就绪"
三.向服务器发送请求
3.1发送请求
在上面我们已经提到过，可以使用"open() "和"send()"方法搭配向服务器发送请求
|-------------------------------------|--------------------------------------------------------------------------------------------------------------------|
| open(method,url,async,user,psw) | 规定请求 * method:请求类型GET或POST * url:文件位置 * async:true(异步)或false(同步) * user:可选的用户名 * psw:可选的密码 |
| send() | 向服务器发送请求，用于GET请求 |
| send(string) | 向服务器发送请求，用于POST请求 |
3.2使用GET还是POST
在大多数情况下，GET 比POST更简单更快
但在以下情况请考虑使用POST：
- 缓存文件不是选项(更新服务器上的文件或数据库)
- 向服务器发送大量数据(POST无大小限制)
- 发送用户输入(可包含未知字符)，POST比GET更强大更安全
3.3使用GET来发送信息
如果想要使用GET 来发送信息，可以在URL中构造信息：
javascript
xhttp.open("GET","demo.asp?fname=Bill&&name=Gates",true);
xhttp.send();3.4POST请求
一条简单的POST请求：
xhttp.open("POST","demo_post.asp",true);
xhttp.send();
如果需要像HTML 表单那样POST数 据，请通过setRequestHeader() 添加一个HTTP头部 ，并在send() 方法中定义要发送的数据
例如：
javascript
xhttp.open("POST","ceshi.asp",true);
xhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhttp.send("fname=Bill&&name=Gates");