最简单的ajax例子

  自从Jesse James Garrett创造了AJAX这个名词，到现在已经过去十八个月了，AJAX几乎让Web开发彻底改头换面。在这一年半的时间里，发生了很多事情，包括Web 2.0的热炒，许多创建或使用富互联网技术公司的诞生或复苏，还有真正动态化的在线软件层出不穷。很明显，AJAX这个名词受到开发业界的广欢迎，已经真正的走入到我们生活中，Web应用程序也达到前所未有的发展。

   如此火爆的技术难道我们还不去体验下吗？

   首先推荐大家两本中文版ajax书（相信不少人都有了），Ajax.基础教程和AJAX In Action， 因为文件比较大电子邮件无法发送。有需要的朋友可以加我QQ 373437（请注明javaeye） 我可以发给大家，我基本每天在线的。

   下面就开始我们第一次ajax 之旅吧

   下面介绍的是一个最简单的ajax完整例子， 为了让完全没有接触过ajax的朋友看懂，我写了非常详细的注释 请不要嫌我罗嗦：）

  simple.jsp 文件代码

<!---->

<script type="text/javascript">

//定义一个变量，用来指向XMLHttpRequest对象
var xmlHttp;

//异步请求时调用的方法
function startRequest()
{
  //该方法用来产生一个XMLHttpRequest对象
  createXMLHttpRequest();
 
  /**将XMLHttpRequest的属性onreadystatechange存储了回调函数的指针
     如果XMLHttpRequest的readyState改变时就会调用回调函数，和C#里的委托是类似的
     这里将指针指向了handlestatechange方法**/
  xmlHttp.onreadystatechange=handlestatechange;
 
  /*打开对服务器的调用第一个参数用来指定是get还是post方法访问，第二个参数是要访问的路径*/
  xmlHttp.open("GET","simple.xml");
 
  //向服务器发送请求
  xmlHttp.send(null);
}

//改方法用来针对不同的浏览器产生一个XMLHttpRequest对象
function createXMLHttpRequest()
{
  //判断如果浏览器是IE
  if(window.ActiveXObject)
  {
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  //非IE的浏览器
  else if(windox.XMLHttpRequest)
  {
    xmlHttp = new XMLHttpRequest();
  }
}

//XMLHttpRequest的readyState改变时调用改方法
function handlestatechange()
{
  //readyState有5个值，4表示请求完成，其他是0=未初始化，1=正在加载，2=以加载，3=交互中
  if(xmlHttp.readyState==4)
  {
    //status 表示服务器请求状态 下面列出了一些基本状态
    if(xmlHttp.status==200)
    {alert("请求成功");
      alert("server:++++++++++"+ xmlHttp.responseText);
    }
    if(xmlHttp.status==202)
    {alert("请求被接收，但处理未完成");
      alert("server:++++++++++"+ xmlHttp.responseText);
    }
    if(xmlHttp.status==400)
    {alert("错误的请求");
      alert("server:++++++++++"+ xmlHttp.responseText);
    }
    if(xmlHttp.status==404)
    {alert("请求资源未找到");
      alert("server:++++++++++"+ xmlHttp.responseText);
    }
    if(xmlHttp.status==500)
    {alert("内部服务器错误　代码问题");
      alert("server:++++++++++"+ xmlHttp.responseText);
    }

  }
}
</script>

<!---->
input type="button" onclick="startRequest();" value="ajax"/   

<!---->

 

<!---->

 

注意看提交后页面是不是全部刷新

在目前的Web2.0热潮中，Ajax已成为人们谈论最多的技术术语！其实，AJAX(Asynchronous JavaScript and XML)是多种技术的综合，它使用XHTML和CSS标准化呈现，使用DOM实现动态显示和交互，使用XML和XSTL进行数据交换与处理，使用XMLHttpRequest对象进行异步数据读取，使用Javascript绑定和处理所有数据。更重要的是它打破了使用页面重载的惯例技术组合，可以说AJAX已成为Web开发的重要武器！

simple.xml代码
可以随便写点东西，这里就不帖了

 

评论

1 楼 92java 2007-07-13  

新手入门ajax的好博客。。
我使用的时候发现 xmlHttp.open("GET","simple.xml");；里面的url是个问题？
那位可以详细解释下这个url路径。。。。