JavaScript Ajax
JavaScript Ajax
Ajax简介：
Ajax也被称为“远程脚本”技术，ajax使得javascript超越了客户端的界限，使其能够处理服务端的文件或程序
Javascript的缺陷之一就是无非既时的与服务端通讯，需要重新加载页面才可以实现。Ajax已经解决了上述的问题。
概念：Ajax是指javascript利用内置对象-XMLHttpRequest 在不重新加载页面的情况下与WEB服务端通讯的能力。
Javascript客户端：
传统的情况下javascript要想与服务端通讯必须要提交表单，远程脚本的诞生使得2这之间的通讯方法变的更加的丰富，ajax诞生于2005年。
Ajax(异步javascript和xml)及Ajax运行机制：
异步的意思就是，浏览器不需要等待服务端的响应，就可以操作xml文件了。
脚本首先创建xmlhttprequest对象，然后把请求发送给服务端。
服务端发送文件或服务端程序的输出作为响应。
Javascript接收来自于服务端的数据并开始处理接收到的数据。
由于引入该技术(ajax)的目的就是提供更好的交互性，所以javascript会通过DOM来显示来自于服务端的数据，从而无需在次加载页面。
由于请求是异步的，所以可以同时处理多个请求。
什么是后台程序：
驻留在WEB服务器上的程序被称为‘后台’，最简单的后台就是WEB服务器上的文件。Javascript可以通过内置对象XMLHttpRequest来请求位于服务器上的文件，并处理该文件。通常的服务器端程序是用相关语言编写的，比如php\ruby\asp\perl等。
Javascript可以使用以下的2种方式向WEB服务端程序发送数据：
get：数据被编码到URL中发送到服务端程序
post：数据是被单独发送到服务端的。
什么是xml：
XML（扩展标记语言），XML是服务端文件，服务端程序可以处理XML格式的数据。DOM中的方法也可以应用于XML文件。
Ajax的出现使得WEB的既时性更加的明显了。
Ajax的局限性：
远程脚本是一种相对较新的技术，所以目前还不能应用于某些工作。Ajax的局限性与潜在问题包括：
要求所请求的数据源必须在同一个域中。
一些老版本浏览器与不常见的浏览器不支持XMLHttpRequest对象。
XMLHttpRequest对象：
下面将记载XMLHttpRequest对象与服务端通讯的方法。
创建请求：
首先需要声明XMLHttpRequest对象，可以通过new关键词来声明一个XMLHttpRequest对象：
Ajaxreq=new XMLHttpRequest();
以上代码不能运行在IE5与IE6上，需要这样写：
Ajaxreq=new ActiveXObject(“Microsoft.XMLHTTP”);
打开URL：
XMLHttpRequest对象的open()方法需要2个参数：
服务端文件名
发送数据的方式。
例如：
Ajaxreq=open(“get”,”search.php?query=Liquidworm”);
发送请求：
通过XMLHttpRequest对象的send()方法可以把数据发送到服务端，如果发送数据的方式是post需要给定发送的数据为send()的参数，如果是以get方式发送的可以为null参数。
Ajax.send(null);
等待响应：
请求被发送以后，javascript将会继续执行，由于结果可能会在任何时候返回。需要使用事件处理程序来监听，因此XMLHttpRequest提供了事件onreadystatechange ：
Ajaxreq.onreadystatechange=MyFunction;
已发送请求的对象带有一个属性 readystate 该属性发生变化时，onreadystatechange事件将被触发，所以需要检测该属性的当前状态，0 代表已请求，4代表请求已结束。
Ajax对象 XMLHttpRequest
- Ajax 注意事项
- IE 浏览器使用 ActiveXObject，而其他的浏览器使用名为 XMLHttpRequest 的 JavaScript 内建对象。
- XMLHttpRequest 对象的三个重要的属性：
- 方法：
- 只能发送、IP、端口、HTTP协议相同的请求
- xmlHttp=new ActiveXObject("Microsoft.XMLHTTP")
- XMLHttp=new XMLHttpRequest()
- onreadystatechange //应该注册这个事件
- readyState // 0 1 2 3 4 （4）是完成时
- responseText //服务器发回来的响应
- responseXml
- status //获取响应码（200）
- statusText
- .open("GET","time.asp",true) ; //1.方式 2.请求的页面 3.是否是异步
- .send(null);
- .setRequestHeader() //在open()以后，send()之前设置
- .getResponseHeader()
- .getAllResponseHeaders()
- .abort()
一段完整的代码
<script type="text/javascript">
//异步请求Get
var xhr = null;
if (typeof (XMLHttpRequest) != 'undefined') {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject("Microsoft.XMLHttp");
}
//打开连接
xhr.open("get", "handler/GetList.ashx", true);
//设置回调函数
xhr.onreadystatechange = function () {
if (xhr.readyState
== 4 && xhr.status == 200) {
//处理Json数据
var arrJson = JSON.parse(xhr.responseText);
//动态加载到表格
var objTb = document.getElementById("tb_data");
objTb.innerHTML = "";
for (var i = 0; i < arrJson.length; i++) {
var tr = objTb.insertRow(-1);
tr.insertCell(-1).innerHTML = arrJson[i]["AutoId"];
tr.insertCell(-1).innerHTML = arrJson[i]["Title"];
tr.insertCell(-1).innerHTML = arrJson[i]["Content"];
tr.insertCell(-1).innerHTML = arrJson[i]["Email"];
}
}
};
xhr.send(null);
</script>
