最近写了几个小的ajax例子,拿出来分享,高手请掠过,代码如下
var xmlHttpRequest;
function verify(){
var userName = document.getElementById("userName").value;
if (window.XMLHttpRequest) {
xmlHttpRequest = new XMLHttpRequest();
} else {
if (window.ActiveXObject) {
xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
}
//注册回调函数
xmlHttpRequest.onreadystatechange = callback;
//设置连接信息,用GET方式提交
//xmlHttpRequest.open("GET","AJAXServlet?name=" + userName,true);
//发送数据
//xmlHttpRequest.send(null);
//设置连接信息用POST方式提交
xmlHttpRequest.open("POST","AJAXXMLServlet",true);
//设置http的请求头
xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttpRequest.send("name=" + userName);
}
function callback(){
//判断对象交互是否完成
if(xmlHttpRequest.readyState == 4){
//判断http交互是否完成
if(xmlHttpRequest.status == 200){
var obj = xmlHttpRequest.responseXML;
if(obj){
var messageNodes = obj.getElementsByTagName("message");
if(obj.length > 0){
var message = messageNodes[0].firstChild.nodeValue;
document.getElementById("result").innerHTML = message;
}
}else {
window.alert("数据格式不正常");
}
}else {
window.alert("出错");
}
}
}
服务器端代码
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.ServletException;
import java.io.IOException;
import java.io.PrintWriter;
public class AJAXXMLServlet extends HttpServlet {
protected void doPost(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
doGet(httpServletRequest,httpServletResponse);
}
protected void doGet(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
httpServletRequest.setCharacterEncoding("UTF-8");
httpServletResponse.setContentType("text/xml;charset=UTF-8");
String name = httpServletRequest.getParameter("name");
PrintWriter out = httpServletResponse.getWriter();
StringBuilder sb = new StringBuilder();
sb.append("<message>");
if(null == name || "" == name){
sb.append("用户名不能为空").append("</message>");
out.println(sb.toString());
}else if("xiaoming".equals(name)){
sb.append("用户名[" + name + "]已经存在").append("</message>");
out.println(sb.toString());
}else {
sb.append("用户名[" + name + "]可以使用").append("</message>");
out.println(sb.toString());
}
out.close();
}
}
上面处理的是服务器端返回的xml格式的数据,在Servlet中要记得设置
httpServletResponse.setContentType("text/xml;charset=UTF-8");
即返回的文本格式需为xml
分享到:
相关推荐
其实在学习之前,就已经用上了js,jquery和ajax,不过当时不清楚这些的区别,就全都当成js来看,然后别人一说jquery,ajax都觉得好像很高级,等到自己学习的时候,倒是对这些更清楚了一点,下面就来写一下我的总结。...
**Ajax异步请求小结** Ajax(Asynchronous JavaScript and XML)是一种用于创建快速、动态网页的技术,它允许在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页内容。这种技术极大地提升了用户体验,...
### Ajax乱码问题详解 #### 一、Ajax乱码概述 在使用Ajax技术进行前后端交互的过程中,常常会遇到字符编码的问题,特别是当涉及到中文或其他非ASCII字符时,容易出现乱码现象。根据题目中的描述,“Ajax乱码:当...
jQuery是一个快速、小巧的JavaScript库,它封装了JavaScript的动画效果和Ajax等技术,简化了这些技术在使用时的操作。在现代Web开发中,AJAX技术用于实现页面的异步更新,jQuery通过提供的一系列AJAX相关方法,极大...
AJAX允许我们在不刷新整个页面的情况下,与服务器进行异步通信,提升用户体验。下面将详细解释相关知识点。 1. **AJAX基本原理**: AJAX的核心是创建XMLHttpRequest对象(在本例中是`http`变量),它负责在后台与...
1.8 小结 21 第2章 使用xmlhttprequest对象 23 2.1 xmlhttprequest对象概述 23 2.2 方法和属性 25 2.3 交互示例 26 2.4 get与post 28 2.5 远程脚本 29 2.5.1 远程脚本概述 29 2.5.2 远程脚本的示例 29 2.6 ...
【标题】:“一个简单的jsp聊天室(ajax技术)” 在这个项目中,我们探索了一个基于JSP和AJAX技术实现的简单聊天室。JSP(JavaServer Pages)是用于创建动态网页的技术,它允许开发者在HTML代码中嵌入Java代码,...
第4章 Ajax服务器扩展剖析 86 4.1 ASP.NET开发人员的Ajax 86 4.2 改进原有ASP.NET网站 87 4.2.1 一个示例ASP.NET网站 88 4.2.2 配置现有的ASP.NET网站 88 4.3 ScriptManager: Ajax页面的大脑 90 ...5.5 小结 145
1.5 小结 1.6 资源 第2章 Ajax新手上路 2.1 Aiax的关键元素 2.2 用JavaScript改善用户体验 2.3 用CSS定义应用的外观 2.3.1 CSS选择器 2.3.2 CSS样式属性 2.3.3简单的CSS例子 2.4 用DOM组织视图 2.4.1 使用JavaScript...
**4.10 小结** - **总结要点:** - Ajax技术可以应用于多种场景。 - 掌握基本的Ajax实现方式,如动态加载内容、表单验证等。 - 理解与服务器通信的基本原理。 #### 五、构建完备的Ajax开发工具箱 **5.1 使用...
这两种方法的核心在于使用`<input type="button">`或`<a>`标签的`onclick`事件来触发AJAX请求,并且通过JavaScript获取表单中的数据,将其转换为JSON格式,然后发送到服务器端。这种方法不仅提高了页面的交互性,还...
AJAX与JSONP跨域访问问题小结 AJAX(Asynchronous JavaScript and XML)是一种在无需重新加载整个页面的情况下,能够更新部分网页的技术。它通过使用XMLHttpRequest对象来与服务器进行异步通信。XMLHttpRequest对象...
#### 六、小结 通过本篇文章的学习,我们了解了AJAX的基本概念以及如何使用`XMLHttpRequest`对象来发送和接收数据。掌握这些基础知识对于前端开发者来说是非常重要的,因为它可以帮助我们在不刷新页面的情况下实现...
以下是一些关于Ajax使用的小贴士: 1. **选择JavaScript库**:在进行Ajax开发时,使用合适的JavaScript库可以极大地简化工作。常见的库包括: - **YUI (Yahoo! User Interface Library)**:由雅虎开发,提供了丰富...