出處:https://www.cnblogs.com/danyuzhu11/p/6840633.html
// 創建request對象
function createXMLHttpRequest() {
try {
return new XMLHttpRequest();//大多數瀏覽器
} catch (e) {
try {
return ActvieXObject("Msxml2.XMLHTTP");//IE6.0
} catch (e) {
try {
return ActvieXObject("Microsoft.XMLHTTP");//IE5.5及更早版本
} catch (e) {
alert("哥們兒，您用的是什麼瀏覽器啊？");
throw e;
}
}
}
}
/*
* option對象有如下屬性
*/
/*請求方式*/method,
/*請求的url*/ 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");
}
/*
* 4. 發送請求
*/
xmlHttp.send(option.params);
/*
* 5. 註冊監聽
*/
xmlHttp.onreadystatechange = function() {
if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {//雙重判斷
var data;
// 獲取服務器的響應數據，進行轉換！
if(!option.type) {//如果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);
}
};
};
--------------------------------------------------------------
使用上面的小工具：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<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">
<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() {
/*
1. ajax
*/
ajax(
{
url:"<c:url value='/BServlet'/>",
type:"json",
callback:function(data) {
document.getElementById("h3").innerHTML = data.username;
}
}
);
};
};
</script>
</head>
<body>
<%-- 點擊按鈕後，把服務器響應的數據顯示到h3元素中 --%>
<button id="btn">點擊這裏</button>
<h1>顯示自己封裝的ajax小工具</h1>
<h3 id="h3"></h3>
</body>
</html>