AJAX学习笔记1
前端页面：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);
}