Ajax的原理和实现步骤

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

##处理返回的结果