{S0}简介
试想一个非常庞大的网页,提供了很多的功能,用大量的数据,所有从服务器端传来。现在,用户希望得到一些来自服务器的信息,可能会影响此页只有一小部分,但他提交了他的请求时,整个页面呈现再次不必要的,大量的时间和重新填充每一个事情。
这已经在过去的很让人讨厌的问题,但现在,AJAX(异步JavaScript和XML)来作为整个页面的渲染解决方案。随着AJAX的祝福,我们就可以更新/刷新渲染整个页面本身的必要组成部分,而不是只有我们的网页。我们的目标,在这个例子
我们的目的是熟悉与AJAX。所以在这里我们会做饭upnbsp;一个很简单的例子,通过使用AJAX的重点,而不是使业务逻辑和演示复杂,所涉及的数据库连接或其他复杂的逻辑。 (当然,我们都已经知道的数据库,即使我们不知道,我们将学习一些其他的时间。)
我们将生成在服务器上的随机数(generateRandomNos.asp),然后我们将通过AJAX的服务器端代码调用我们简单的HTML页面(showRandomNos.html)。我们会发现,只有我们的HTML页面(showRandomNos.html)的一部分将被更新,而不是整个页面刷新。使用代码
我们的第一页就是一个HTML页面,显示随机生成的数字,当用户点击按钮quot;生成随机numbersquot;但这里使用的科学是AJAX。只有一小部分的划分是更新,而不是呈现整个页面来完成用户的请求。 onclick='JavaScript:generateRandomNumbers("generateRandomNos.asp")'
按钮的onclick事件中,我们调用一个JavaScript函数,并通过*. asp页面(这将在服务器产生的随机数),如上所示的URL:{C}
处理服务器端代码,我们需要发送一个请求到服务器。由于AJAX是浏览器特定的技术,我们的浏览器,如在Internet Explorer的情况下作出的具体对象;,我们将创建itnbsp; asnbsp; shownnbsp下面:new ActiveXObject("Microsoft.XMLHTTP");
现在,我们将使用XMLHttpRequest对象调用服务器端代码:xmlHttpReq.open('POST', targetURL, true);
我们的XmlHttpRequest对象的不同国家将让我们知道有多远,我们已经达到。它的readyState 4告诉我们的要求,已成功完成,并控制已返回到浏览器的浏览器。 readyStates可以listednbsp四个不同类型的下面:0 =未初始化1 =载入2 =加载3 =下过程 4 =完成if (xmlHttpReq.readyState == 4) {
document.getElementById("result").innerHTML = xmlHttpReq.responseText;
document.getElementById("generationStatus").innerHTML= "Done !!";
}
else
{
document.getElementById("generationStatus").innerHTML=
"Generating Random numbers...";
}
我们也可以得到服务器的响应文本或如XML的形式:// FOR TEXT Response
xmlHttpReq.responseText;
// FOR XML Response
xmlHttpReq.responseXML;
最后,让我们有一个looknbsp;在我们的服务器端代码。它只是生成随机数使用RND方法:for i = 1 to 9999
Randomize()
response.Write(rnd)
next
我们已经成功地熟我们的第一个AJAX示例和品尝它,只需将您的Web服务器上的两个文件,然后运行网页showRandomNos.html ...
享受!历史2006年10月8日:战后初期