JavaScript第八弹——Ajax快到碗里来

Hello小伙伴们大家好，我们了解了怎样写一个网站结构，了解了怎样装饰页面，了解了怎样给页面添加事件，但是又怎样从后台获取数据呢，今天给大家带来的是作为前后端数据桥梁的Ajax的用法。

Ajax简介

首先，我们要知道什么是Ajax。

AJAX 其实就是一种异步的JavaScript 和 XML的结合，用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。这其实对网页的渲染效率起到了非常大的帮助。下图是从网上揪过来的一张图，非常详细的展现出了在数据传输过程中，Ajax起到了一个什么样的工作。

（就是browser向server发起请求，server返回给browser）

Ajax步骤

反正我们最后的目的是通过Ajax完成前后端的交互，那么我们就先了解一下整个数据传输流程吧～～

要完成Ajax的数据传输需要以下步骤：

(1)创建异步调用对象：XMLHttpRequest对象；

(2)创建一个新的HTTP请求，并指定请求的方法、URL及验证信息；

(3)设置响应HTTP请求状态变化的函数；

(4)发送HTTP请求；

(5)获取异步调用返回的数据；

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

Ajax细则

1. 现在我们再来具体介绍一下XMLHttpRequest 对象吧～

所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。

XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

创建方式就是：

var xmlhttp;

if (window.XMLHttpRequest){ // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码 xmlhttp=new XMLHttpRequest();

}else{ // IE6, IE5 浏览器执行代码 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

2. 请求

将请求发送至服务器，采用XMLHttpRequest对象的open()和send()函数

xmlhttp.open("GET","ajax_info.txt",true); xmlhttp.send();

一般使用get或post比较多，这里也会涉及到get与post的比较：

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

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

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

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

3. 响应

指的是XMLHttpRequest 对象的 responseText 或 responseXML 属性。

通过这个响应，获取后端传回来的数据。

4. XMLHttpRequest状态

知道这个状态，我们便可以根据状态码获取对象状态，从而在不同的阶段做出不同的处理。

0: 请求未初始化

1: 服务器连接已建立

2. 请求已接收

3. 请求处理中

4. 请求已完成，且响应已就绪

Ajax demo

下面就是一个完整的Ajax的例子～

基于jQuery的Ajax

对于日常开发中，我们可以采用jQuery所封装的Ajax，达到更高效的开发：

小伙伴们有没有对Ajax有所了解呢，但是事实证明有的时候使用Ajax会报错呢，不知道大家发现没发现，没错！会报跨域错误，怎么系统解决跨域错误，且听下回分解～～而且http也是前端开发的小伙伴们很重要的工具，我们后面也会有专题讲到的！