使用AJAX异步获取数据

 AJAX这个名字看起来很神奇,我第一次见到它也被它吸引了,它是Asynchronous JavaScript and XML的简写,异步的JAVASCRIPT和XML,关于AJAX的介绍在网上的介绍太多了,我就不多那么多了,我的口才不好,没他们说的那么精彩,可以去http://zh.wikipedia.org/wiki/AJAX 看看,在这里我只是给大家一个例子,了解如何去使用AJAX。

 AJAX最有意思的地方就是可以不用刷新网页而可以和后台进行交互,不需要对页面进行刷新,实现网页与网页间的平滑过渡。使用AJAX不需要安装新的插件,只要求你的浏览器支持JAVASCRIPT。

 首先你需要你个JAVASCRIPT中的对象XMLHttpRequest,它是AJAX的核心,我们都围绕着它做事,通过下面的代码可以获取一个:

if (window.XMLHttpRequest){
  xmlObj = new XMLHttpRequest();
 }else if (window.ActiveXObject){
  xmlObj = new ActiveXObject("Microsoft.XMLHTTP");
 }

我们通过这个对象的OPEN方法向服务发送请求,该函数声明为XMLHttpRequest.open(String method, String URL, boolean asynchronous);

method是请求的方式,可以为GET和POST
URL是你要请求的资源
asynchronous是布尔类型,为true表示交互设置为异步

xmlObj.open("GET",URL,true);
xmlObj.send("");

调用send()(参数是空或是null)将会发起一次请求,对于GET方式的请求,两次同样的请求将会得到相同的结果,由于为将交互设置为异步方式,因此要为指定一个回调函数:

xmlObj.onreadystatechange = callBackFunction;
剩下的事就交给回调函数处理了。有一点要注意了,用Servlet或JSP来响应异步请求时,要设置reponse的contentType属性指明是XML格式:

response.setContentType("text/xml");
一切都准备好了,那我们现在来做一个简单的异步请求,并将请求返回的结果显示出来:

客户端:

<html>
<script language="javascript">
function load(resource) {
 if (window.XMLHttpRequest){
  xmlObj = new XMLHttpRequest();
 }else if (window.ActiveXObject){
  xmlObj = new ActiveXObject("Microsoft.XMLHTTP");
 }else {
  return;
 }
 xmlObj.onreadystatechange = handleResponse;
 xmlObj.open("GET",resource,true);
 xmlObj.send("");
}
function handleResponse() {
 if (xmlObj.readyState == 4){//xmlObj loaded
  if (xmlObj.status == 200){
   var datas = xmlObj.responseXML.getElementsByTagName("data");
   var obj = document.getElementById("data");
   obj.innerText = datas[0];
  }
 }
}
</script>
<body>
 <p><a href="#" οnclick="load('data.jsp')">发送请求</a></p>
 <p id="data">看这里!</p>
</body>
</html>
以下是data.jsp

<%response.setContentType("text/xml");%>
<?xml version='1.0' encoding='gb2312' ?>
<home>
 <data>Zjcfan</data>
</home>

现在你就只需要启动WEB服务器,在页面里点击'发送请求','看这里!'将变为Zjcfan,这个过程中你将看不到页面的刷新,它们在后台悄悄的完成了以上的一切。是不是简单的不可思议呀!?做什么事情都是,你懂了就很简单,不懂就很难,是吧,呵呵~~~~~

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值