Ajax编程技术

AJAX:”Asynchronous JavaScript and XML” 中文意思：异步JavaScript和XML。 指一种创建交互式网页应用的网页开发技术。

不是指一种单一的技术，而是有机地利用了一系列相关的技术： 简单理解为：JavaScript + XMLHttpRequest + CSS +服务器端 的集合.

Ajax在本质上是一个浏览器端的技术
Ajax技术之主要目的在于局部交换客户端及服务器间之数据
这个技术的主角XMLHttpRequest 的最主要特点，在于能够不用重新载入整个版面来更新资料，也就是所谓的Refresh without Reload(轻刷新)
与服务器之间的沟通，完全是透过Javascript 来实行
使用XMLHttpRequest 本身传送的数据量很小，所以反应会更快，也就让网络程式更像一个桌面应用程序
AJAX 就是运用Javascript 在后台悄悄帮你去跟服务器要资料，最后再由Javascript 或DOM 来帮你呈现结果，因为所有动作都是由Javascript 代劳，所以省去了网页重载的麻烦，使用者也感受不到等待的痛苦

XMLHttpRequest对象

Ajax应用程序的核心就是它。 XMLHttpRequest对象在IE浏览器和非IE浏览器中创建的方法不同。

简而言之：它可以异步从服务器端获取txt或者xml数据

异步请求基本步骤

使用XMLHttpRequest对象  按照下面模式，可以同步地XMLHttpRequest对象：

创建对象； - new  (叫助手过来) 创建请求； - open (告诉他要去做的事情) 发送请求； - send (去吧)

一、先来创建XMLHttpRequest对象
在IE、Firefox、safari和Opera中创建该对象的JavaScript代码为：
 var xhr = new XMLHttpRequest();
在IE5/6中代码为：
 var xmlRequest = new ActiveXObject(“Microsoft.XMLHTTP”);
  注意，JavaScript区分大小写。

二、为XMLHttpRequest对象设置请求参数
      1.GET方式
            1.1设置参数
            xhr.open("GET", "GetAreasByAjax.ashx?isAjax=1", true);
     　　 1.2GET方式请求可以设置浏览器不使用缓存xhr.setRequestHeader("If-Modified-Since", "0");
            1.3发送: xhr.send(null);//GET方式
 　　2.POST方式：

　　　　 1.1设置参数：xhr.open("POST", "GetAreasByAjax.aspx", true);

　　　　 1.2添加请求头：xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            1.3发送：xhr.send("isAjax=1&na=123");//POST方式

异步使用XMLHttpRequest对象
 异步使用XMLHttpRequest对象时，必须使用：onreadystatechange事件。
 使用模式应该是：
创建该对象；-new
设置readystatechange事件触发一个回调函数; -onreadystatechagne
打开请求；-open
发送请求；-send
       注：在回调函数中检查readyState属性，看数据是否准备就绪(是否等于4)。
如果没有准备好，隔一段时间再次检查。因为数据没有下载完时，我们无法使用它的属性和方法。
如果已经准备好，就继续往下执行；

1.在xhr.send之前添加设置回调函数代码：
xhr.onreadystatechange = watching;

2.回调函数
function watching() {
       if (xhr.readyState == 4) {//请求状态
           if (xhr.status == 200) {//服务器返回的状态码
               var msg = xhr.responseText; //服务器返回的字符串
           } else alert("服务器错误!" + ajaxH.status);
       }
}

readyState属性
  readyState属性指出了XMLHttpRequest对象在发送/接收数据过程中所处的几个状态。XMLHttpRequest对象会经历5种不同的状态。
0：未初始化。new完后;
1：已打开。对象已经创建并初始化，但还未调用send方法
2：已发送。已经调用send 方法，但该对象正在等待状态码和头的返回；
3：正在接收。已经接收了部分数据，但还不能使用该对象的属性和方法，因为状态和响应头不完整；
4：已加载。所有数据接收完毕

abort 取消请求
open 需要使用多个参数，第一个设置方法属性，第二个设置目标URL，第三个指定是同步(false)还是异步(true)发送请求
send 发送请求到服务器
setRequestHeader 添加自定义HTTP头到请求
getAllResponseHeaders 获取HTTP响应头的整个列表
getResponseHeader 仅获取指定的HTTP响应头

onreadystatechange 返回或设置异步请求的事件处理程序
readyState 返回状态码：0：未初始化；1：打开；2：发送；3：正在接收；4：已加载
responseText 使用字符串返回HTTP响应
responseXML 使用XML DOM对象返回HTTP响应
status 返回HTTP状态码