Ajax（Asynchronous JavaScript and XML，異步的 JavaScript 和 XML）是一種在無需重新加載整個網頁的情況下，能夠更新部分網頁的技術。
傳統的網頁（不使用Ajax），如果需要更新內容必須重新加載整個網頁，較麻煩，用戶體驗差。
Ajax主要用於創建快速動態網頁；應用實例：新浪微博、Google 地圖、開心網等等。
JSON（JavaScript Object Notation）一種簡單的數據格式，基於 ECMAScript (歐洲計算機協會制定的js規範)的一個子集，採用完全獨立於編程語言的文本格式來存儲和表示數據。意味着在JavaScript中處理JSON數據不需要任何特殊的API或工具包。
JQuery是一個快速、簡潔的JavaScript代碼庫（框架）。它封裝JavaScript常用的功能代碼，提供一種簡便的JavaScript設計模式，優化HTML文檔操作、事件處理、動畫設計和Ajax交互。
jsp:
<script type="text/javascript" src="static/js/jquery-3.4.1.js"></script><!--導入jQuery庫-->
<script type="text/javascript">
$(function() {
console.log(document.getElementById("username").value);//獲取username結點
console.log($("#username").val());//在瀏覽器控制檯顯示username傳入的內容
});
function checkUsername() {
var username = $("#username").val();
console.log(username.length);//在瀏覽器顯示username的長度
if (username.length == 0) {//判斷請求的username參數的長度是否爲0，如果是則執行以下表達式
//返回頁面
//alert("用戶名不允許爲空");以彈框方式顯示
$("#msg").text("用戶名不允許爲空");//以文本的方式顯示
return;
}
if (username.length < 6 || username.length > 12) {//判斷請求的參數是否滿足6~12個字符，如果不滿足，則執行以下表達式
//返回頁面
//alert("用戶名長度必須大於6且小於12");以彈框方式顯示
$("#msg").text("用戶名長度必須大於6且小於12");//以文本的方式顯示
return;
}
//ajax返回json時的處理方式
//json:一個“{}”代表一個對象,對象的值是鍵值對的形式（key：value）
$.ajax({
url: "/blog/checkUsername",
data: {
username: username
},
dataType: "json",
type: "GET",
//async: false, (async表示異步執行，設置爲false則變爲同步)
success: function( data ) {
if (data.success){
console.log(data.msg);
$("#msg").text(data.msg);
} else {
//alert(data.msg);
$("#msg").text(data.msg);
}
},
error:function(data){
console.log(data);
}
});
}
</script>
<body>
<form action="/blog/SignupServlet" method=post>
<!-- οnblur="xxx" 觸發函數-->
登錄名稱：<input name="username" onblur="checkUsername()" id="username"
type="text" />
<!--定義返回文本的樣式-->
<label id="msg" style="color: red;"></label><br />
</form>
</body>
servlet：
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
response.setContentType("text/html;charset=utf-8");//解決返回文本亂碼的問題
String username = request.getParameter("username");//獲取請求的參數
String sql = "select * from t_user where username = ?";//定義sql查詢語句
//連接數據庫
Connection connection = null;
PreparedStatement preparedStatement = null;
ResultSet resultSet = null;
try {
connection = (Connection) DBUtil.getConnection();
preparedStatement = connection.prepareStatement(sql);
preparedStatement.setString(1, username);//參數傳遞
resultSet = preparedStatement.executeQuery();//執行sql
resultSet.last();//將存儲的結果移動到最後一行
//判斷數據庫中是否存在同名參數
int rowCount = resultSet.getRow();
if (rowCount <= 0) {
Map<String, Object> resultMap = new HashMap<String, Object>();
resultMap.put("success", true);
resultMap.put("msg", "用戶名可用");
System.out.println(JSON.toJSONString(resultMap));
response.getWriter().append(JSON.toJSONString(resultMap));
return;
}
Map<String, Object> resultMap = new HashMap<String, Object>();
resultMap.put("success", false);
resultMap.put("msg", "用戶名已被佔用");
System.out.println(JSON.toJSONString(resultMap));//調用JSON的toJSONString方法，以json的格式返回結果;類似於調用resultMap.toString方法,使用fastjson包
response.getWriter().append(JSON.toJSONString(resultMap));
return;
} catch (Exception e) {
// TODO: handle exception
e.printStackTrace();
Map<String, Object> resultMap = new HashMap<String, Object>();
resultMap.put("success", false);
resultMap.put("msg", "系統異常！" + e.getMessage());
System.out.println(JSON.toJSONString(resultMap));
response.getWriter().append(JSON.toJSONString(resultMap));
return;
} finally {
DBUtil.close(connection, preparedStatement, resultSet);
}
}
同步和異步的區別：
- 同步：發送一個請求，等待返回後，再執行下一個請求。
同步需要等待，發送請求到返回給用戶所用時間長，但同步執行保證了程序按順序進行可以避免出現死鎖和髒讀等問題的發生。- 異步：發送一個請求,不等待返回，隨時可以再發送下一個請求 。
異步無需長時間等待，可以提高程序的執行效率，但是不利於對程序的控制，且會佔用較多的資源。
舉例：下班回家準備做飯，先把米洗好放進電飯鍋煮，同步場景下，你什麼都不能做，只能等飯煮熟，然後去洗菜炒菜，一步步進行；異步場景下，你可以在煮飯的這個時間段裏，去洗菜炒菜，等菜炒好飯可能也熟了。