关于Ajax的那些事

什么是Ajax？

• AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

• AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

• AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

• AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

AJAX 能做什么？

• 运用 XHTML+CSS 来表达资讯；

• 运用 JavaScript 操作 DOM（Document Object Model）来执行动态效果；

• 运用 XML 和 XSLT 操作资料;

• 运用 XMLHttpRequest 或新的 Fetch API 与网页服务器进行异步资料交换；

注意：AJAX 与 Flash、Silverlight 和 Java Applet 等 RIA 技术是有区分的。

在生活中，我们在上网时经常会遇到这种情况，如我们在注册一个华为云账号时，输入两次密码，在我们没有点击提交按钮的时候，网页会提示我们输入密码的格式不对或两次输入的不一致；还有，在百度搜索华为云词条时，我们没有按下回车，页面就会根据我们输入的词条自动下搜索并呈现出搜索后的结果。

   简而言之，Ajax就是一种在无需重新加载整个页面的情况下，能够更新部分页面的技术。以上类似的情况，就是网页应用Ajax的体现，Ajax就是这些功能的核心技术。

    要学习Ajax，就要先明白同步与异步这个概念。程序里面的同步和异步和我们现实生活理解不太一样，一般我们对同步的理解是同时做很多事情，但程序中的同步是按照任务的顺序执行任务，前一个任务没有执行结束，下一个任务不会执行，要等待上一个任务执行结束。异步就是同时可以执行多个任务。

但是，同步和异步也有各自的优缺点：

1. 同步的执行效率会比较低，耗费时间，但有利于我们对流程进行控制，避免很多不可掌控的意外情况；
2. 异步的执行效率高，节省时间，但是会占用更多的资源，也不利于我们对进程进行控制。

对于ajax,他的核心技术是对象,它的整个作用过程其实是当前页面继续工作,可以总结为先创建XMLHttpRequest对象,然后连接服务器,发送请求,最后接受服务器发送过来的数据,好了,XMLHttpRequest是一个可以让我们前端和后端连接起来的对象,我们首先来介绍创建一个XMLHttpRequest对象语法。

创建 XMLHttpRequest 对象的语法：

var xhr = new XMLHttpRequest();

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：

var xhr = new ActiveXObject('Microsoft.XMLHTTP');

为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject。

接下来我们学习一下Ajax中的向服务器发送请求与服务器响应。

服务器发送请求：

XMLHttpRequest对象用于和服务器交换数据。如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：

open(method,url,[aycs])：初始化Ajax对象 (打开)

1. method:http请求方式；
2. get/posturl:请求的服务器地址；
3. aycs:同步与异步。

应用格式为：

xhr.open();

xhr.send();

关于请求中的GET请求，这里简单写一段代码例子：

请求的地址为：

var url = 'baidu';

open参数为get

xhr.open('get',url);

设置请求头信息

xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');

设置get请求参数值

xhr.send('names='+inp.value);

而请求中的POST请求，我们只要在open方法中把GET方法改为POST方法即可。

这里顺带提一嘴选GET 还是 POST？

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。

然而，在以下情况中，请使用 POST 请求：

• 无法使用缓存文件（更新服务器上的文件或数据库）

• 向服务器发送大量数据（POST 没有数据量限制）

• 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

我们再来介绍一个设置请求头的方法，setRequestHeader(header,value)：设置请求头信息；

• header代表请求头名称；
• value 表示请求头的值。

如果需要获取全部响应头信息，我们需要用：xhr.getAllResponseHeaders()这个方法；如果需要获取指定头信息，我们需要用：xhr.getResponseHeader('key')。

服务器响应：

如需获得来自服务器的响应，使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。下面，我先来介绍两个属性：

• responseText：如果服务器端返回字符串，使用responseText进行接收；
• responseXML ：如果服务器端返回XML数据，使用responseXML进行接收。

这里我再来介绍一个最重要的知识点；

readystste属性，代表Ajax的状态码；从0-4，有五种情况：

• 0：表示对象已建立，但未初始化，只是 new 成功获取了对象，但是未调用open方法
• 1：表示对象已初始化，但未发送，调用了open方法，但是未调用send方法
• 2：已调用send方法进行请求
• 3：正在接收数据（接收到一部分），客户端已经接收到了一部分返回的数据
• 4：接收完成，客户端已经接收到了所有数据

onreadystatechange 事件：

当请求被发送到服务器时，我们需要执行一些基于响应的任务。

每当 readyState 改变时，就会触发 onreadystatechange 事件，当 readyState 状态码发生改变时所触发的回调函数。readyState 属性存有 XMLHttpRequest 的状态信息。

小结：

关于Ajax的那些事就介绍到这里了，大概把Ajax的基础过了一遍，同步和异步， XMLHttpRequest对象，post和get方法，向服务器发送请求与服务器响应等。文章中可能会有一些知识点被漏掉,毕竟是自己的一个小总结,希望能对大家有点小帮助！