GL0000215-1560x1040.jpg
什么是 Ajax
在很久很久以前，当用户在网页上填完一张表单并点击了提交，这张表单中的数据会被发送到服务器。服务器在接受表单后会对表单进行处理，然后返回一个新网页。这种方式不得不说有些反人类，如果我不是提交表单，而是想在点击一个按钮后进行某些数据的刷新，那么整个也必须刷新一遍。如下图，当我点击淘宝网某个模块想要刷新男装，如果整个网页都要刷新一遍，估计用不了几次顾客就会疯掉。
捕获.JPG
万幸当人们遇到问题时，也会想尽办法解决问题。2005 年，Jesse James Garrett 发表了文章 Ajax: A New Approach to Web Applications。在文章他提出了 Ajax 这个概念。Ajax 是 Asynchronous JavaScript and XML 的缩写，中文意思是异步的 JavaScript 和 XML。这一技术能够向服务器发送请求并取回必须的数据，并在客户端用 JavaScript 处理数据，避免了每次获取数据都要刷新页面。Ajax 并不是单一的技术，而是有机地利用了一系列相关技术。在 Ajax 这个概念提出之前，类似的技术已经存在了很长时间，只不过在 Ajax 这个概念提出之后，这种浏览器有服务器通信的技术才变得火热起来。
如何使用 Ajax
Ajax 技术的核心是 XMLHttpRequest 对象，简称 XHR。这个对象最初是由微软公司发明并用于 IE5.0 中，其他浏览器后来都实现了该特性。Ajax 的使用需要创建 XMLHttpRequest 对象并对该对实例化的对象进行一系列的设置。XMLHttpRequest 对象在不同浏览器的创建方法有一些不同（主要是 IE 不同），这里只使用最简单的方法。先看一下下方的代码：
let xhr = new XMLHttpRequest(); //实例化一个用于请求的对象
xhr.onreadystatechange = function() { //每次请求状态改变就调用该函数
if (xhr.readyState == 4) { //如果请求步骤完成进行该处理
if ((xhr.status >= 200 && xhr.status <= 300) || xhr.status == 304) { //如果为成功响应展示响应的文本，否则弹出错误提示
alert(xhr.responseText);
} else {
alert("error");
}
}
}
xhr.open("get","test.php",true); //启动一个请求准备发送
xhr.send(null); //发送请求
下面说明一下上方代码中的对象：
- readyState 表示请求或响应过程中当前活动阶段（0：未初始化；1：启动；2：发送；3：接收；4：完成）
- onreadystatechange 每当 readyState 改变时都会触发该事件，所以上方代码在该事件中检测请求是否完成
- status 响应的 HTTP 状态，请求完成不代表请求正确。所以需要检查 status 属性，以确定响应成功。（一般以 200 为成功标志，304 代表请求资源未被修改）
- responseText 指作为响应主体被返回的文本
- open 启动一个请求准备发送，三个参数分别为 请求方式，请求地址，请求是否异步
- send 发送请求及要携带的数据，如果不发送数据则以 null 为参数
Ajax 与数据格式
对象名 XMLHttpRequest 之所以包含 XML 字符只是为了兼容 web, 它实际上支持任何基于文本的数据格式。如 JSON、form-data。XML 只是一种选择，实际上并不常用。
Ajax 与跨域
同源策略对 XHR 有一个限制：一般情况下，XHR 只能访问与包含它的页面位于同一个服务器的资源。这种安全策略在防止了某些恶意行为的同时，也阻止了正常的跨域请求。XHR 可以通过发送合适的 CORS(跨域资源共享)来跨域访问。大部分浏览器的新版本已经支持 XHR 的这种新特性。这种方式并不需要你多做什么，只要在 open 中加入对的 URL 即可。实现CORS通信的关键是服务器。修改服务器代码，只要服务器实现了CORS接口，就可以跨域通信。
Ajax 与拓展
基于服务器端推送事件的 Coment 是对 Ajax 的拓展。通过 EventSource 或 WebSocket 对象实现相关功能。Ajax 和 Coment 的区别是数据的获得方式，一个是向服务器请求数据，一个是从服务器向客户端推送数据。
前端交流 QQ 群：669826425
网友评论