封裝自己的ajax工具包

最後更新：2018-07-28 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

（1）js檔案

// 建立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);
}
};
};

（2）使用封裝的ajax工具包

<%@ 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='/AServlet'/>",
type:"json",
callback:function(data) {
document.getElementById("h3").innerHTML = data.name + ", " + data.age + ", " + data.sex;
}
}
);
};
};
</script>
</head>

<body>
<%-- 點擊按鈕後，把伺服器響應的資料顯示到h3元素中 --%>
<button id="btn">點擊這裡</button>
<h1>顯示自己封裝的ajax小工具</h1>
<h3 id="h3"></h3>
</body>
</html>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More