AJAX详解

1、ajax介绍

1.1、什么是ajax

全称：Asynchronous JavaScript And XML（异步 JavaScript 及 XML）

Ajax的作用：实现异步请求的技术。

 

什么是同步请求？

场景：页面上有一个a标签，用户点击a标签，浏览器发出一个请求，然后服务器给出一个响应。

(请求，其实是用户的操作，触发的)

 

什么是异步（不同步）请求?

场景：在用户注册的时候，用户首先输入用户名，接下来用户继续填写其他注册信息，与此同时，浏览器自动发送了一个请求，将用户输入的用户名发送给服务器，去校验是否可用.

(请求，是浏览器自己发送的，与用户没有关系)

 

同步与异步区别的理解：

1.同步请求：之前我们写的注册案例，依次写用户名，密码，等等所有信息之后，手动按提交按钮，才会把浏览器上的数据传到服务器进行校验用户名是否重复，然后在浏览器上提示用户名是否重复的信息，这种方式一速度较慢，需要将全部信息写完之后刷新整个页面提交到服务器，如果没有通过验证还得重新填写信息再提交，比较浪费流量，二则是如果没有通过验证所有的信息都没有了还得重新填写，太麻烦

2.异步请求：使用ajax的话，将用户名文本框绑定一个鼠标离焦事件，事件里用ajax提交用户名到服务器校验，这个验证是我们鼠标离开用户名文本框浏览器自动向服务器发出请求校验的，我们在填写别的信息时，服务器会将校验信息发送给浏览器提示是否重复信息，这样既省流量，又可以只修改用户名即可，最后验证通过才可以提交全部信息；

 

为什么需要异步请求，或者说那些功能必须使用异步请求技术来实现？

在不刷新页面（使用a标签发送请求和使用form表单发送请求，这两种请求都会，刷新页面）的情况下，发送请求，接收响应，然后修改部分的页面，这样的需求需要异步请求实现。

总结：在不使用a标签和form表单发送请求的情况下，使用异步请求。

 

在这个需求中，发送请求应该谁来做？

浏览器。

 

让浏览器来帮助发送这个请求，那么程序员如何与浏览器沟通，让它帮助我们发送请求？

Javascript技术。

 

企业为什么特别喜欢使用ajax?

钱。企业的网络通信费用，按流量计费，那么使用ajax它的数据量小，所以省钱。

ajax它的数据量小——因为他不重新加载整个页面（加载部分）

Ajax因为数据量小，响应速度快，用户体验好。

 

 

1.2、ajax运行机制

 

在页面不刷新的情况下，向服务器发送请求，达到页面和后台的异步交互。

现在主流(IE、谷歌、火狐，其他的国产浏览器一般都是使用谷歌浏览器内核)的浏览器都有ajax引擎实现——现在ajax技术，都被主流浏览器实现，我们自己不用去写Ajax引擎，这个引擎已经存在在浏览器中。我们可以理解为浏览器都内置有ajax的核心对象，我们不需要自己创建核心对象，只要获取对象使用即可；

相当于大家已经有了法拉利，不用自己再造一个，只需学会使用就可以。

 

执行步骤：

1. 准备页面请求，创建XMLHttpRequest对象
2. 使用XMLHttpRequest对象的open（）和send()方法发送资源请求给服务器

             ……………………………后台计算

3.onreadystatechange函数，状态改变时发送数据回客户端，使用XMLHttpRequest对象的responseText或responseXML属性获取服务器的响应