脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-Ajax使用小结，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。
本科做课设的时候也用过ajax，但是当时做出来的东西在大部分浏览器中都没法异步更新页面内容，当时也就得过且过了。
前段时间做demo（万恶的demo让我复习了多少东西……）又把ajax拿过来复习了一遍，终于可以适应主流的ie、firefox、chrome三大浏览器的较新版本（最近1年的版本吧，再早的版本没有试过，但想必也没什么问题）了。
小结如下：
1、ajax的实现步骤
实现ajax异步更新，需要一个异步通信方法，只要在页面中的htML标签的事件处理脚本或者其他的js代码中调用该异步通信方法就可以完成页面的异步更新。该方法包括以下几个步骤：
s1: 获取一个XMLHttPRequest对象
s2: 编写一个处理函数，绑定到XMLHttpRequest对象的onreadystatechange事件上，该处理函数用于在ajax请求的状态发生变化时进行相应的处理
s3: 在XMLHttpRequest对象上oPEn一个request，形如：xmlHttp.open("GET", "status.jsp?id="+Math.random());
s4: setRequestHeader("header", "value");可以设置各种header，如果服务器端不需要header信息，也可已省略这一步
s5: send() request
最为关键的就是s2和s3.
2、获取XMLHttpRequest对象
这么干就OK了。
[javascript]
VAR xmlHttp;
function createXmlHttpRequest()
{
if (window.XMLHttpRequest)
{
xmlHttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
xmlHttp=new ActiveXObject(";microsoft.XMLHTTP");
}
}
var xmlHttp;
function createXmlHttpRequest()
{
if (window.XMLHttpRequest)
{
xmlHttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
3、编写处理函数
处理函数基本就是这样：
[javascript]
function processXXX()
{
if (xmlHttp.readyState==4)
{
if (xmlHttp.status==200)
{
//……
}
}
}
function processXXX()
{
if (xmlHttp.readyState==4)
{
if (xmlHttp.status==200)
{
//……
}
}
}
可以通过xmlHttp得到responseText或者responseXML，分别得到服务器端的字符串形式或者xml形式的响应，前者通常是一段可以直接用来更新页面的内容，而后者是xml格式的数据，可以用js取出其中的元素值。根据需要选用一种之一即可。例如更新页面上的一个统计数值的处理函数如下：
[javascript]
function processStatistics()
{
var responseContext;
if (xmlHttp.readyState==4)
{
if (xmlHttp.status==200)
{
responseContext=xmlHttp.responseText;
document.getElementById("statistics").innerHTML=responseContext;
}
}
}
function processStatistics()
{
var responseContext;
if (xmlHttp.readyState==4)
{
if (xmlHttp.status==200)
{
responseContext=xmlHttp.responseText;
document.getElementById("statistics").innerHTML=responseContext;
}
}
}
4、发送异步请求
这一步是ajax的关键，通过调用xmlHttp的open和send方法来完成，例如：
[javascript]
xmlHttp.open("GET", "status.jsp?id="+Math.random(), true);
xmlHttp.send(null);
xmlHttp.open("GET", "status.jsp?id="+Math.random(), true);
xmlHttp.send(null);
一般request参数不多时用GET方式就可以，open的第二个参数是要请求的服务器端的一个url，可以是jsp或者servlet，也可已是struts2 action。如果是struts2 action的话，那么在自定义的action控制器中不要配置返回视图，直接在execute方法中用servlet api拿到PrintWrITer、写入要返回的内容并flush+close PrintWriter，在execute方法中return null（不跳转到某个试图）即可。url中的id参数是一个无实际意义的参数，但是非常重要，很多浏览器中都会有cache，请求一个地址时，浏览器会检查cache中是否有最近的该url的响应内容，如果有就不会向服务器发送请求，而是直接返回cache中的内容，这样可以提高浏览的速度。浏览器cache是基于这样一个假设：网页的内容不会在很短的一段时间内更新。但对于ajax，有时需要频繁地进行异步更新（如定时更新页面上的系统状态），所以需要加上一个随机的参数，防止cache中的内容影响页面的更新。open的第三个参数为true表示采用异步方式处理请求，ajax必须用true，一般该参数在缺省情况下都是true。
send方法的参数在GET方式下为null即可，在POST方式下send的参数就是要发送的key-value数据，多条数据之间用&分隔，如果post要以表单的形式发送数据，还需要设置header:
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的javascript代码实例教程-Ajax使用小结全部内容，希望文章能够帮你解决javascript代码实例教程-Ajax使用小结所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。