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

##处理返回的结果