我們在用html三劍客編寫網站或者後臺管理程序的時候，現在多數使用異步請求。如果使用jquery，異步請求很方便。
我們的項目，後臺使用java springboot設計，統一套用了自定義的請求協議，方便各端進行模式化封裝。請求方式也全部統一成了post請求，所有協議和請求參數，一級返回的協議和數據也都全部打包生成json，構建到RequestBody中進行發送。
我本來是做Android的，後來到新公司寫java後臺。按照我的習慣，我已經把相關的加夠封裝好了。出於興趣，還有時不時會出現一些簡單的做管理後臺的需求，我也會接觸html對網絡的請求。於是我就做了一個html的基本架構模型。
一、首先需要創建項目，把項目程序的結構做一點規劃。
二、需要導入一些必要的庫。我爸需要導入的庫放入baseimport.html文件進行了統一處理，減少了繁瑣的操作，便於統一管理。
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
<script type="text/javascript" src="../js/login.js"></script>三、設計一個頁面login.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta content="text/html;charset=UTF-8">
<title>登錄系統</title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
<script type="text/javascript" src="../js/login.js"></script>
</head>
<body>
<h1>登錄</h1>
<hr>
<table>
<tr>
<td>手機號碼：</td>
<td><input id="username" type="text" name="userName" value="chris"/></td>
</tr>
<tr>
<td>AuthCode：</td>
<td><input id="password" type="text" name="password" value="gk123456"/></td>
</tr>
<tr>
<td colspan="2">
<button id="login" style="width: 100%">登錄</button>
</td>
</tr>
</table>
<div id="info"></div>
</body>
</html>四、然後是一系列的js文件
1. properties.js文件，存放系統常量
var baseUrl="http://192.168.2.19:8080/"2. bean.js文件，存放網絡請求實體類，有了這個，以後的處理既簡潔又方便
//請求體類
var WebRequest = function (data) {
this.token = "";
this.ver = "";
this.data = data;
this.setToken = function (token) {
this.token = token;
}
this.setVer = function (ver) {
this.ver = ver;
}
this.setData = function (data) {
this.data = data;
}
}
//登錄請求參數類
var LoginParams = function () {
this.name = "";
this.password = "";
this.setName = function (name) {
this.name = name;
}
this.setPassword = function (password) {
this.password = password;
}
}3. jsonutils.js文件，進行json轉換的工具類
// 把對象轉換爲json
var ToJson = function (data) {
return JSON.stringify(data);
}4. requestutils.js文件，進行網絡異步請求的工具類
// 把對象轉換爲json
var RequestBodyAjax = function (url, requestBody,callback) {
$.ajax({
type: 'post',
url: url,
data: requestBody,
contentType: 'application/json',
}).success(function (data) {
console.debug(data);
callback(data);
}).error(function () {
alert("request failed");
});
}5.login.js文件，和login.html頁面綁定的程序文件，這是本次封裝的最後一個文件，也是最核心的一個文件。前面的所有封裝都是爲這個文件服務的。
//爲頁面引入實體類文件
document.write("<script type='text/javascript' src='../js/properties.js'></script>")
document.write("<script type='text/javascript' src='../js/beans.js'></script>")
document.write("<script type='text/javascript' src='../js/jsonutils.js'></script>")
document.write("<script type='text/javascript' src='../js/requestutils.js'></script>")
$(function () {
$("#login").click(function () {
var userName = $("#username").val();//用戶名
var password = $("#password").val();//密碼
// 創建參數對象
var params = new LoginParams();
params.setName(userName);
params.setPassword(password);
// 創建請求體
var loginRequest = new WebRequest(params);
//這裏只是示範架構，token應該是登錄之後獲取的
//而且要寫入到本地，方便各處調用
loginRequest.setToken("ttyyuuii");
loginRequest.setVer("1.0");
// 構建requestBody
var requestBody = ToJson(loginRequest);
// 構建請求回調
var callback = function (data) {
$("#info").html(data);
}
// 發起異步請求
var url = baseUrl + 'getUser';
RequestBodyAjax(url, requestBody, callback);
});
});五、運行結果
