什么是AJAX?
AJAX:”Asynchronous JavaScript and XML”
中文意思：异步JavaScript和XML。
指一种创建交互式网页应用的网页开发技术。
AJAX并非缩写词,而是由Jesse James Gaiiett创造的名词。
不是指一种单一的技术，而是有机地利用了一系列相关的技术：
web标准( Standards-Based Presentation )XHTML+CSS的表示,
使用 DOM( Document Object Model )进行动态显示及交互,
使用 XML 和 XSLT 进行数据交换及相关操作,
使用 XMLHttpRequest 进行异步数据查询、检索.
简单理解为：JavaScript + XMLHttpRequest + CSS +服务器端 的集合.
那，什么是交互式?
普通的网页请求回执过程
AJAX优点
传统的web应用允许用户填写表单(form)，当提交表单时就向web服务器发送一个请求。服务器接收并处理传来的表单，然后返回一个新的网页。
这个做法浪费了许多带宽，因为在前后两个页面中的大部分HTML代码往往是相同的。
AJAX应用可以仅向服务器发送并取回必需的数据，并在客户端采用JavaScript处理来自服务器的响应
因为在服务器和浏览器之间交换的数据大量减少（大约只有原来的5%），结果我们就能看到响应更快的应用。同时很多的处理工作可以在发出请求的客户端机器上完成，所以Web服务器的处理时间也减少了。
使用Ajax的最大优点就是能在不刷新整个页面的前提下维护数据，这使得Web应用程序更为迅捷地响应用户交互，并避免了在网路上发送那些没有改变的信息。
AJAX优点
Ajax在本质上是一个浏览器端的技术
Ajax技术之主要目的在于局部交换客户端及服务器间之数据
这个技术的主角XMLHttpRequest 的最主要特点，在于能够不用重新载入整个版面来更新资料，也就是所谓的Refresh without Reload(轻刷新)
与服务器之间的沟通，完全是透过Javascript 来实行
使用XMLHttpRequest 本身传送的资料量很小，所以反应会更快，也就让网络程式更像一个桌面应用程序
AJAX 就是运用Javascript 在后台悄悄帮你去跟服务器要资料，最后再由Javascript 或DOM 来帮你呈现结果，因为所有动作都是由Javascript 代劳，所以省去了网页重载的麻烦，使用者也感受不到等待的痛苦
XMLHttpRequest对象
接着介绍XMLHttpRequest对象，因为Ajax应用程序的中心就是它。同时，对于许多数网页开发的实际问题中，它也是最广泛适用的解决方案。
我们还将介绍该对象的GET和POST方法的使用。同时探讨用户使用此对象常见的错误，例如当试图让页面在所有服务器上都能运行时遇到的一些问题。
XMLHttpRequest对象最初是作为IE5中的一个ActiveX控件出现的，随后Mozilla 1.0、Netscape7、Safari1.2和Opera7.60都将它纳入自身。
XMLHttpRequest对象在IE浏览器和非IE浏览器中创建的方法不同。
XMLHttpRequest对象的作用在于，允许用脚本程序通过HTTP连接到服务器，而不是通过HTTP请求响应模型与服务器通信
。 简而言之：它可以异步从服务器端获取txt或者xml数据
创建XMLHttpRequest对象
同步使用XMLHttpRequest对象
按照下面模式，可以同步地XMLHttpRequest对象：
创建对象； - new (叫助手过来)
创建请求； - open (告诉他要去做的事情)
发送请求； - send (去吧)
一、先来创建XMLHttpRequest对象
在IE、Firefox、safari和Opera中创建该对象的JavaScript代码为：
var xhr = new XMLHttpRequest();
在IE5/6中代码为：
var xmlRequest = new ActiveXObject(“Microsoft.XMLHTTP”);
注意，JavaScript区分大小写。
function createXmlHttp() {//创建xhr对象
var xhobj = false;
try {
xhobj = new ActiveXObject("Msxml2.XMLHTTP"); // ie msxml3.0+
} catch (e) {
try {
xhobj = new ActiveXObject("Microsoft.XMLHTTP"); //ie msxml2.6
} catch (e2) {
xhobj = false;
}
}
if (!xhobj && typeof XMLHttpRequest != 'undefined') {// Firefox, Opera 8.0+, Safari
xhobj = new XMLHttpRequest();
}
return xhobj;
}
创建XMLHttpRequest对象
XMLHttpRequest对象的方法
方法 说明
abort 取消请求
open 需要使用多个参数，第一个设置方法属性，第二个设置目标URL,第 三个指定是同步（false）还是异步（true）发送请求
send 发送请求到服务器
setRequestHeader 添加自定义Http头到请求
getAllResponseHeaders 获取HTTP响应头的整个列表
getResponseHeader 仅获取指定的HTTP响应头
创建XMLHttpRequest对象
二、为XMLHttpRequest对象设置请求参数 1.设置参数： xhr.open("GET", "GetAreasByAjax.ashx?isAjax=1", true); 2.POST方式： xhr.open("POST", "GetAreasByAjax.aspx", true); xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 3.设置浏览器不使用缓存 xhr.setRequestHeader("If-Modified-Since", "0");
三、发送请求：(分别对应GET和POST) xhr.send(null);//GET方式 xhr.send("isAjax=1&na=123");//POST方式
是不是少了什么？请求发送出去后会有响应回来， 那我怎么知道请求已经返回了呢？
function createXmlHttp() {//创建xhr对象
var xhobj = false;
try {
xhobj = new ActiveXObject("Msxml2.XMLHTTP"); // ie msxml3.0+
} catch (e) {
try {
xhobj = new ActiveXObject("Microsoft.XMLHTTP"); //ie msxml2.6
} catch (e2) {
xhobj = false;
}
}
if (!xhobj && typeof XMLHttpRequest != 'undefined') {// Firefox, Opera 8.0+, Safari
xhobj = new XMLHttpRequest();
}
return xhobj;
}