前端页面：index.jsp
<%--
Created by IntelliJ IDEA.
User: wustrive_2008
Date: 2011-3-22
Time: 18:24:36
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>myajax校验</title>
<script type="text/javascript" src="verify1.js"></script>
</head>
<body>
用户名： <input type="text" id="username" />
<input type="button" value="提交" onclick="verify()"/>
<div id="message" style="color:red"></div>
</body>
</html>
服务器端Servlet：AJAXServlet.java及web.xml
AJAXServlet.java:
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
/**
* Created by IntelliJ IDEA.
* User: wustrive_2008
* Date: 2011-3-22
* Time: 18:30:12
* To change this template use File | Settings | File Templates.
*/
public class AJAXServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
try{
resp.setContentType("text/html;charset=UTF-8");
PrintWriter out=resp.getWriter();
String name=req.getParameter("name");
if(name==null||name.length()==0){
out.print("用户名不能为空！");
}else{
if(name.equals("wustrive_2008")){
out.println("此用户名已经注册！");
}else{
out.println("恭喜你！该用户可以注册！");
}
}
}catch(Exception e){
e.printStackTrace();
}
}
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
doPost(req, resp);
}
}
web.xml:
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
version="2.5">
<servlet>
<servlet-name>AJAXServlet</servlet-name>
<servlet-class>AJAXServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>AJAXServlet</servlet-name>
<url-pattern>/AJAXServlet</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
一，使用XMLHttpRequest对象:verify1.js
var xmlhttp;
function verify(){
var userName=document.getElementById("username").value;
if(window.XMLHttpRequest()){
xmlhttp=new XMLHttpRequest();
if(xmlhttp.overrideMimeType){
xmlhttp.overrideMimeType("text/xml");
}
}else if(window.ActiveXObject()){
var activexName=["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
for(var i=0;i<activexName.length;i++){
try{
xmlhttp=new ActiveXObject(activexName[i]);
break;
}catch(e){
}
}
}
xmlhttp.onreadystatechange=callback;
//发送get请求
/*xmlhttp.open("GET","AJAXServlet?name="+userName,true);
xmlhttp.send(null);*/
//发送post请求
xmlhttp.open("POST","AJAXServlet");
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlhttp.send("name="+userName);
}
function callback(){
if(xmlhttp.readyState==4){
if(xmlhttp.status==200){
var response=xmlhttp.responseText;
var h=document.getElementById("message");
h.innerHTML=response;
}
}
}
二，使用JQuery库：verify.js(在index.jsp中导入jquery库文件及verify.js文件)
function verify(){
//jquery查找节点的方式。参数中#加上ID属性值可以找到一个节点
//jquery的方法返回的都是jquery对象，可以继续在上面执行其他jquery方法
var jqueryObj= $("#username")
var username=jqueryObj.val();
//alert(username);
//2，将数据发送到服务器Servlet
$.get("AJAXServlet?name="+username,null,callback);
}
function callback(data){
//3,接受服务器端返回的数据 data
//4,将数据动态显示到前台
var messageObj=$("#message");
messageObj.html(data);
}
分享到：
相关推荐
在本篇16ajax学习笔记1中，我们将探讨Ajax的基础概念、使用方法以及jQuery库中的Ajax实现。 1、发送请求： Ajax的首要任务是创建XMLHttpRequest对象，这是浏览器提供的API。在JavaScript中，我们可以通过new ...
ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习...
AJAX学习笔记。内含Java调用的两个实例，及JavaScript的ajax工具函数，可快速入门，也可当手册使用。个人精心整理，值得收藏。 更多：http://download.csdn.net/user/daillo/all
在这份超详细的Ajax学习笔记中，我们将深入探讨以下几个关键知识点： 1. **基础概念**：Ajax的核心是JavaScript对象XMLHttpRequest，它使得前端和后端能够进行异步通信。异步意味着用户在等待服务器响应时可以执行...
### AJAX学习笔记 #### 一、引言 Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。...
### Ajax学习笔记个人总结 #### 一、XMLHttpRequest对象简介 **XMLHttpRequest** 对象是 AJAX 技术的核心，它负责在客户端与服务器之间发送异步请求，无需刷新整个页面即可实现局部数据更新。要使用 ...
Ajax 学习笔记(1).rtf
web前端开发AJAX学习笔记
jQuery+AJAX学习笔记
**Ajax学习笔记代码详解** Ajax，全称Asynchronous JavaScript and XML，是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换，使网页实现异步更新。这种技术的...
AJAX学习笔记忘记了看一眼
以下是一份详细的Ajax学习笔记，涵盖了其基本概念、工作原理、优势与限制，以及实际应用。 ### 一、基本概念 Ajax的核心是JavaScript对象XMLHttpRequest（XHR），它允许浏览器在后台与服务器进行通信，而不会打断...
Ajax，全称Asynchronous JavaScript and XML，是一种在无需重新加载整个网页的情况下，能够更新部分网页的...Ajax.pdf和Ajax2.pdf很可能是关于这些概念的详细教程，包含了实例和实践指导，对于深入学习Ajax非常有帮助。
Ajax学习脑图笔记1
### Ajax和jQuery学习笔记 #### 一、Ajax基础与原理 **1.1 什么是Ajax？** Ajax（Asynchronous JavaScript and XML，异步JavaScript和XML）是一种用来创建快速动态网页的技术，通过在后台与服务器进行少量数据...
从给定的文件信息来看，这是一份详细的ZK-AJAX学习笔记，记录了从准备环境、下载运行ZK到深入学习各个组件的过程。ZK是一款基于Ajax的开源Web应用框架，它允许开发者使用类似桌面应用的组件来构建Web应用，而无需...
摘要：本节补充ajax学习笔记1中 第二种方式：使用XMLHttpRequest对象的responseXML的方式来接受XML数据对象的DOM对象 在ajax学习笔记1中已经对准备工作和需要用到的知识做了比较详细的介绍，本节主要介绍需要修改的...
### Head First Ajax 学习笔记知识点总结 #### 一、异步请求与AJAX概念 - **异步请求**：允许页面在发送请求时继续执行后续任务，无需等待服务器响应，提高了用户体验。 - **AJAX (Asynchronous JavaScript and ...
### ASP.NET AJAX 实战 学习笔记(一) #### 第一章 ASP.NET AJAX 基础 ##### 1.1 什么是Ajax **Ajax**（Asynchronous JavaScript and XML，异步JavaScript和XML）是一个术语，首次由用户体验专家Jesse James ...