ajax技术的应用及总结

Ajax(Asynchronous JavaScript and XML)是一个结合了Java技术、XML、以及JavaScript的web开发模式,可以让你构建基于Java技术的Web应用,解决了web开发中经常碰到的页面重载问题(即不需要页面刷新便可轻易实现服务器端数据的获取)

       本例中的应用是基于java的Servlet技术(也可以很容易的扩展到bean中实现),共需要创建三个文件: index.jsp    AjaxUse.java    web.xml

---------------index.jsp文件代码

<%@ page contentType="text/html;charset=GB2312"%>
<html>
<title>Ajax应用</title>
<head>
<script language="javascript">
var req;
function sendData() {
   var idField = document.getElementById("userid");
   var url = "servlet/AjaxUse?id=" + escape(idField.value);
   waitMessage();
   if (window.XMLHttpRequest) {
       req = new XMLHttpRequest();
   } else if (window.ActiveXObject) {
       req = new ActiveXObject("Microsoft.XMLHTTP");
   }
   req.open("GET", url, true);
//open包含5个参数:(http-method, url, async, userID, password) 前三个是必要的,后两个是可选的
//----http-method: HTTP的通信方式,比如GET或是 POST
//----url: 接收XML数据的服务器的URL地址。通常在URL中要指明 ASP或CGI程序
//----async: 布尔标识.如是异步通信方式(true),客户机不等待服务器的响应;如是同步方式(false),客户机就要等到服务器返回消息后才去执行其他操作
//----userID: 用户ID,用于服务器身份验证
//----password 用户密码,用于服务器身份验证
   req.onreadystatechange = callback;
//如用POST方法,需添加如下内容
//----req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//----req.send("id=ok");
   req.send(null);
}
function callback() {
    if (req.readyState == 4) {
//XMLHTTP对象中的readyState属性能够反映出服务器在处理请求时的进展状况
//----0 Response对象已经创建,但XML文档上载过程尚未结束
//----1 XML文档已经装载完毕
//----2 XML文档已经装载完毕,正在处理中
//----3 部分XML文档已经解析
//----4 文档已经解析完毕,客户端可以接受返回消息
        if (req.status == 200) {
//检查是否成功接收了服务器响应
             parseMessage();
        }
    }
}
function parseMessage() {
   var message = req.responseXML.getElementsByTagName("data");
   var str=new Array();
   if(message.length>=1){
       for(var i=0;i<message.length;i++){
          str[i]=message[i].firstChild.data;
       }
   }else{
      str[0]=message.length;
   }
    mdiv = document.getElementById("userIdMessage");
    mdiv.innerHTML = "<div>"+str[0]+"</div>";
}
function waitMessage() {
    mdiv = document.getElementById("userIdMessage");
    mdiv.innerHTML = "<div>请稍后----</div>";
}
</script>
</head>
<body bgcolor=silver>
<font size=2>输入一个数字,通过ajax将会在页面静态获取服务器端相应:</font>
<input type="text" name="id" id="userid" size="20">
<input type="button" value="发送" οnclick="sendData()">
<div id="userIdMessage"></div>
</body>
</html>

---------------AjaxUse.java  文件代码

package com.servlet;

import javax.servlet.*;
import javax.servlet.http.*;

public class AjaxUse extends HttpServlet {
    private ServletContext context;
    public void init(ServletConfig config) throws ServletException {
        this.context = config.getServletContext();
    }
    public void doGet(HttpServletRequest request, HttpServletResponse  response)
        throws IOException, ServletException {
        String targetId = request.getParameter("id");
        StringBuffer sb=new StringBuffer("<message>");
        response.setContentType("text/xml");
        response.setHeader("Cache-Control", "no-cache");
        sb.append("<data>LiaoNing</data><data>ShenYang</data>");
        sb.append("</message>");
        PrintWriter out=response.getWriter();
        out.write(sb.toString());
        out.close();
         }
    }
}

---------------web.xml  文件代码

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd">
<web-app>
  <servlet>
    <servlet-name>AjaxUse</servlet-name>
    <servlet-class>com.servlet.AjaxUse</servlet-class>
  </servlet>
   <servlet-mapping>
        <servlet-name>AjaxUse</servlet-name>
        <url-pattern>/servlet/AjaxUse</url-pattern>
    </servlet-mapping>
</web-app>

本例是通过一个Button按钮来触发客户端的sendData()方法向服务器发送数据,如果需要实现过一个固定时间默认向服务器发送数据,可以在javascript代码中加入定时器:setInterval("sendData()",1000),定时器单位为毫秒.

使用总结:
   在使用中通常可能碰到如下问题:
   1>使用ajax传输数据的页面,如果使用了定时传输setInterval(),而且传输时间间隔设置的比较短,会造成如果试图点击本页面的一些链接,反映会比较迟钝;
   2>如果传输的数据量比较大,动态数据加载显示的时候会有一点延迟,在这里建议对req.readyState不等于4(即客户端尚未完成接收数据)的情况进行处理,例如加入"数据加载中"等提示信息;
   3>如果从服务器端传送过来的数据是以text/xml格式,则会出现中文问题。例如当你传送的数据中包含中文的时候,这时如果在客户端对接收到的数据仍以xml格式进行解析,则会解析不出任何数据,而且也不会报出任何异常。关于这种情况,针对xml格式需要添加一项编码格式设置,如<?xml version="1.0" encoding="GBK" ?>;或者把传送的数据格式换为text/html,这样则不需要任何设置,但是在客户端对接收到的数据进行解析可能就会麻烦一点,有两种方法:一种是用"字符串.split()"按照一些特定字符串对整个数据串进行切割;一种是用正则表达式,例如用req.responseText.match(/<data>(.*?)<//data>/g);对<data></data>中间包含的数据进行匹配,但是有一个小问题,这里匹配之后得到的数据仍然还包含<data></data>这两个标签,在后面的代码中还需要对这两个标签进行清除:"str.replace("<data>","");str.replace("</data>","");"

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值