前言

这次总结的是ajax技术不是asp.net ajax框架。ajax与传统的web开发的区别在于ajax只需在一个页面操作不用页面间的跳转，其实就是异步和局部刷新。以下主要对XMLHttpRequest对象，DOM，javaScript的三方面进行总结。

理解

(一)xmlHttpRequest

XMLHttpRequest的五步使用法：
1. 建立request连接
2. 服务端准备回调方法
3. 客户端设置参数
4. 开始交互
5. 检查结果

1.创建xmlhttprequest对象

if@H_502_40@(window.XMLHttpRequest){
    //IE7,IE8,FireFox,Mozilla,Safari,Opera
    xmlhttp = new XMLHttpRequest();
    ...@H_502_40@
}else@H_502_40@ if@H_502_40@(window.ActiveXObject){
    //IE6,IE5,IE5.5
    ...@H_502_40@
}
if@H_502_40@(xmlhttop == undefind || xmlhttp == null){
    alert("当前浏览器不支持创建XMLHttpRequest对象"@H_502_40@);
    return@H_502_40@;
}

2.注册回调方法

xmlhttp.onreadystatechange @H_502_40@= callback;@H_502_40@

3.设置和服务器端交互的响应参数（get）

var@H_502_40@ userName = document.getElementById("UserName"@H_502_40@).value@H_502_40@;

//true表示异步交互@H_502_40@
xmlhttp.open("GET"@H_502_40@,"AJAX?name="@H_502_40@ + userName,true@H_502_40@);

4.设置向服务层发送的数据，启动和服务器端的交互(get)

xmlhttp.send(null@H_502_40@);

3.设置客户端参数(post)

xmlhttp.open@H_502_40@("POST"@H_502_40@,"AJAX"@H_502_40@,true@H_502_40@);

//post方式交互所需要增加的代码@H_502_40@
xmlhttp.setRequestHeader("Content-Type"@H_502_40@,"application/x-ww-form-urlencoded"@H_502_40@);

4.开始交互(post)

xmlhttp.send@H_502_40@("name="@H_502_40@ + userName);

5.判断和服务端的交互是否完成，还要判断服务端是否正确返回了数据

function@H_502_40@ callback@H_502_40@()@H_502_40@{@H_502_40@
    if@H_502_40@(xmlhttp.readyState == 4@H_502_40@){
    //表示和服务端的交互已经完成@H_502_40@
        if@H_502_40@(xmlhttp.status == 200@H_502_40@){
        //表示服务器的响应代码是200，正确返回了数据@H_502_40@
        var@H_502_40@ message = xmlhttp.responseText;
        //纯文本数据的接受方法@H_502_40@
        //使用的前提是，服务器端需要设置content-type为text/xml@H_502_40@
        //xml数据对应的DOM对象的接受方法@H_502_40@
        // var domXml = xmlhttp.responseXML;@H_502_40@

        //向div标签中填充文本内容的方法@H_502_40@
        var@H_502_40@ div = document.getElementById("message"@H_502_40@);
        div.innerXML = message;
}
}
}

(二) DOM

DOM(Document Object Model)文档对象模型， 可以使我们在ajax中通过JavaScript代码对html和xml数据进行dom方式的操作，从而做到页面的动态修改更新和数据的提取处理。
XPATH(XML Path Language)
分三种：
1.查找元素节点 用@

//关键是先找到包含属性节点的元素节点@H_502_40@
//绝对路径@H_502_40@
var@H_502_40@ isdn1 = selectNodes(rootElement,"/books/book/@isdn"@H_502_40@);
//相对路径@H_502_40@
var@H_502_40@ isdn2 = selectNodes(rootElement,"book/@isdn"@H_502_40@);
//全文搜索@H_502_40@
var@H_502_40@ isdn3 = selectNodes(rootElement,"//books/book/@isdn"@H_502_40@);

2.查找文本节点 用text()

//关键是找到包含文本节点的那个元素节点@H_502_40@
var@H_502_40@ text1 = selectNodes(rootElement,"/books/book/name/text()"@H_502_40@);

3.有条件的查找元素节点

var@H_502_40@ book1 = select@H_502_40@Nodes(rootElement,"/books/book[@isdn@H_502_40@]"@H_502_40@);

(三) javaScript

1.对数组的操作

var@H_502_40@ array1 = new@H_502_40@ Array@H_502_40@(1@H_502_40@,2@H_502_40@,3@H_502_40@);
var@H_502_40@ array2 = [2@H_502_40@,3@H_502_40@,4@H_502_40@];

