前端程序员进阶：详解Ajax

AJAX全称“Asynchronous JavaScript and XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。今天就给大家详解一下Ajax，前端程序员进阶必备哦！

AJAX有机地包含了以下几种技术：基于web标准（standards-based presentation）XHTML+CSS的表示；使用 DOM（Document Object Model）进行动态显示及交互；

使用 XML 和 XSLT 进行数据交换及相关操作； 使用 XMLHttpRequest 进行异步数据查询、检索；

使用 JavaScript 将所有的东西绑定在一起。

Ajax的实现流程是怎样的？

创建XMLHttpRequest对象，也就是创建一个异步调用对象。

创建一个新的HTTP请求，并指定该HTTP请求的方法、URL及验证信息。

设置响应HTTP请求状态变化的函数。

发送HTTP请求。

获取异步调用返回的数据。

使用JavaScript和DOM实现局部刷新。

基本步骤：

var xhr =null;//创建对象

if(window.XMLHttpRequest){

xhr = new XMLHttpRequest();

}else{

xhr = new ActiveXObject("Microsoft.XMLHTTP");

}

xhr.open(“方式”,”地址”,”标志位”);//初始化请求 `请输入代码`

xhr.setRequestHeader(“”,””);//设置http头信息

xhr.onreadystatechange =function(){}//指定回调函数

xhr.send();//发送请求

默认情况下，在发送XHR请求的同时，还会发送下列头部信息

Accept: 浏览器能够处理的内容类型

Accept-Charset: 浏览器能够显示的字符集

Accept-Encoding: 浏览器能够处理的压缩编码

Accept-Language: 浏览器当前设置的语言

Connection: 浏览器与服务器之间连接的类型

Cookie: 当前页面设置的任何Cookie

Host: 发出请求的页面所在的域

User-Agent: 浏览器的用户代理字符串

Referer: 发出请求的页面的URI

1、open()方法的第一个参数用于指定发送请求的方式，这个字符串，不区分大小写，但通常使用大写字母。

"GET"和"POST"是得到广泛支持的"GET"用于常规请求，它适用于当URL完全指定请求资源，当请求对服务器没有任何副作用以及当服务器的响应是可缓存的情况下。"POST"方法常用于HTML表单。它在请求主体中包含额外数据且这些数据常存储到服务器上的数据库中。相同URL的重复POST请求从服务器得到的响应可能不同，同时不应该缓存使用这个方法的请求。除了"GET"和"POST"之外，参数还可以是"HEAD"、"OPTIONS"、"PUT"。而由于安全风险的原因，"CONNECT"、"TRACE"、"TRACK"被禁止使用。

2、open()方法的第二个参数是URL，该URL相对于执行代码的当前页面，且只能向同一个域中使用相同端口和协议的URL发送请求。如果URL与启动请求的页面有任何差别，都会引发安全错误。

3、open()方法的第三个参数是表示是否异步发送请求的布尔值，如果不填写，默认为true，表示异步发送。

4、如果请求一个受密码保护的URL，把用于认证的用户名和密码作为第4和第5个参数传递给open()方法。

send()

send()方法接收一个参数，即要作为请求主体发送的数据。调用send()方法后，请求被分派到服务器。

如果是GET方法，send()方法无参数，或参数为null；如果是POST方法，send()方法的参数为要发送的数据。

什么是同步请求：(false)

同步请求即是当前发出请求后，浏览器什么都不能做，必须得等到请求完成返回数据之后，才会执行后续的代码，相当于是排队，前一个人办理完自己的事务，下一个人才能接着办。也就是说，当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载，页面处于一个假死状态，当这个Ajax执行完毕后才会继续运行其他代码页面解除假死状态(即当Ajax返回数据后，才执行后面的function)。

什么是异步请求：(true)

异步请求就当发出请求的同时，浏览器可以继续做任何事，Ajax发送请求并不会影响页面的加载与用户的操作，相当于是在两条线上，各走各的，互不影响。

一般默认值为true，异步。异步请求可以完全不影响用户的体验效果，无论请求的时间长或者短，用户都在专心的操作页面的其他内容，并不会有等待的感觉。

下面来区别一下同步和异步有什么不同：

异步：在异步模式下，当我们使用Ajax发送完请求后，可能还有代码需要执行。这个时候可能由于种种原因导致服务器还没有响应我们的请求，但是因为我们采用了异步执行方式，所有包含Ajax请求代码的函数中的剩余代码将继续执行。如果我们是将请求结果交由另外一个JS函数去处理的，那么，这个时候就好比两条线程同时执行一样。

同步：在同步模式下，当我们使用Ajax发送完请求后，后续还有代码需要执行，我们同样将服务器响应交由另一个JS函数去处理，但是这时的代码执行情况是：在服务器没有响应或者处理响应结果的JS函数还没有处理完成return时，包含请求代码的函数的剩余代码是不能够执行的。就好比单线程一样，请求发出后就进入阻塞状态，直到解除阻塞，余下的代码才会继续执行。

Ajax的优点：

1、最大的一点是页面无刷新，用户的体验非常好。

2、使用异步方式与服务器通信，具有更加迅速的响应能力。。

3、可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，Ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。

4、基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。

5、Ajax可使因特网应用程序更小、更快，更友好。

Ajax的缺点：

1、Ajax不支持浏览器back按钮。

2、安全问题Ajax暴露了与服务器交互的细节。

3、对搜索引擎的支持比较弱。

4、破坏了程序的异常机制。

来源：技术学派头条号