通过上一节的学习，基本了解Ajax的使用，
但是这样使用很麻烦，这里封装ajax为一个方法，作为一个ajax工具，传入相应参数就可以实现ajax的使用。
模仿jQuery的Ajax。
如下是jQuery的Ajax使用，只需要传入相应参数，即可实现Ajax
第一步：创建Ajax工具类：
function createXMLRequst(){
try{
return new XMLHttpRequest();
}catch(e)
{
try{
return new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
return new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
alert("不支持浏览器版本");
throw e;
}
}
}
}
function ajax(option)
{
var xmlHttp=createXMLRequst();
//打开链接
if(!option.method)//默认get
{
option.method="GET";
}
if(option.asyn==null)//默认为异步处理
{
option.asyn=true;
}
xmlHttp.open(option.method,option.url,option.asyn);
//POST需要设置请求头
if(option.method=="POST")
{
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
}
//发送请求，加上请求参数
xmlHttp.send(option.params);
//给异步对象的onreadystatechange事件注册监听器
xmlHttp.onreadystatechange=function()
{
//双重判断，判断是否为4的状态，并且响应状态码为：200
if(xmlHttp.readyState==4 && xmlHttp.status==200)
{
var data;
if(!option.type){
data=xmlHttp.responseText;
}else if(option.type=="xml"){
data=xmlHttp.responseXML;
}else if(option.type=="text"){
data=xmlHttp.responseText;
}else if(option.type=="json"){
var text=xmlHttp.responseText;
data=eval("("+text+")");
}
//调用回调函数
option.callback(data);
}
}
}
第二步：在jsp中引入该脚本，同时调用脚本中的ajax()方法，实现Ajax。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- 地址可以使用以下方式,也可直接写url
<script type="text/javascript" src="/AjaxDemo/ajax_lib/ajaxUtils.js"></script>
引入Ajax工具脚本 -->
<script type="text/javascript" src="<c:url value='/ajax_lib/ajaxUtils.js'/>" ></script>
<script type="text/javascript">
window.onload=function(){ //文档加载完毕后执行
var btn=document.getElementById("btn");
btn.onclick=function(){
ajax(
{
url:"/AjaxDemo/JsonAjax",
type:"json",
callback:function(data){
document.getElementById("h3").innerHTML=data.name+"，"+data.age+","+data.sex;
}
}
);
}
}
</script>
<title>测试Ajax工具</title>
</head>
<body> <h3>测试Ajax工具</h3>
<button id="btn">点击测试Ajax工具</button>
<h3 id="h3"></h3>
</body>
</html>
第三步：编写该Ajax调用的servlet：向客户端返回json字符串
package com.Ajax; import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; @WebServlet("/JsonAjax")
public class JsonAjax extends HttpServlet {
private static final long serialVersionUID = 1L; public JsonAjax() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");
//向客户端返回数据，由Ajax获取
response.getWriter().print("{\"name\":\"张三\",\"age\":\"32\",\"sex\":\"男\"}");
} protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
} }
运行结果：
