5分钟学会Ajax基本用法

引言：

有很多童鞋，在WEB前端面试的时候，常会被Ajax问题难住，其实Ajax没有你们理解的那么难，现在我讲带着大家重新来回顾一下知识点：随便再给大家普及一下小常识，今天咱们聊的就是怎么快速掌握Ajax。

小常识科普：

Ajax全称是：Asynchronous JavaScript and Xml,常用于B/S架构上，是实现客户端与服务器端异步交互的主要手段。通常浏览器中的交互模式一般分为：同步和异步交互两类。那它们之间有哪些差别呢？

• 同步交互：

指客户端向服务器端发送请求，到服务器端进行响应，这个过程用户不能做其它的事情，只有等待请求完成。

• 异步交互：

指客户端向服务器端发送请求，到服务器端进行响应，这个过程用户可以做其它的事情，不用等待请求完成。

这些都是请求交互过程中的差别，那么同步交互和异步的具体区别是什么呢?这时候就要把两者拿出来做比较了，毕竟没有比较就没有伤害，那我们开始他们俩者之间的伤害吧！开始！！！

同步交互和异步交互的区别：
同步交互：
        1.执行速度相对异步交互慢。
         2.响应的是完整的HTML页面。
异步交互：
         1.执行的速度相对同步交互要快。
        2.响应的是部分数据。

接下来，我将带着大家来亲自体验一下Ajax的魅力。再开使用做demo之前，我们还是得来点基本知识点，即然说好了要体验：那么我们必须先来做一个，再创建Ajax前，我们必需要了解Ajax的核心对象，XMLHttpRequest,Ajax所有的属性和方法以及事件都需要在XMLHttpRequest对应中进行调用。不然的话，这个事情就办不成了。

明白了Ajax对象，我们就来创建一个Ajax核心对象。

如何创建Ajax核心对象？？？

通常情况下，我们会首先创建一个XMLHttpRequest对象的函数，然后在用某个变量去调用这个函数进行创建。但是需要注意的是这个函数里的判断。那我们就直接来上代码：

再来回顾一下所要用到的知识点：

属性	描述
readyState	服务器端的响应状态
status	服务器端状态码
responseText	服务器端返回的文本内容
responseXML	服务器端返回的XML格式数据
方法	描述
abort()	取消请求
getAllRequestHeaders()	获取响应的所有http头
getRequsetHeader()	获取指定响应的http头
setRequestHeader()	设置指定请求的http头
open(method,url)	创建链接
method:get/post	（常用）
send()	发送链接（如果open的method为get，send里的参数为null）
事件	描述
onreadystatechange	监听事件，当服务器的状体改变时就会触发该事件(readyState)

总结：

 

 

其实，实现ajax操作非常的简单，我们现在是以异步加载的效果为例；所以同学们在学习的时候可以按照下面的几个步聚去写：

 AJAX请求步骤

1. 创建ajax对象
2. 配置ajax，创建http连接
3. 创建ajax对象变化的监听
4. 向服务器发送请求
5. 接收服务器端的响应数据

这几个步聚小伙伴们都GET到了吗？没有理解的同学可以在下面评论区留言哦！