1、原生的
<script type="text/javascript">
window.onload = function(){
var a = document.getElementById("a");
a.onclick = function(){
//创建XMLHttpRequest对象,这是实现异步请求的关键
var request = new XMLHttpRequest();
//设置请求方式，请求路径
var method = "get";
var url = this.href;
//准备发送、发送（get方式没有参数，post方式需要准备参数）
request.open(method, url);
request.send(null);
//onreadystatechange检测XMLHttpRequest状态的改变（0-4），4表示完成
request.onreadystatechange = function(){
if(request.readyState == 4){
//检查返回数据是否可用
if(request.status == 200 || request.status == 304){
alert(request.responseText);
}
}
}
//取消<a>跳转行为
return false;
}
}
</script>
2、jquery很好的封装了ajax
demo：登录检测用户名是否可用。
login.jsp:
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>tets Ajax</title>
<script type="text/javascript" src="scripts/jquery-1.7.2.js"></script></head>
<script type="text/javascript">
$(function(){
$("input").change(function(){
var userName = $("input").val().trim();
if(userName != "" && userName.length > 0){
var url = "checkUserName";
//json格式
var message={"userName" : userName};
var type = "html";
$.get(url , message , function(data){
$("#info").empty().append($(data));
} , type);
}
});
});
</script>
<body>
<form action="" method="post">
用户名：<input type="text" name="userName"></input>
<div id="info"></div>
</form>
</body>
</html>
servlet:
package com.guigu.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class checkUserName extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html");
response.setCharacterEncoding("utf-8");
List<String> userStrings = new ArrayList<String>();
userStrings.add("aa");
userStrings.add("bb");
Object userName = request.getParameter("userName");
Boolean flageBoolean = userStrings.contains(userName);
if (flageBoolean) {
response.getWriter().print("<font color='red'>该名字已经注册</font>");
}else {
response.getWriter().print("<font color='red'>没注册</font>");
}
}
}
总结：
（1）返回的数据类型包括html(可以直接插入文档，也可以选择器过滤，但是有局限性)、xml（万能的数据传输，比较笨重）、json(最常用，轻巧方便)
（2）当用$.get()时，需要告诉返回数据的类型，否则无法解析数据
（3）当返回数据是xml,json时，都是先解析数据，构建html节点，最后加入文档。