用JavaScript寫AJAX前面已經(jīng)介紹過了，主要問題就是不同瀏覽器需要寫不同代碼，并且狀態(tài)和錯誤處理寫起來很麻煩。
用jQuery的相關(guān)對象來處理AJAX，不但不需要考慮瀏覽器問題，代碼也能大大簡化。
在jQuery用于支持AJAX的眾多API中，最常用的就是load(),get(),post()函數(shù)了。load(),get(),post()函數(shù)雖然使用比較簡單，但是它們已經(jīng)可以完成大部分常用AJAX功能。
一 load(url,[data],[callback])函數(shù)
函數(shù)名：load(url,[data],[callback])
作用：載入遠(yuǎn)程HTML文件代碼并插入DOM中
返回值：jQuery
參數(shù)：
url,String ，請求的HTML頁的url地址
data（可選），Object，發(fā)送至服務(wù)器的key/value數(shù)據(jù)
callback（可選），回調(diào)函數(shù)，請求完成時（不需要是success）的回調(diào)函數(shù)，自動會將請求結(jié)果，狀態(tài)，XMLHttp對象傳遞給函數(shù)
這個方法默認(rèn)使用get方式傳遞，如果[data]參數(shù)有傳遞數(shù)據(jù)進(jìn)去，就會自動轉(zhuǎn)換為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 >內(nèi)容顯示：</h2>
<div id="result"></div>
<h2>結(jié)果：</h2>
<div id="display"></div>
</div>
</div>
</body>
</html>
結(jié)果顯示
核心代碼
$(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])函數(shù)
jQuery中的get(url,[data],[callback],[type])函數(shù)用以get方式來進(jìn)行ajax異步請求。請求成功時可調(diào)用回調(diào)函數(shù)。
函數(shù)名：$.get(url,[data],[callback],[type])
作用：使用get方式來進(jìn)行異步請求
返回值：jQuery
參數(shù)：
url：Sting，請求的html頁的url地址
data（可選）：Object,發(fā)送至服務(wù)器key/value數(shù)據(jù)
callback（可選）：function，請求完成時（不需要是success）的回調(diào)函數(shù)，自動會將請求的結(jié)果，狀態(tài)，XMLHttp對象傳遞給該函數(shù)。
type（可選）：String，客戶端請求的類型（JSON,XML等）
服務(wù)器端有名為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>結(jié)果：</h2>
<div id="display"></div>
</div>
</div>
</body>
</html>
運行結(jié)果
核心代碼
$(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])函數(shù)
函數(shù)名：$.post(url,[data],[callback],[type])
作用：使用post方式來進(jìn)行異步請求
返回值：jQuery
參數(shù)：
url：Sting，請求的html頁的url地址
data（可選）：Object,發(fā)送至服務(wù)器key/value數(shù)據(jù)
callback（可選）：function，請求完成時（不需要是success）的回調(diào)函數(shù)，自動會將請求的結(jié)果，狀態(tài)，XMLHttp對象傳遞給該函數(shù)。
type（可選）：String，客戶端請求的類型（JSON,XML等）
服務(wù)器端有名為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>結(jié)果：</h2>
<div id="display"></div>
</div>
</div>
</body>
</html>
運行結(jié)果
四 總結(jié)
在Javaweb中，在使用jQuery中的AJAX GET/POST 方法時，對應(yīng)的servlet 應(yīng)設(shè)置對應(yīng)的路徑
