允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax.
一、AJAX
1、介绍
JavaScript：更新局部的网页
XML：一般用于请求数据和响应数据的封装
XMLHttpRequest对象：发送请求到服务器并获得返回结果（AJAX核心）
CSS：美化页面样式
异步：发送请求后不等返回结果，由回调函数处理结果
AJAX属于异步操作
2、好处：
避免网页频繁刷新造成的不良用户体验。
减少刷新将会减少服务器的执行压力。
此种交互方式提高服务器程序的公用性。
3、异步刷新技术
二、HTTP协议（超文本传输协议）
HTTP是一个基于请求与响应模式的、无状态的、应用层的协议，常基于TCP的连接方式，绝大多数的Web开发，都是构建在HTTP协议之上的Web应用。
1、响应模式
2、主要特点
1.支持客户/服务器模式。
2.简单快速：客户向服务器请求服务时，只需传送请求方法和路径。请求方法常用的有GET、HEAD、POST。每种方法规定了客户与服务器联系的类型不同。由于HTTP协议简单，使得HTTP服务器的程序规模小，因而通信速度很快。
3.灵活：HTTP允许传输任意类型的数据对象。正在传输的类型由Content-Type加以标记。
4.无连接：无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求，并收到客户的应答后，即断开连接。采用这种方式可以节省传输时间。
5.无状态：HTTP协议是无状态协议。无状态是指协议对于事务处理没有记忆能力。缺少状态意味着如果后续处理需要前面的信息，则它必须重传，这样可能导致每次连接传送的数据量增大。另一方面，在服务器不需要先前信息时它的应答就较快。
3、请求request
- 1、HTTP请求包结构
http请求由三部分组成，分别是：请求行、请求头部、请求包体(正文)
请求行以一个方法符号开头，以空格分开，后面跟着请求的URI和协议的版本，
格式：Method Request-URL HTTP-Version CRLF
Method：表示请求方法；
Request-URI：表示一个统一资源标识符；
HTTP-Version：表示请求的HTTP协议版本；
CRLF：表示回车和换行（除了作为结尾的CRLF外，不允许出现单独的CR或LF字符）。
- 2、Http请求方式
方法--------描述
GET--------请求指定url的数据,请求体为空(例如打开网页)。
POST-------请求指定url的数据，同时传递参数(在请求体中)。
HEAD------类似于get请求，只不过返回的响应体为空，用于获取响应头。
PUT--------从客户端向服务器传送的数据取代指定的文档的内容。
DELETE----请求服务器删除指定的页面。
CONNECT---HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器。
OPTIONS---允许客户端查看服务器的性能。
TRACE------回显服务器收到的请求，主要用于测试或诊断。
常用只有Post与Get
4、响应response
- 1、HTTP响应包结构
HTTP响应也是由三个部分组成，分别是：状态行、消息报头、响应正文
格式：
HTTP-Version Status-Code Reason-Phrase CRLF
HTTP-Version：表示服务器HTTP协议的版本；
Status-Code：表示服务器发回的响应状态代码；
Reason-Phrase：表示状态代码的文本描述。
- 2、响应状态码
状态代码有三位数字组成，第一个数字定义了响应的类别，且有五种可能取值：
1xx：指示信息--表示请求已接收，继续处理
2xx：成功--表示请求已被成功接收、理解、接受
3xx：重定向--要完成请求必须进行更进一步的操作
4xx：客户端错误--请求有语法错误或请求无法实现
5xx：服务器端错误--服务器未能实现合法的请求
常见状态代码 --状态描述--说明：
- 200
OK//客户端请求成功 - 400
Bad Request//客户端请求有语法错误，不能被服务器所理解 - 401
Unauthorized//请求未经授权，这个状态代码必须和WWW-Authenticate报头域一起使用 - 403
Forbidden//服务器收到请求，但是拒绝提供服务 - 404
Not Found//请求资源不存在，eg：输入了错误的URL - 405
//方法不被允许 - 500
Internal Server Error//服务器发生不可预期的错误 - 503
Server Unavailable//服务器当前不能处理客户端的请求，一段时间后,可能恢复正常
三、使用Ajax
1、XMLHttpRequest
XHR对象：是
XMLHttpRequest对象的缩写，封装在window对象中，封装了发送AJAX请求、接收响应的属性以及方法。JavaScript对象XMLHttpRequest是整个Ajax技术的核心，它提供了异步发送请求的能力
1、XHR对象的创建：
如果XMLHttpRequest对象存在，则把 xhr 的值设为该对象的新实例。如果不存在，就去检测 ActiveObject 的实例是否存在，如果答案是肯定的，则把微软 XMLHTTP 的新实例赋给 xhr
2、常用方法
3、常用属性
-
setRequestHeader(header,value):设定响应头，响应头用于描述元数据。
--header： 响应头的名字;
如果用 POST 请求向服务器发送数据，需要将 “Content-type” 的首部设置为 “application/x-www-form-urlencoded”.它会告知服务器正在发送数据，并且数据已经符合URL编码了
--value：响应头的值
注意事项：该方法必须在open()之后才能调用 -
onreadystatechange：指定回调函数 -
readystate: XMLHttpRequest的状态信息
-
status：HTTP的状态码（200对应OK，404对应NotFount等）
-
statusText：HTTP状态码的相应文本（OK或NotFount等） -
responseText：获得响应的文本内容，表示一个字符串 -
responseXML：获得响应的XML文档对象，可以解析为DOM对象
就绪状态是4而且状态码是200，才可以处理服务器数据
四、示例
<h2>AJAX请求数据</h2>
<div>
<p id="title"></p>
<i id="content"></i>
</div>
// 1、创建XMLHttpRequest对象
const xhr = new window.XMLHttpRequest;
//2、建立连接 open(请求方式，url地址，是否异步);
xhr.open('GET', 'http://192.168.0.100:8089/api/list', true);
// 3、发送请求 send()
xhr.send();
// 4、接收响应
xhr.onreadystatechange = e => {
// 判断ajax响应状态
if (e.target.readyState == 4) {//readyState=4：响应的内容解析完毕，可以在客户端使用了--完成
// 判断是否响应成功
if (e.target.//xhr.status:获取当前服务器的响应状态 200=>成功
status == 200) {
const pElment = document.getElementById('title');
pElment.innerHTML = e.target.responseText;
} else {//请求出错将状态码显示出来
const iEmlent = document.getElementById('content');
iEmlent.innerHTML = e.target.status;
}
}
}
得到服务器JSON对象：
五、封装调用
- 封装js
let XMLHttpPromiseObj = (method, url, parmas) => {
return new Promise((resovled, rejected) => {
// 1、创建XMLHttpRequest对象
const xhr = new window.XMLHttpRequest;
//2、建立连接 open(请求方式，url地址，是否异步);
xhr.open(method, url, true);
// 如果想要使用post提交数据,必须添加此行
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// 3、发送请求 send()
xhr.send(parmas);
// 4、接收响应
xhr.onreadystatechange = e => {
// 判断ajax响应状态
if (e.target.readyState == 4) {//readyState=4：响应的内容解析完毕，可以在客户端使用了--完成
// 判断是否响应成功
if (e.target.status == 200) {//xhr.status:获取当前服务器的响应状态 200=>成功
let data = e.target.responseText //返回成功的值
resovled(data);
} else {
let err = e.target.status //返回失败的响应码
rejected(`请求错误：${err}`);
}
}
}
});
}
- 使用js
<script src="./AjaxModel.js"></script>//引入js文件
<script>
const contentElment = document.getElementById('content');
const name = 'admin';
const passwd = '123';
const content = `username=${name}&password=${passwd}`;
//直接使用js的方法
const xmlObjPromise = XMLHttpPromiseObj('post', 'http://192.168.0.100:8089/api/login', content);
xmlObjPromise.then(data => {
contentElment.innerHTML = data;
}).catch(err => {
contentElment.innerHTML = err;
})
</script>
六、工具推荐
- JSONview ：使在谷歌浏览器中访问URL地址返回的json数据按照json格式展现出来。
- Postman：网页调试与发送网页HTTP请求的Chrome插件。（调试接口是否能正常使用）
- Fiddler：网络传输发送与接受的数据包进行截获、重发、编辑、转存等操作。（抓包工具，可以查看请求和响应的内容信息等）
