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="发送" onclick="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>","");"
Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=521742
分享到：
相关推荐
总结来说，AJAX技术在用户登录模块的应用，通过异步通信提升了交互体验，简化了服务器处理，实现了更高效的网页操作。在实际开发中，开发者还可以结合其他前端框架和库（如jQuery，Vue.js，React等）进一步优化这一...
二、Ajax技术背景及发展历程 Ajax技术的发展不可能像孙悟空一样“砰”地一声从石头里面蹦出来，Ajax伴随着web技术的发展而产生的，Ajax的产生也带来了由web1.0向2.0的转变。可以说Ajax是为了解决传统的web应用当中...
总结起来，Ajax技术是现代Web开发中的重要工具，它提高了网页的响应性和用户体验。通过理解其基本原理和API，开发者可以创建出更高效、更互动的网页应用程序。结合jQuery等库，可以进一步简化Ajax的使用，使其更易于...
Ajax（Asynchronous JavaScript and XML）是一种在无需刷新整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换，使网页实现异步更新。在这个例子中，我们看到一个简单的Ajax应用，...
AJAX技术革新了Web应用的开发方式，通过异步数据处理和动态网页更新，显著提升了用户体验和应用性能。然而，合理评估其应用场景与限制，才能发挥其最大效能。同时，深入理解AJAX背后的各项技术，如DOM、...
**AJAX 技术总结与设计模式** ...总结来说，AJAX 是一种强大的技术，通过设计模式的运用，可以构建高效、可维护的异步交互应用。了解并熟练掌握 AJAX 及其设计模式，对于提升 web 应用的性能和用户体验至关重要。
**AJAX技术概要** AJAX（Asynchronous ...8. 课程总结和答疑环节，解答学员对AJAX技术应用的疑惑。 通过这样的课程，开发者能够深入了解AJAX技术，掌握如何将其应用于Web应用开发中，提升应用的交互性和用户体验。
总结，Ajax技术通过组合各种Web技术，极大地提升了网页的交互性和用户体验，但在使用时需要根据具体场景选择合适的应用，避免造成不必要的困扰。同时，XML作为数据交换的载体，与Ajax配合，共同推动了Web应用程序的...
以下是AJAX的核心组成部分和技术应用的详细解析： 1. **基于Web标准的表示**： - **XHTML+CSS**：用于页面布局和样式设置，XHTML是一种更加严格的HTML版本，CSS则用于控制页面的外观和布局。 2. **DOM（Document ...
### Ajax技术在ASP.NET应用 #### 一、实验目的与背景 随着Web应用程序的发展，用户对交互性和响应速度的要求越来越高。传统的Web开发模式在处理大量数据时常常导致用户体验下降，而Ajax（Asynchronous JavaScript ...
**总结：**Ajax实例演示源代码为我们提供了学习和理解Ajax工作原理的实用资源。通过分析和实践这个例子，开发者能更好地掌握如何在实际项目中利用Ajax提升用户体验，同时也应关注其带来的挑战和限制。在不断发展的...
总结起来，Ajax技术通过JavaScript和XMLHttpRequest对象实现了Web页面的局部更新，减少了页面的刷新，提高了交互性和效率。通过逐步学习和实践，开发者可以利用Ajax技术构建更高效、更动态的Web应用程序。在后续的...
总结来说，Ajax技术的引入极大地推动了Web 2.0的发展，使得Web应用程序更加动态和交互性更强。然而，随着客户端代码的增加，安全问题也随之而来，例如XSS（跨站脚本攻击）和CSRF（跨站请求伪造）等。因此，在利用...
#### 三、基于AJAX的技术应用 - **AFLAX**：一种“派生/合成”式的AJAX技术，结合了AJAX和其他技术的特点，例如Flex。 #### 四、AJAX支持的Web浏览器 目前大多数主流浏览器均支持AJAX技术，包括Mozilla Firefox、...
总之，Ajax技术通过JavaScript和XMLHttpRequest对象实现了Web应用的异步交互，提升了用户体验，但需谨慎选择合适的使用场景，避免影响正常导航和数据呈现。XML作为数据交换格式，为Ajax提供了数据描述和验证的基础。
AJAX技术通过异步数据交换和页面局部更新，极大地提升了网页应用的用户体验。然而，选择是否使用AJAX应根据具体应用场景，避免过度依赖或不当使用。同时，XML作为数据交换的基础，与AJAX结合，增强了数据的可操作性...
Ajax并非一种单一的技术，而是一组技术的综合应用，包括： 1. **JavaScript**：负责用户交互、发送请求和处理服务器响应。 2. **XMLHttpRequest对象**：这是Ajax的核心，它允许JavaScript在后台与服务器进行通信。 ...
**AJAX技术总结** AJAX（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。这种技术结合了JavaScript、XML、DOM、CSS以及浏览器提供的 XMLHttpRequest 对象，使得...