Ajax 使用
创建动态网页的技术
Ajax 介绍
- AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
- AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
Ajax实现原理
- 创建XMLHttpRequest对象(此对象用于与服务器进行数据交换)
- 向服务器发送请求,依次调用对象的open()与send()方法
xmlHttpRequest.open("method","url",async);
xmlHttpRequest.send(string)
- 当请求被发送到服务器时，我们需要执行一些基于响应的任务,
每当 readyState(0-4) 改变时，就会触发 onreadystatechange 事件,
readyState 属性存有 XMLHttpRequest 的状态信息(200 or 404)。
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
- 获取服务器的响应,使用对象的responseText或者responseXml
- responseText 获得字符串形式的响应数据
document.getElemntById("id").innnerHtml=xmlHttp.responseText
- responseXML 获得 XML 形式的响应数据
注意:url可以通过增加随机数来避免缓存情况
使用回调函数
回调函数是一种以参数形式传递给另一个函数的函数
如果您的网站上存在多个 AJAX 任务，那么您应该为创建 XMLHttpRequest 对象编写一个标准的函数，并为每个 AJAX 任务调用该函数。
该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务（每次调用可能不尽相同）：
function myFunction()
{
loadXMLDoc("/try/ajax/ajax_info.txt",function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
});
}
