Ajax概述
Ajax是Asynchronous JavaScript and XML的縮寫，也叫做異步的JavaScript和XML。
同步和異步的差別
同步：當JS代碼加載到目前AJAX的時候會把頁面裡所有的代碼停止加載，頁面進入假死狀态，當這個AJAX執行完畢後才會繼續運作其他代碼，頁面假死狀态才會解除。也就是說，如果用ajax的話，同步那就沒有什麼意義了。
異步：當JS代碼加載到目前的AJAX的時候，這時候浏覽器在發送請求的同時，也在解析頁面的代碼，也就是說浏覽器同時在做兩件事。
js原生态代碼實作
一般分四個步驟：建立對象XMLHttpRequest對象、連接配接資料庫、發送請求、處理響應結果函數
以Struts2為例
測試頁面testAjax.jsp：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
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%>" target="_blank" rel="external nofollow" >
<title>My JSP 'login.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" target="_blank" rel="external nofollow" >
-->
<script type="text/javascript">
/*
*考慮到浏覽器的不同，建立XMLHttpRequest的方法也不同
*/
function createXMLHttpRequest() {
try {//符合大部分浏覽器
return new XMLHttpRequest();
} catch (e) {//符合IE6.0
try {
return new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {//符合IE5.5及更低的版本
try {
return new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert("未識别浏覽器類型");
throw e;
}
}
}
}
window.onload = function() {
/*
*擷取文本框的DOM對象
*/
var username1 = document.getElementById("username");
/*
*為文本框對象添加失去焦點事件監聽器
*/
username1.onblur = function() {
/*
*Ajax的四步操作：建立XMLHttpRequest對象、連接配接資料庫、發送請求、處理響應結果
*/
/*
*第一步：建立擷取XMLHttpRequest對象
*/
var xmlHttp = createXMLHttpRequest();
/*
*第二步：連接配接資料庫，open方法，
*參數1：采用POST請求方式
*參數2：請求背景資源 ValidateUsernameServlet
*參數3：采用異步請求方式，true
*/
xmlHttp.open("POST", "/StrutsTest/ajax.action", true);
//因為是POST請求方式，是以需要設定請求體，是固定的
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
/*
*第三步：發送請求，send方法
*參數就是要傳遞給背景伺服器的，使用使用像鍵值對那樣的方式，如果有多個就使用&連結
*将使用者名的内容value傳送
*/
xmlHttp.send("username="+username1.value);
/*
*第四步：處理伺服器傳回來的結果,onreadystatechange
*如果為1：在span标簽中輸出“使用者名已經被注冊”
*如果為0：什麼都不用做
*/
xmlHttp.onreadystatechange = function() {
console.log("正常");
if(xmlHttp.readyState==4 && xmlHttp.status==200) {//雙重判斷，xmlHttp的狀态為4（說明伺服器響應結束），伺服器響應成功為200
var flag = xmlHttp.responseText;//伺服器響應傳回的結果
var info = document.getElementById("red");
info.innerHTML = flag;
}
};
};
};
</script>
</head>
<body>
<form>
username:<input type="text" name="username" id="username"><span id="red"></span><br />
password:<input type="password" name="password"><br />
address:<input type="text" name="address"><br />
<input type="submit" value="login">
</form>
</body>
</html>
測試配置檔案struts.xml：
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"
"http://struts.apache.org/dtds/struts-2.3.dtd">
<struts>
<constant name="struts.enable.DynamicMethodInvocation" value="false" />
<constant name="struts.devMode" value="true" />
<!-- 設定表單送出資料的格式，對get和post都有用 -->
<constant name="struts.i18n.encoding" value="UTF-8"/>
<package name="yxd" namespace="/" extends="struts-default">
<action name="ajax" class="com.yxd.action.TestAjaxAction" method="testAjax">
</action>
</package>
測試Action：
package com.yxd.action;
import java.io.IOException;
import javax.swing.plaf.basic.BasicSliderUI.ActionScroller;
import org.apache.struts2.ServletActionContext;
import com.opensymphony.xwork2.ActionSupport;
/**
*
* @ProjectName StrutsTest
* @package com.yxd.action
* @ClassName TestAjaxAction.java
* @Author YXD
* @Time 2017年5月9日 下午7:36:27
* @Description 測試Ajax
*
*/
public class TestAjaxAction extends ActionSupport {
private String username;
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
/**
*
* @throws IOException
* @Method testAjax
* @Return String
* @Descritption
* 要求：必須傳回值是NONE，或者是null
*/
public String testAjax() throws IOException {
//靜态資料jack
String realname = "jack";
if(realname.equals(this.getUsername())) {
//設定編碼為utf-8，可以顯示中文
ServletActionContext.getResponse().setContentType("text/html;charset=UTF-8");
ServletActionContext.getResponse().getWriter().print("<font style='color:red;'>使用者名已經存在</font>");
} else if("".equals(this.getUsername())) {
//設定編碼為utf-8
ServletActionContext.getResponse().setContentType("text/html;charset=UTF-8");
ServletActionContext.getResponse().getWriter().print("<font style='color:red;'>使用者名不能為空</font>");
} else {
ServletActionContext.getResponse().setContentType("text/html;charset=UTF-8");
ServletActionContext.getResponse().getWriter().print("<font style='color:green;'>使用者名可以注冊</font>");
}
return NONE;
}
}
總結：
以上是我的一些學習心得，在運作的時候主要有下面一些需要注意的問題
- 首先Struts2的環境必須要配置完整，這裡沒有說明web.xml和jar包的補充和導入。
- 這裡隻是簡單測試了ajax的功能，并不代表隻有這些，可以的話可以試試同步和Get方式。
- 當使用者輸入框内容後，失去焦點的時候才會觸發ajax。
- Action中的方法傳回值必須是NONE或者null，而且背景傳回到前台的資料隻能通過response對象傳遞。
- 後期會說明SpringMVC的方式有何不同，但是主要的還是用response對象。
- 這裡用的是原生态的js，以後會使用現在主流的JQuery來實作。
![為JSON 資料加入斜杠 \[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)