ajaxutils.js页面
//创建request对象
function createXMLHttpRequest(){
try{
return new XMLHttpRequest(); //大多数浏览器
}catch(e){
try{
return ActvieXobject("Msxml2.XMLHTTP"); //ie6
}catch(e){
try{
return ActiveXOBject("Microsoft.XMLHTTP");//ie5和之前
}catch(e){
alert("哥们,您用的什么浏览器呀");
throw e;
}
}
}
}
/* option对象有如下属性
* //请求方式 请求的url 是否异步 请求体 回调方法
method,url,asyn,params,callback,type
* */
function ajax(option){
//1.得到xmlHttp
var xmlHttp = createXMLHttpRequest();
//2.打开链接
if(!option.method){//默认为get请求
option.method = "GET";
}
if(option.asyn == undefined){//默认为异步
option.asyn =true;
}
xmlHttp.open(option.method,option.url,option.asyn);
//3.判断是否为Post
if("POST" == option.method){
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
}
option.params = null;
//4.发送请求
xmlHttp.send(option.params);
//注册监听
xmlHttp.onreadystatechange = function(){
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);
}
};
};
Json1.java( servlet /Json1)
package cn.itcast.web.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class Json1 extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String str = "{\"name\":\"zhangsan\",\"age\":18,\"sex\":\"male\"}";
response.getWriter().print(str);
System.out.println(str);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
}
}
json3.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
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>My JSP 'json3.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<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:"<c:url value='/Json1'/>",
type:"json",
callback:function(data){
document.getElementById("h3").innerHTML = data.name +", " + data.age +", " +data.sex;
}
}
);
};
};
</script>
</head>
<body>
<button id="btn">点击这里</button>
<h1>演示自己封装的小工具</h1>
<h3 id="h3"></h3>
</body>
</html>
结果