Ajax 的简介

什么是 Ajax

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

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

AJAX 可以在不重新加载整个网页的情况下，与服务器交换数据，并且更新部分网页
。

Ajax 所包含的技术

AJAX 的核心是 XMLHttpRequest 对象。

1. 使用 CSS 和 XHTML 来表示。

2. 使用 DOM 模型来交互和动态显示。

3. 使用 XMLHttpRequest 来和服务器进行异步通信。

4. 使用 javascript 来绑定和调用。

Ajax 的工作原理

在用户和服务器之间添加了一个中间层（AJAX 引擎），使用户操作与服务器响应异步话，并不是所有的用户请求都提交给服务器。
数据验证和数据处理等都交给 Ajax 引擎自己来做，只有确定需要从服务器读取新数据时再由 Ajax 引擎代为向服务器提交请求

来看看两个方式的区别

XMLHttpRequ 对象常用的三个属性

onreadystatechange 属性
存有服务器响应的参数

readyState 属性
存有服务器响应状态的信息

readyState 属性可能的值：

responseText 属性

可以取得有服务器返回的数据

其他的属性如下

xmlhttprequst 的方法

open()方法

xmlHttp.open(“GET”,”test.php”,true);
第一个参数定义发送请求所使用的方法
第二个参数规定服务器脚本的 URL
第三个参数规定了请求是否需要异步的处理

send()方法

send() 方法将请求送往服务器。如果我们假设 HTML 文件和 PHP 文件位于相同的目录，那么代码是这样的：

xmlHttp.send(null);

其他方法如下

AJAX 编程步骤

1. 创建 XMLHttpRequest 对象
2. 设置请求方式
3. 调用回调函数
4. 发送请求
5. 处理返回的结果

创建 XMLHttpRequest 对象

    var xmlhttp=new XMLHttpRequest();

一般来说手写 AJAX 的时候，首先需要判断该浏览器是否支持 XMLHttpRequest 对象，如果支持则创建该对象，如果不支持则创建 ActiveX 对象。

    // 第一步：创建 XMLHttpRequest 对象
    var xmlHttp;
    if (window.XMLHttpRequest) { // 非 IE
    xmlHttp = new XMLHttpRequest();} else if (window.ActiveXObject) { //IE
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")
    }

设置请求方式

一般是有两种请求方式，一个是 GET 一个是 POST，需要设置具体使用哪个请求方式

xmlhttp.open('method',URL,async);

参数如下

调用回调函数

当前为异步请求的时候，需要写一个回调函数，XMLHttpRequest 对象有一个属性，这个属性要返回一个匿名的方法，所谓的回调函数，就是请求在后台处理完，再返回到前台所实现的功能。

xmlhttp.onreadystatechange = function (ev2) {
                    /*
                    0: 请求未初始化
                    1: 服务器连接已建立
                    2: 请求已接收
                    3: 请求处理中
                    4: 请求已完成，且响应已就绪
                    */
                    if(xmlhttp.readyState === 4){
                        // 判断是否请求成功
                        if(xmlhttp.status >= 200 && xmlhttp.status < 300 ||
                           xmlhttp.status === 304){
                            // 5. 处理返回的结果
                            console.log("接收到服务器返回的数据");
                        }else{console.log("没有接收到服务器返回的数据");
                        }

                    }
                }

发送请求

xmlhttp.send

## 处理返回的结果