AJAX 解析
<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改内容</button>
AJAX=异步JavaScript和XML。
AJAX不是一种新的编程语言,而是一种使用现有标准的新方法。
AJAX的最大优点是它可以与服务器交换数据并更新某些网页,而无需重新加载整个网页。
AJAX不需要任何浏览器插件,但用户需要允许JavaScript在浏览器上执行。
XMLHttpRequest只是实现Ajax的一种方法。
XMLHttpRequest对象
所有现代浏览器都支持XMLHttpRequest对象(IE5和IE6使用ActiveX对象)。
XMLHttpRequest用于在后台与服务器交换数据。这意味着可以在不重新加载整个页面的情况下更新页面的某些部分。
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
创建XMLHttpRequest对象
所有现代浏览器(IE7+、Firefox、Chrome、Safari和Opera)都内置XMLHttpRequest对象。
创建XMLHttpRequest对象的语法:
variable=new XMLHttpRequest();
旧版本的Internet Explorer(IE5和IE6)使用ActiveX对象:
variable=新ActiveXObject(“Microsoft.XMLHTTP”);
为了应对所有现代浏览器,包括IE5和IE6,请检查浏览器是否支持XMLHttpRequest对象。如果支持,请创建XMLHttpRequest对象。如果没有,请创建ActiveX对象:
var xmlhttp;
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
回调函数是作为参数传递给另一个函数的函数。
如果的网站上有多个AJAX任务,应该编写一个用于创建XMLHttpRequest对象的标准函数,并为每个AJAX任务调用该函数。
函数调用应包括URL和发生onreadystatechange事件时要执行的任务(每个调用可能不同)
IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码。IE6, IE5 浏览器执行代码
xmlhttp.open("GET","/try/ajax/demo_get.php?t=" + Math.random(),true);
xmlhttp.send();
与POST相比,GET更简单、更快,并且可以在大多数情况下使用。
但是,在以下情况下使用POST请求:
不想使用缓存文件(更新服务器上的文件或数据库)
向服务器发送大量数据(POST没有数据限制)
当发送包含未知字符的用户输入时,POST比GET更稳定可靠
异步
AJAX指的是异步JavaScript和XML。
如果XMLHttpRequest对象要在AJAX中使用,其open()方法的异步参数必须设置为true:
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
xmlhttp.send();
xmlhttp.open(“GET”,“ajax_test.html”,true);
发送异步请求是web开发人员向前迈出的一大步。在服务器上执行的许多任务都很耗时。这可能会导致应用程序在AJAX出现之前挂起或停止。
使用AJAX,JavaScript不需要等待服务器的响应,而是:
等待服务器响应时执行其他脚本
准备就绪后处理响应
xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
{
txt=txt + x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("myDiv").innerHTML=txt;
我们不建议使用async=false,但对于一些小请求,这是可以的。
请记住,JavaScript将等待服务器响应准备好继续。如果服务器忙或慢,应用程序将挂起或停止。
注意:当使用async=false时,请不要编写onreadystatechange函数-只需将代码放在send()语句之后:
当请求发送到服务器时,我们需要执行一些基于响应的任务。
只要readyState发生更改,就会触发onreadystatechange事件。
readyState属性存储XMLHttpRequest的状态信息。
function loadXMLDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xhttp.open("GET", "cd_catalog.xml", true);
xhttp.send();
}
当用户单击上面的“获取我最喜爱的CD”按钮时,将执行loadXMLDoc()函数。
loadXMLDoc()函数创建XMLHttpRequest对象,在服务器响应就绪时添加要执行的函数,并将请求发送到服务器。
当服务器响应就绪时,它将构建一个HTML表,从XML文件中提取节点(元素),最后使用填充了id=“demo”XML数据的表元素