Ajax
Ajax学习（一）
Ajax全称Asynchronous JavaScript and XML，它并不是一种新的技术，而是在原有技术（ HTML 、 JavaScript 、 CSS 和 DOM ）基础上提出的新概念。它使用
1.CSS和HTML来构建页面结构；
2.JavaScript和DOM模型结合来进行动态显示和页面级交互；
3.XMLHttpRequest来进行异步请求。
Ajax 实现原理简单描述如下：
1. 向服务器发异步请求；
2.发起请求后，页面可以进行其他操作，不需等待服务端的响应；
3.服务端接受请求后，执行相应的请求，返回，若有返回结果（可以是XML格式数据、或是字符串、或是一段HTML），将这个返回结果写入对应属性中；
4.用JavaScript得到这个结果，可以通过 DOM 来更新页面或是其他操作 。
实现方式如下：
1.获取 XMLHttpRequest对象；
通常获取方式如下：
function CreateXmlHttp(){
//非IE浏览器创建XmlHttpRequest对象
if(window.XmlHttpRequest){
xmlhttp=new XmlHttpRequest();
}
//IE浏览器创建XmlHttpRequest对象
if(window.ActiveXObject){
try{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}catch(e) {
try{
xmlhttp=new ActiveXObject("msxml2.XMLHTTP");
}catch(ex){}
}
}
}
XMLHttpRequest有如下属性：
onreadystatechange 状态改变时的事件处理函数；
responseText 从服务器进程返回数据的字符串形式；
responseXML 从服务器进程返回的 DOM 兼容的文档数据对象；
status 从服务器返回的数字代码，比如常见的 404 （未找到）和 200 （已就绪）；
statusText 伴随状态码的字符串信息；
readyState 对象状态值，其值有如下几种：
0 ( 未初始化 ) 对象已建立，但是尚未初始化（尚未调用 open 方法）
1 ( 初始化 ) 对象已建立，尚未调用 send 方法
2 ( 发送数据 ) send 方法已调用，但是当前的状态及 http 头未知
3 ( 数据传送中 ) 已接收部分数据，因为响应及 http 头不全，这时通过 responseBody 和 responseText 获取部分数据会出现错误；
4 ( 完成 ) 数据接收完毕 ， 此时可以通过 responseXml 和 responseText 获取返回的数据。
XMLHttpRequest两个重要方法：
open（请求方式post还是Get,请求url, 是否异步 ）；设置请求方式，请求url和是否异步，默认为true，异步方式；
send（params）；
若使用get请求，请求参数直接放在url之后，send中的参数设为null；若要在send中传参数，则需要使用post请求，并且 需要在open之后设置头信息。如：
var url = "login.jsp?user=XXX&pwd=XXX";
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
xmlHttp.open("POST","login.jsp",true);
xmlHttp.setRequestHeder("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
xmlHttp.send("user="+username+"&pwd="+password);
2.设置事件处理函数，即回调函数；
xmlhttp.onreadystatechage = function() {
if(xmlhttp.readyState==4) {
if(xmlhttp.status==200) {
document.write(xmlhttp.responseText);
}
}
}
当服务器处理完了请求， onreadystatechange 属性所指向的函数 将被触发。
3.发送异步请求；
xmlhttp.open("POST",url,true);
xmlhttp.send(null);
4.回调函数被触发，若readyState值 为 4，表示数据接收完毕，可以从responseText或responseXML中获取返回值；
5.可以通过js获取对应DOM节点更新页面，也可进行其他操作。