1.添加、删除（从尾部开始）

array1.push@H_502_40@(4@H_502_40@,5@H_502_40@,[6@H_502_40@,7@H_502_40@]);
array1.pop@H_502_40@();

2.添加、删除（从头开始）

array1.unshift@H_502_40@(100@H_502_40@,101@H_502_40@);
array1.shift@H_502_40@();

3.添加删除（任意位置）

var@H_502_40@ spliceArray1 = arrary1.splice(4@H_502_40@,2@H_502_40@);//从下标为4的元素开始删除2个@H_502_40@
var@H_502_40@ spliceArray1 = arrary1.splice(4@H_502_40@);//从下标为4的元素开始删除直到末尾的所有元素@H_502_40@
array1.splice(1@H_502_40@,0@H_502_40@,100@H_502_40@,101@H_502_40@);//从小标为1的元素开始删除0个元素，并在下标为1的元素前添加100,101@H_502_40@

4. 不改变原数组的基础上追加

//concat 用于数组的连接或合并，原数组内容不会改变@H_502_40@
var@H_502_40@ array3 = arrary1.concat@H_502_40@(7@H_502_40@,8@H_502_40@);

5.把各元素连接成字符串

//join,将元素按照指定的分隔符连接成字符串输出@H_502_40@
var@H_502_40@ array3 = array1.join@H_502_40@(""@H_502_40@);
//把元素按字符串输出 121212@H_502_40@
var@H_502_40@ array3 = array1.join@H_502_40@("+"@H_502_40@);//1+2+1+2+1+2@H_502_40@

6. 查部分元素

//slice,返回当前数组的子数组，原数组内容不变@H_502_40@
var@H_502_40@ array3.array1.slice(0@H_502_40@,3@H_502_40@);
//从小标0开始到小标3之前的元素返回成一个新的数组，注意下标3的元素取不到@H_502_40@
var@H_502_40@ array3.array1.slice(4@H_502_40@);
//从下标4开始到末尾@H_502_40@
var@H_502_40@ array3 = array1.slice(-2@H_502_40@,-1@H_502_40@);
//从倒数第二个到倒数第一个@H_502_40@

7.查出排好序的元素

array1.sort();//按字母序升序@H_502_40@
array1.sort(function@H_502_40@(a,b)@H_502_40@{@H_502_40@
    return@H_502_40@ a - b;
});
//按数值大小升序排列。如果返回的是一个负数，则a就出现在b的前面@H_502_40@

8.查出倒序的元素

array1.reverse@H_502_40@();

2.json拼接示例

builder.append@H_502_40@("({"@H_502_40@);@H_502_40@
Iterator<String> iter = stocks.keySet@H_502_40@().iterator@H_502_40@();@H_502_40@
//iterator是迭代器
while(iter.hasNext@H_502_40@()){
    String sid = iter.next@H_502_40@();@H_502_40@
    Stock stock =Stocks.get@H_502_40@(sid);@H_502_40@
    builder.append@H_502_40@(sid).append@H_502_40@(":{yes:"@H_502_40@).append@H_502_40@(stock.getYesterday@H_502_40@()).append@H_502_40@("}"@H_502_40@)
}
builder.append@H_502_40@("})"@H_502_40@);@H_502_40@

3.eval 反射

//反射创建对象的方法@H_502_40@
//第一个参数是类名@H_502_40@
//第二个参数是创建对象需要的所有参数组成的数组@H_502_40@
function@H_502_40@ reflect@H_502_40@(className,args)@H_502_40@{@H_502_40@
    try@H_502_40@{
        //如何把字符串类型的className转换成对应的一个函数@H_502_40@
        var@H_502_40@ rClass = eval@H_502_40@(className);
        //创建对象需要的所有参数在一个数组里面["1","2"]@H_502_40@
        //最终我们调用new创建的时候，参数表的写法应该（"1","2"）@H_502_40@
        var@H_502_40@ oargs = args.join(","@H_502_40@);
        var@H_502_40@ obj = new@H_502_40@ rClass(oargs);
        return@H_502_40@ obj;
}catch@H_502_40@(e){
        return@H_502_40@ null@H_502_40@;
}
}

结语

什么是AJAX? Asynchronous,JavaScript,And XML的首字母简写。其实，AJAX就是对JavaScript 和 XML的综合再添上异步。在AJAX技术涉及的这三块中，DOM是关于html的也算是关于XML的吧，XMLHttp|Request是关于XML的，再加上javascript这一块，显而易见，ajax没有自己的东西。