ajax的基本组成
Xhtml css
javascript
xml
XMLHttpRequest (核心，ajax引擎，异步交互的对象)
ajax使用的基本步骤：
1、初始化ajax引擎 readyState=0（刚建立）
2、封装url（设定要请求的路径）
3、打开ajax引擎（同步方式、异步的方式；本次传输使用get还是post） readyState = 1
4、将要请求的信息通过引擎发送到服务器进行处理 readyState =2
5、监听服务器返回给ajax引擎的处理状态 readyState =3 、4
6、判断是否交互完毕，如果交互完毕则取出返回的数据
、
ajax 的中文乱码问题
可以使用encodeURI进行编码
可以使用decodeURI()进行解码
ajax请求部分封装重用的问题
为什么要进行封装？
1、使用ajax有6步，每次都写这6步比较麻烦？
2、代码的重复利用率很低，页面非常乱
解决办法：就是封装 重用
ajax解析xml的思路是
1、服务端是xml或者输出xml格式的服务器文件
2、客户端可以使用xhr.responseXML的方式获取整个xml根节点
3、通过js dom 的document.getElementsByTagName()
来解析想获取的元素节点
4、通过获得元素节点及子节点的方式，得到更多的内容。
_________________ajaxUtil.js__________________________________
function get(url1,params,methodName){
/*
ajax使用的基本步骤：
1、初始化ajax引擎
2、封装url（设定要请求的路径）
3、打开ajax引擎（同步方式、异步的方式；本次传输使用get还是post）
4、将要请求的信息通过引擎发送到服务器进行处理
5、监听服务器返回给ajax引擎的处理状态
6、判断是否交互完毕，如果交互完毕则取出返回的数
*/
//初始化ajax引擎
var xhr = new XMLHttpRequest();//这种方式只针对ie浏览器，并且ie6以下还有问题。
var url=url1+"?"+params+"&r="+Math.random();
//alert(url);
//打开引擎
xhr.open("get",url,true); //readyState=1
//发送请求
xhr.send(null); //readyState=2
//监听readyState值的改变，每次改变都会执行下面额函数
xhr.onreadystatechange=function (){
//如果等于4，表明交互完毕 ，我们可以取出服务器返回的内容
if(xhr.readyState==4){
//动态调用方法，为什么说是动态呢？方法的名称是个变量methodName
methodName(xhr);
}
}
}
//$$（）方法用于方便取出 id="id" 的对象
function $$(id){
return document.getElementById(id);
}
______________ajax-xml.html______________________________________
<style>
#div{
background-color:#CCC;
300px;
height:150px;
}
</style>
<script language="javascript" src="http://www.cnblogs.com/include/ajaxUtil.js"></script>
<script>
//定义两个行数
function getXml(){
//定义url
var url="ajax-xml.xml";
//定义参数
var params="a="+1;
//调用ajax
get(url,params,processXmlData);
}
function processXmlData(xhr){
//接收返回的数据
var reText=xhr.responseXML;
//解析xml并且显示到表格里
var emplist=reText.getElementsByTagName("emp");
var table=document.createElement("table");
table.setAttribute("border","1");
//遍历解析每个emp标签
for(var i=0;i<emplist.length;i++){
var tr=document.createElement("tr");
var childs=emplist[i].childNodes;
//alert(i+"子节点个数:"+childs.length);
for(var j=0;j<childs.length;j++){
if(childs[j].nodeType==1){
//创建列
var td=document.createElement("td");
//创建文本节点
var text=document.createTextNode(childs[j].firstChild.nodeValue);
//将文本追加到td中
td.appendChild(text);
//将td追加到行中
tr.appendChild(td);
}
}
//将tr追加到表格中
table.appendChild(tr);
}
//将table追加到div中
$$("div").appendChild(table);
}
getXml();
</script>
</head>
<body>
<div id="div"></div>
参照的是： http://blog.csdn.net/lvzk555/article/details/7319396
还有个贴吧：http://bbs.bccn.net/thread-350246-1-1.html