用JavaScript寫AJAX前面已經介紹過了，主要問題就是不同瀏覽器需要寫不同代碼，并且狀態和錯誤處理寫起來很麻煩。
用jQuery的相關對象來處理AJAX，不但不需要考慮瀏覽器問題，代碼也能大大簡化。
在jQuery用于支持AJAX的眾多API中，最常用的就是load(),get(),post()函數了。load(),get(),post()函數雖然使用比較簡單，但是它們已經可以完成大部分常用AJAX功能。
一 load(url,[data],[callback])函數
函數名：load(url,[data],[callback])
作用：載入遠程HTML文件代碼并插入DOM中
返回值：jQuery
參數：
url,String ，請求的HTML頁的url地址
data（可選），Object，發送至服務器的key/value數據
callback（可選），回調函數，請求完成時（不需要是success）的回調函數，自動會將請求結果，狀態，XMLHttp對象傳遞給函數
這個方法默認使用get方式傳遞，如果[data]參數有傳遞數據進去，就會自動轉換為post方式。
這個方法可以很方便的加載一些HTML文件，例如有如下一個HTML文件，名稱為7_20test.html，其中只有一段文字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
Apache Maven is a software project management and comprehension tool. Based on the concept of a project object model (POM), Maven can manage a project's build, reporting and documentation from a central piece of information.
If you think that Maven could help your project, you can find out more information about in the "About Maven" section of the navigation. This includes an in-depth description of what Maven is, a list of some of its main features, and a set of frequently asked questions about what Maven is.
This site is separated into the following sections, depending on how you'd like to use Maven:
</body>
</html>
測試頁面如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>load</title>
</head>
<script src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function () {
$("#test").click(function () {
$("#result").load("7_20test.html",function (responseText,textStatus,XMLHttpRequest) {
$("#display").append("<b>responseText:</b>"+responseText+"<br>");
$("#display").append("<b>textStatus:</b>"+textStatus+"<br>");
$("#display").append("<b>XMLHttpRequest</b>"+XMLHttpRequest)
});
});
});
</script>
<body>
<div id="wrapper">
<h1>jQuery Playground</h1>
<div id="content">
<button id="test">測試</button>
<h2 >內容顯示：</h2>
<div id="result"></div>
<h2>結果：</h2>
<div id="display"></div>
</div>
</div>
</body>
</html>
結果顯示
核心代碼
$(function () {
$("#test").click(function () {
$("#result").load("7_20test.html",function (responseText,textStatus,XMLHttpRequest) {
$("#display").append("<b>responseText:</b>"+responseText+"<br>");
$("#display").append("<b>textStatus:</b>"+textStatus+"<br>");
$("#display").append("<b>XMLHttpRequest</b>"+XMLHttpRequest)
});
});
});
二 $.get(url,[data],[callback],[type])函數
jQuery中的get(url,[data],[callback],[type])函數用以get方式來進行ajax異步請求。請求成功時可調用回調函數。
函數名：$.get(url,[data],[callback],[type])
作用：使用get方式來進行異步請求
返回值：jQuery
參數：
url：Sting，請求的html頁的url地址
data（可選）：Object,發送至服務器key/value數據
callback（可選）：function，請求完成時（不需要是success）的回調函數，自動會將請求的結果，狀態，XMLHttp對象傳遞給該函數。
type（可選）：String，客戶端請求的類型（JSON,XML等）
服務器端有名為TestGetServlet的文件，代碼如下：
package servlet;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
/**
* Created by pc on 2017/7/20.
*/
@WebServlet(name = "TestGetServlet",urlPatterns = "/TestGetServlet")
public class TestGetServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
String name=request.getParameter("name");
System.out.println(name);
response.getWriter().print(name);
}
}
測試代碼如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>GET</title>
<script src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function () {
$("button").click(function () {
$.get("/TestGetServlet",
{name:"張三"},
function (data,status) {
$("#display").append("<b>data:</b>"+data+"<br>");
$("#display").append("<b>status</b>"+status);
});
}) ;
});
</script>
</head>
<body>
<div id="wrapper">
<h1>jQuery Playground</h1>
<div id="content">
<button id="test">測試</button>
<h2>結果：</h2>
<div id="display"></div>
</div>
</div>
</body>
</html>
運行結果
核心代碼
$(function () {
$("button").click(function () {
$.get("/TestGetServlet",
{name:"張三"},
function (data,status) {
$("#display").append("<b>data:</b>"+data+"<br>");
$("#display").append("<b>status</b>"+status);
});
}) ;
});
三 $.post(url,[data],[callback],[type])函數
函數名：$.post(url,[data],[callback],[type])
作用：使用post方式來進行異步請求
返回值：jQuery
參數：
url：Sting，請求的html頁的url地址
data（可選）：Object,發送至服務器key/value數據
callback（可選）：function，請求完成時（不需要是success）的回調函數，自動會將請求的結果，狀態，XMLHttp對象傳遞給該函數。
type（可選）：String，客戶端請求的類型（JSON,XML等）
服務器端有名為TestPostServlet的文件，代碼如下：
package servlet;
import com.mysql.cj.xdevapi.JsonArray;
import jdk.nashorn.internal.runtime.JSONListAdapter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
/**
* Created by pc on 2017/7/20.
*/
@WebServlet(name = "TestPostServlet",urlPatterns="/TestPostServlet")
public class TestPostServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
String name=request.getParameter("name");
String password=request.getParameter("password");
response.getWriter().print(name);
response.getWriter().print(password);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
}
測試代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>POST</title>
<script src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function () {
$("#test").click(function () {
$.post("/TestPostServlet",{
name:$("#name").val(),
password:$("#password").val()
},function (data,status) {
$("#display").append("<b>data</b>"+data+"<br>");
$("#display").append("<b>status</b>"+status);
},"text"
);
});
});
</script>
</head>
<body>
<div id="wrapper">
<h1>jQuery Playground</h1>
<div id="content">
<button id="test">測試</button>
<form >
name:<input type="text" id="name" name="name" value=""><br>
password:<input type="password" id="password" name="password">
<input type="submit" id="submit" value="提交">
</form>
<h2>結果：</h2>
<div id="display"></div>
</div>
</div>
</body>
</html>
運行結果
四 總結
在Javaweb中，在使用jQuery中的AJAX GET/POST 方法時，對應的servlet 應設置對應的路徑
