[Web前端使用]-Ajax技术与应用简介 【难度 ★】

[Web前端应用]--Ajax技术与应用简介 【难度 ★★★★】
本节以不用框架的形式，讲述最原始的Ajax技术，许多的应用都需要Ajax方法，例如你去一些网站中注册，发现你输入的新用户名称，会在右侧即刻显示出“已经注册”或“可用”的字样，而不需要你去提交了结果后再提醒，这样的功能就是Ajax实现的。
Ajax异步调用实现的关键是XMLHttpRequest对象的使用，可分为三步实现：
1，创建XMLHttpRequest
2，定义服务器返回信息的操作函数
3，使用XMLHttpRequest对象发送URL请求给处理页面


【代码】--创建XMLHttpRequest对象的通用代码：
var xmlHttp；//设置全局变量
function createXMLHttpRequest(){
    if(window.ActiveXObject)//IE情况下
        xmlHttp = new ActiveXObjext("Microsoft.XMLHTTP");
    else if(window.XMLHttpRequest)//非IE情况下
        xmlHttp = new XMLHttpRequest()
}


【代码】--结合Javascript的new Date().getTime()方法，开发能解决缓存旧读的Ajax程序,在请求页后面加上该函数生成的时间戳，能有效的放置信息旧读，保证每次Ajax请求都是获取到最新的数据。
······//省略部分代码
createXMLHttpRequest(){······//详细见上例的代码}
var sURL = the_url + "?sendValue=" + val + "&timestamp=" +new Date().getTime();
xmlHttp.open("GET",sURL,true);
xmlHttp.onreadystatechange = function(){
    if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
       ······//一系列的商业逻辑，例如去后台查询数据库
        result = xmlHttp.responseText.split(",")//将结果用，分隔符分批，以数组形式传入result变量中。至于.split()方法是否需要使用，与你的商业逻辑有关。一般的，Ajax静态刷新获取的值，会由后台的处理结果中（例如后台的数据库查询结果），放置到xmlHttpRequest对象的responseText属性当中。
        ······//省略部分代码
    }
}
xmlHttp.send(null);
······//省略部分代码

其中：Ajax有GET和POST两种方法：
xmlHttp.open("GET","serverPage?value=123");然后再设置xmlHttp.send(null);
xmlHttp.open("POST","serverPage");然后设置setRequestHeader()方法，最后编写xmlHttp.send("value=123&XMLHttpRequest=test");