什么是 AJAX 耗式?
AJAX = 異步 JavaScript 和 XML启具。
AJAX 是一種用于創(chuàng)建快速動態(tài)網(wǎng)頁的技術(shù)。
通過在后臺與服務(wù)器進行少量數(shù)據(jù)交換典唇,AJAX 可以使網(wǎng)頁實現(xiàn)異步更新馋吗。這意味著可以在不重新加載整個網(wǎng)頁的情況下焕盟,對網(wǎng)頁的某部分進行更新。
傳統(tǒng)的網(wǎng)頁(不使用 AJAX)如果需要更新內(nèi)容宏粤,必需重載整個網(wǎng)頁面脚翘。有很多使用 AJAX 的應(yīng)用程序案例:新浪微博、Google 地圖绍哎、開心網(wǎng)等等堰怨。
原生js實現(xiàn)Ajax
html代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function fun() {
//發(fā)送異步請求
//1.創(chuàng)建核心對象
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//2.建立連接
/*open(method,url,async):
method:請求的類型;GET 或 POST
url:文件在服務(wù)器上的位置
async:true(異步)或 false(同步)
*/
xmlhttp.open("GET","ajaxServlet?username=lisan",true);
//3.發(fā)送請求
/*
* send(string)
* string僅用于 POST 請求
* 在以下情況中蛇摸,請使用 POST 請求:
1.無法使用緩存文件(更新服務(wù)器上的文件或數(shù)據(jù)庫)
2.向服務(wù)器發(fā)送大量數(shù)據(jù)(POST 沒有數(shù)據(jù)量限制)
3.發(fā)送包含未知字符的用戶輸入時备图,POST 比 GET 更穩(wěn)定也更可靠
* */
xmlhttp.send();
//4.接受并處理服務(wù)器的響應(yīng)結(jié)果
//獲取方式:xmlhttp.responseText
xmlhttp.onreadystatechange=function()
{
//判斷readyState就緒狀態(tài)是否為4,status響應(yīng)狀態(tài)碼是否為200
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
//獲取服務(wù)器響應(yīng)結(jié)果
var responseText = xmlhttp.responseText;
alert(responseText);
}
}
}
</script>
</head>
<body>
<input value="發(fā)送異步請求" type="button" onclick="fun()" >
<input type="text">
</body>
</html>
servlet 代碼
package com.day08.web.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;
@WebServlet("/ajaxServlet")
public class AjaxServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1.獲取請求參數(shù)
String username = request.getParameter("username");
//處理業(yè)務(wù)邏輯
try {
Thread.sleep(5000);
} catch (InterruptedException e) {
e.printStackTrace();
}
//2.打印username
System.out.println(username);
//3.響應(yīng)
response.getWriter().write("hello:"+username);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
}
JQuery實現(xiàn)ajax
- 注意 要導入 jquery-3.3.1.min.js
使用$.ajax()發(fā)送請求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
function fun() {
//使用$.ajax()發(fā)送請求
$.ajax({
url:"ajaxServlet",//請求路徑
type:"POST",//請求方式赶袄,默認為GET
//data:"username=lisi&age=23",
data:{"username":"lisi","age":23},//請求參數(shù)揽涮,兩種方式
success:function (data) {
alert(data);
},//響應(yīng)成功后的回調(diào)函數(shù)
error:function () {
alert("出錯啦...")
},//表示如果請求響應(yīng)出現(xiàn)錯誤,會執(zhí)行的回調(diào)函數(shù)
dataType:"text"http://設(shè)置接受到的響應(yīng)數(shù)據(jù)的格式
});
}
</script>
</head>
<body>
<input value="發(fā)送異步請求" type="button" onclick="fun()" >
<!--<input type="text">-->
</body>
</html>
$.get():發(fā)送get請求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
function fun() {
/*
$.get():發(fā)送get請求
* 語法:$.get(url, [data], [callback], [type])
* 參數(shù):
* url:請求路徑
* data:請求參數(shù)
* callback:回調(diào)函數(shù)
* type:響應(yīng)結(jié)果的類型
*/
$.get("ajaxServlet",{username:"jok"},function (data) {
alert(data);
},"text")
}
</script>
</head>
<body>
<input value="發(fā)送異步請求" type="button" onclick="fun()" >
<!--<input type="text">-->
</body>
</html>
$.post():發(fā)送post請求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
function fun() {
/*
3. $.post():發(fā)送post請求
* 語法:$.post(url, [data], [callback], [type])
* 參數(shù):
* url:請求路徑
* data:請求參數(shù)
* callback:回調(diào)函數(shù)
* type:響應(yīng)結(jié)果的類型
* */
$.post("ajaxServlet",{username:"jok-post"},function (data) {
alert(data);
},"text")
}
</script>
</head>
<body>
<input value="發(fā)送異步請求" type="button" onclick="fun()" >
<!--<input type="text">-->
</body>
</html>