一个最基本的Ajax应用：验证用户名的例子：
首先建立一个web project: ajaxTest
webRoot\js(myjs.js)
webRoot\jsp(test1.jsp)
com.zxr.servlet中是Servlet:ServiceServlet.java
test1.jsp:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
....
<body>
<li>用户名校验小实验</li>
<hr/>
<input id="userName" type="text"/>
<input type="button" value="提交" onclick="checkvalidate();"/>
<div id="propmt"></div>
</body>
.....
ServiceServlet.java
package com.zxr.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.net.URLDecoder;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.lang.StringUtils;
/**
* 2010-03-28
* @author zxr
*
*/
public class ServiceServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
StringBuilder msg=new StringBuilder();
String name=request.getParameter("name");
//name=new String(name.getBytes("ISO-8859-1"),"UTF-8");
name=URLDecoder.decode(name,"UTF-8");
if(StringUtils.isEmpty(name)){
msg.append("用户名不能为空");
}else{
if(StringUtils.equals(name, "zxr")){
msg.append("对不起，此用户["+name+"]已存在，请使用别的名称!");
}else{
msg.append("恭喜你，此用户名：["+name+"]可以使用！");
}
}
out.print(msg.toString());
out.close();
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doGet(request, response);
}
}
web.xml
<servlet>
<description>This is the description of my J2EE component</description>
<display-name>This is the display name of my J2EE component</display-name>
<servlet-name>ServiceServlet</servlet-name>
<servlet-class>com.zxr.servlet.ServiceServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>ServiceServlet</servlet-name>
<url-pattern>/servlet/ServiceServlet</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>jsp/test1.jsp</welcome-file>
</welcome-file-list>
myjs.js
var xmlhttprequest;
function checkvalidate(){
//获取页面dom节点的元素的值
//解决中文乱码问题：方法一：页面端发出 数据做一次encodeURI,服务器端使用new String(xxx.getBytes("ISO-8859-1"),"UTF-8");
//方法二：页面端做两次encodeURI,服务器端使用URLDecoder.decode(xxx,"UTF-8");即可（推荐使用）
var username=encodeURI(encodeURI(document.getElementById("userName").value));
//alert(username);
//创建XMLHttpRequest对象
//针对不同浏览器，写出不同的创建方式
if(window.XMLHttpRequest){
//针对FirFox, Mozillar,Opera, Safari,IE7,IE8
xmlhttprequest=new XMLHttpRequest();
//针对特定的Mozillar浏览器进行bug修正
if(xmlhttprequest.overrideMimeType){
xmlhttprequest.overrideMimeType=("text/xml");
}
}else if(window.ActiveXObject){
//针对IE6，IE5
var activeName=["MSXML@.XMLHTTP","Microsoft.XMLHTTP"];
for(var i=0; i<activeName.length; i++){
try{
//取出一个插件名进行创建，如果成功就终止循环，反正继续循环试图创建
xmlhttprequest=new ActiveXObject(activeName[i]);
break;
}catch(e){}
}
}
//确认XMLHttpRequest对象创建
if(!xmlhttprequest){
alert("创建失败");
return ;
}else{
alert("恭喜你创建成功！"+xmlhttprequest);
}
//注册回调函数( 注意只需函数名，而不需要())
xmlhttprequest.onreadystatechange=callback;
//设置连接信息
//第一参数：http请求的方式，支持所有http请求方式，主要使用get和post
//第二参数：请求的服务器端url地址，get方式参数也在其中
//第三参数：是同步还是异步交互 ： false:同步，true:异步
xmlhttprequest.open("GET", "servlet/ServiceServlet?name="+username, true);
//发送数据,开始和服务器端进行交互
xmlhttprequest.send(null);
}
//回调函数
function callback(){
//接受响应数据
//判断对象的状态是否交互 完成
if(xmlhttprequest.readyState==4){
//判断http交互是否成功
if(xmlhttprequest.status==200){
//获取服务器端返回的数据
alert(xmlhttprequest.responseText);
var respText=xmlhttprequest.responseText;
//将数据 显示在页面上
var divNode=document.getElementById("propmt");
divNode.innerHTML=respText;
}
}
}
然后在IE或FireFox下输入：http://localhost:8080/ajaxTest/即可测试
对于中文乱码，我在Opera浏览器下测试未成功，请大家多指教，以解吾之惑....
分享到：
相关推荐
XMLHttpRequest（XHR）是Web开发中的一个关键技术，它允许JavaScript在不刷新整个页面的情况下与服务器进行异步数据交换，这就是我们常说的AJAX（Asynchronous JavaScript and XML）。本压缩包包含了一些...
在Web开发中，XMLHttpRequest（XHR）是一种关键的异步通信技术，用于在不刷新整个页面的情况下与服务器进行数据交互。这种技术对于实现Ajax（Asynchronous JavaScript and XML）应用程序至关重要，它允许用户与网页...
总结来说，Ajax通过XMLHttpRequest对象实现了异步数据交换，提高了网页的交互性和用户体验。学习Ajax，首先要掌握创建XMLHttpRequest对象、设置请求、发送请求以及处理响应的基本步骤。通过不断实践和深入学习，你将...
在JavaScript中，创建一个新的XMLHttpRequest对象非常简单，只需通过`new XMLHttpRequest()`即可。然后，我们需要使用`open()`方法来初始化一个请求。`open()`接收三个参数：请求类型（如GET、POST）、URL和一个布尔...
为了实现这种异步数据通信，JavaScript提供了一种强大的工具——`XMLHTTPRequest`对象。通过这个对象，开发者能够轻松地从服务器请求数据并处理响应结果，从而实现网页的部分更新而无需重新加载整个页面。 #### ...
在GWT（Google Web Toolkit）开发中，XMLHttpRequest（XHR）是实现客户端与服务器间异步数据交换的关键技术。GWT提供了对XHR的封装，使得开发者可以方便地使用JavaScript的XMLHttpRequest对象，而无需直接接触底层的...
在这个“一个简单的xmlHttpRequest AJAX的例子”中，我们将探讨如何使用XMLHttpRequest对象来实现基本的AJAX请求。 首先，我们需要创建一个新的XMLHttpRequest实例。在JavaScript中，这是通过`new XMLHttpRequest()...
这里我们关注的是如何使用XMLHttpRequest对象来实现一个简单的信息验证功能。 XMLHttpRequest是Ajax的核心组件，它提供了一种异步与服务器通信的方式。以下是一个基本的XMLHttpRequest的使用流程： 1. **创建实例*...
通过上述介绍，我们可以看到 XMLHTTPRequest 为前端开发者提供了一种非常强大的工具，使得异步数据交互变得更加简单。掌握 XMLHTTPRequest 的使用方法对于任何希望开发现代 Web 应用程序的前端开发者来说都是必不可...
以上就是一个简单的XMLHttpRequest使用示例，通过这个例子，我们可以实现异步地向服务器发送数据，获取并处理返回的数据，而无需刷新整个页面。在实际项目中，XMLHttpRequest常常被用于AJAX（Asynchronous ...
XMLHttpRequest（XHR）是JavaScript中的一个关键对象，它允许Web页面在不刷新整个页面的情况下，与服务器进行异步数据交换，从而实现网页的动态更新。当我们结合C#和XMLHttpRequest，可以创建强大的客户端-服务器...
1. XMLHttpRequest对象的使用：XMLHttpRequest是JavaScript中的一个API，用于在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页。它是一种支持异步通信的互联网技术。通过创建XMLHttpRequest对象，...
XMLHttpRequest对象是Ajax技术的核心，它是现代Web应用中用于实现客户端与服务器间异步数据交换的关键组件。在不刷新整个页面的情况下，XMLHttpRequest允许开发者通过JavaScript动态更新网页内容，极大地提升了用户...
创建一个XMLHttpRequest对象实例非常简单。在JavaScript中，可以通过`new XMLHttpRequest()`来实现。例如： ```javascript var request = new XMLHttpRequest(); ``` #### 四、关键方法与属性详解 XMLHttpRequest...
XMLHttpRequest（简称XHR）是Web开发中的一个关键技术，它允许JavaScript在不刷新整个页面的情况下与服务器进行异步数据交换，这种技术被称为AJAX（Asynchronous JavaScript and XML）。XMLHttpRequest中文参考手册...
Ajax技术的核心是XMLHttpRequest对象，它允许网页在不重新加载整个页面的情况下，与服务器进行数据交换，从而实现局部刷新，提升响应速度和交互性。 ### Ajax与XMLHttpRequest Ajax技术最早由Adaptive Path提出，...
在JavaScript中创建一个XMLHttpRequest实例非常简单： ```javascript var xhr = new XMLHttpRequest(); ``` **一、初始化请求** 初始化请求是通过`open()`方法实现的，它接受三个参数：请求类型（如"GET"或"POST...