浅谈AJAX

一.定义
（Asynchronous Javascript And XML）是一种在无需重新加载整个网页的情况下，更够实现局部更新的技术。
二.工作原理简述

三.补充说明：
1.AJAX是基于现有的Internet标准，并且联合以下元素一同使用：
XMLHttpRequest对象 （异步地与服务器交换数据）
JavaScript/DOM （信息显示/交互）
CSS （给数据定义样式）
XML/JSON （作为转换数据的格式）

2.在2005年，Google通过其Google Suggest使Ajax变得流行起来。Google Suggest使用AJAX创造出动态性极强的web页面：当在谷歌的搜索框输入关键字时，javascript会把这些字符发送到服务器，然后服务器返回一个搜索建议的列表。

四.简单用法介绍
A.源生JS实现步骤：
1.创建XMLHttpRequest对象
a.说明：所有现代浏览器（IE7+、Firefox、Chrome、Safari以及Opera）均支持XMLHttpRequest对象（而IE5和IE6使用的是ActiveXObject对象）。XMLHttpRequest用于在后台与服务器交换数据。
b.创建：
现代浏览器使用XMLHttpRequest：
variable = new XMLHttpRequest();

IE5和IE6使用ActiveX对象：
variable = new ActiveXObject("Microsoft.XMLHTTP");

为了应对所有的现代浏览器，处理浏览器兼容问题，则应在创建之前先判断浏览器是否支持XMLHttpRequest对象，如果支持，则创建XMLHttpRequest对象，否则创建ActiveXObject对象：

var xmlhttp;if(window.XMLHttpRequest){    //IE7+,FireFox，Chrome,Opera,Safari    xmlhttp = new XMLHttpRequest();}else{    //IE5,IE6    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}

补充：实际上IE6和IE5的创建方法仍然不同，应该使用try/catch语句处理这里的兼容性问题

function createXHR() {        var xhr = null;        if(window.XMLHttpRequest) {            xhr = new XMLHttpRequest(); //主流浏览器均支持；        }        else if(window.ActiveXObject) {            try {                //IE6+                xhr = new ActiveXObject('Msxml2.XMLHttp'); //不支持则会报一个异常，catch捕获            } catch(e) {                xhr = new ActiveXObject('Microsoft.XMLHttp');               }        }        return xhr;    }

2.向服务器发送请求
a.初始化请求：open(method,url,async)
参数解释：
method:请求的类型，GET还是POST

url：文件在服务器上的位置(该文件的类型可以是任意的，比如.txt和.xml，或者服务器脚本文件，比如.asp和.php)

async：是否选择异步处理方式。true（异步）、false（同步）
补充：不推荐使用false，但是对于一些小型的请求也是可以的，且此时不要编写onreadysatatechange函数，直接把服务器作出回应之后的代码放在send()语句后面即可。

b.将请求发送到服务器：send(string)
注：string是发送给服务器时所携带的参数，只有在POST请求时使用；而当GET请求时括号里可以写成null，这样可以防止因手误敲入空格等字符带来的错误

·······································································································GET和POST········································

1.GET方法：
a.更简单更快捷；
b.在使用GET方法向服务器发送请求时，参数直接添加在url里，所以安全性差，比如：

xmlhttp.open('GET','/try/ajax/demo_get2.php?name=Henry&password=123456',true);xmlhttp.send();

c.用GET传输数据时，参数大小有所规定，不能超过2KB
d.GET方法使用示例：

e.通常情况下，GET可能得到的是缓存的结果，例如：

xmlhttp.open('GET','/try/ajax/demo_get.php',true);xmlhttp.send();

为了避免这种情况，可以通过给url后添加一个唯一ID的方法来实现，这个唯一的ID可以是时间戳，或者随机数：

xmlhttp.open('GET','/try/ajax/demo_get.php?t='+Math.random(),true);xmlhttp.send();

补充：举例说明get方法

var age = document.getElementById('age').value;var sex = document.getElementById('sex').value;var queryString = "url?age=" + age ;queryString += "&sex=" + sex;xhr.open("GET", "test,php" + queryString, true);xhr.send(null); 

2.POST方法：

a.如果要用POST方法发送表单那样的数据，要使用setRequestHeader()来添加HTTP头部，然后在send()方法中规定希望发送的数据，例如：

xmlhttp.open('post','try/ajax/demo_post2.php',true);xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');xmlhttp.send('name=Henry&password=123456');

补充：向请求添加HTTP头部的方法：setRequestHeader（header，value）。header：规定头的名称；value：规定头的值

举例说明post:——–需要设置请求头

/1个参数：send（"name="+username）;/多个参数和get方法的url携带参数是一样的：send（"name="+username+"&pwd="+paddword);

综上所述，在以下几种情况中，请使用POST请求
a.无法使用缓存文件（更新服务器上的文件或数据库）
b.向服务器发送大量数据（POST没有数据量限制）
c.发送包含未知字符的用户输入时，POST比GET更稳定也更可靠

·······································································································GET和POST········································

3.服务器响应
如需获得来自服务器的响应，请使用XMLHttpRequest对象的属性：
a.服务器返回状态：readyState 与 onreadystatechange事件
b.response返回事件
responseText:获得字符串形式的响应数据

responseXML:获得XML形式的响应数据
c.处理相应结果

补充：———————————————————————————
1.readyState的属性值
0表示：还未初始化—就是还没有调用open（）方法；
1表示：载入，正在发送请求，已经send();
2表示：载入完成，已经收到全部的相应内容；
3表示：解析，即正在解析相应的内容
4表示：响应内容解析完成，可以在客户端使用；

2.status:HTTP的状态码

常见的HTTP状态码：

3.statusText：Http状态码的说明；