JAVA Web07——Ajax
目錄
Ajax
非同步重新整理：如果網頁中某一個地方需要修改，非同步重新整理可以使：只重新整理該需要修改的地方，而頁面中其他地方保持不變。
例如：百度搜尋框，視訊的點贊
1.實現
js：XMLHttpRequest物件
XMLHttpRequest物件的方法：
- open(方法名（提交方式get|post），伺服器地址，true)：與服務端建立連線
- send()：
- get：send(null)
- post：send(引數值)
- setRequestHeader(header,value)：
- get：不需要設定此方法
- post：需要設定：
- a：如果請求元素中包含了檔案上傳：
setRequestHeader("Content-Type","multipart/form-data") - b：不包含檔案上傳
setRequestHeader("Content-Type","application/x-www-form-urlencoded")
- a：如果請求元素中包含了檔案上傳：
XMLHttpRequest物件的屬性：
- readyState：請求狀態
readyState表示 XMLHttpreRequest物件傳送的HTP請求狀態，共有五種狀態，只有狀態為4代表請求完畢
HTTP請求狀態 狀態值 簡介 0 表示XMLHttpRequest物件沒有初始化 1 表示XMLHttpRequest物件開始傳送請求：已經執行了open()方法並完成了相關資源的準備 2 表示XMLHttpRequest物件已將請求傳送完畢：已經執行了send()方法來傳送請求，但是還沒有收到響應 3 表示XMLHttpRequest物件開始讀取相應資訊：已經接收到HTTP響應的頭部資訊，但是還沒有將相應體接收完畢 4 表示XMLHttpRequest物件將響應資訊全部讀取完畢 - status：響應狀態
status表示HTTP響應中的狀態碼，只有狀態碼為200時才表示響應成功；否則，說明HTTP響應不正常HTTP響應狀態碼 狀態碼 含義 200 伺服器正常響應
400 無法找到請求的資源 403 沒有訪問許可權 404 訪問的資源不存在 500 伺服器內部錯誤，很可能是伺服器程式碼有錯 - onreadystatechange：回撥函式
-
responseText：相應格式為String
-
responseXML：相應格式為XML
- status：響應狀態
2.例子-原生ajax
index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function registerPost(){
var mobile = document.getElementById("mobile").value
//通過ajax非同步方式請求服務端
xmlHttpRequest = new XMLHttpRequest();
xmlHttpRequest.open("post","MobileServlet",true);
//設定xmlHttpRequest物件的回撥函式
xmlHttpRequest.onreadystatechange = callBack;
//設定post方式的頭資訊
xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttpRequest.send("mobile="+mobile);//k=v
}
function registerGet(){
var mobile = document.getElementById("mobile").value
alert(mobile)
//通過ajax非同步方式請求服務端
xmlHttpRequest = new XMLHttpRequest();
xmlHttpRequest.open("get","MobileServlet?mobile="+mobile,true);
//設定xmlHttpRequest物件的回撥函式
xmlHttpRequest.onreadystatechange = callBack;
//設定post方式的頭資訊，get不需要
//xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttpRequest.send(null);//k=v
}
//定義回撥函式（接收服務端的返回值）
function callBack(){
if(xmlHttpRequest.readyState==4 && xmlHttpRequest.status==200){
//接收服務端返回的資料
var data = xmlHttpRequest.responseText;//服務端返回值為String格式
if(data=="true"){
alert("此號碼已存在");
}else{
alert("註冊成功！");
}
}else{
}
}
</script>
</head>
<body>
電話：<input type="text" name="mobile" id="mobile"><br>
<input type="button" onclick="registerGet()" value="註冊">
</body>
</html>MobileServlet.java
package com.stx.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class MobileServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
response.setContentType("text/html; charset=UTF-8");
String mobile = request.getParameter("mobile");
PrintWriter out = response.getWriter();
//假設此時資料庫中只有一個號碼：12345123456
System.out.println(request.getParameter("mobile"));
if("12345123456".equals(mobile)) {
out.write("true"); //servlet以輸出流的方式將資訊返回給客戶端
}else {
out.write("false");
}
out.close();
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
3.例子-JQuery（推薦）
①ajax,get,post
$.ajax({
url:伺服器地址,
請求方式:get|post,
data:請求資料,
success:function(result,testStatus){
},
error:function(xhr,errorMessage,e){
}
});
$ajax.get(
伺服器地址,
請求資料,
function(result){
},
預期返回值型別(string/xml/text)
);
$.post(
伺服器地址,
請求資料,
function(result){
},
預期返回值型別(string/xml/text)
);
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-3.5.1.js"></script>
<script type="text/javascript">
function register(){
var $mobile = $('#mobile').val();
/*
$.ajax({
url:"MobileServlet",
data:"mobile="+$mobile,
success:function(result,testStatus){
if(result=="true"){
alert("此號碼已存在");
}else{
alert("註冊成功！");
}
},
error:function(xhr,errorMessage,e){
alert("系統異常！");
}
});
*/
/*
$.post(
"MobileServlet",
"mobile="+$mobile,
function(result){
if(result=="true"){
alert("此號碼已存在");
}else{
alert("註冊成功！");
}
},
"text"
);
*/
$.get(
"MobileServlet",
"mobile="+$mobile,
function(result){
if(result=="true"){
alert("此號碼已存在");
}else{
alert("註冊成功！");
}
}
);
}
</script>
</head>
<body>
電話：<input type="text" name="mobile" id="mobile"><br>
<input type="button" onclick="register()" value="註冊">
</body>
</html>②load
$(xxx).load(
伺服器地址,
請求資料
);
將伺服器的返回值直接載入到$(xxx)所選擇的元素中
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-3.5.1.js"></script>
<script type="text/javascript">
function register(){
$("#tip").load(
"MobileServlet",
"mobile="+$mobile
);
}
</script>
</head>
<body>
電話：<input type="text" name="mobile" id="mobile"><br>
<input type="button" onclick="register()" value="註冊">
<span id="tip"></span>
</body>
</html>修改MobileServlet：
if("12345123456".equals(mobile)) {
//out.write("true"); //servlet以輸出流的方式將資訊返回給客戶端
out.write("註冊失敗，號碼已存在");
}else {
//out.write("false");
out.write("註冊成功");
}③getJSON()
$.getJSON(
伺服器地址,
JSON格式的請求資料,
function(result){
}
);
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-3.5.1.js"></script>
<script type="text/javascript">
function register(){
var $mobile = $('#mobile').val();
$.getJSON(
"MobileServlet",
{"mobile":$mobile},
function(result){
if(result.msg=="true"){
alert("此號碼已存在");
}else{
alert("註冊成功！");
}
}
);
}
</script>
</head>
<body>
電話：<input type="text" name="mobile" id="mobile"><br>
<input type="button" onclick="register()" value="註冊">
<span id="tip"></span>
</body>
</html>修改MobileServlet：
if("12345123456".equals(mobile)) {
//out.write("true"); //servlet以輸出流的方式將資訊返回給客戶端
//out.write("註冊失敗，號碼已存在");
//如果客戶端是getJSON(),則需要以json格式返回資料
out.write("{\"msg\":\"true\"}");//"msg":"true"
}else {
//out.write("false");
//out.write("註冊成功");
out.write("{\"msg\":\"false\"}");//"msg":"false"
}
相關文章
- AJAX、$.ajax、axios、fetch、superagentiOS
- Ajax 什麼是Ajax? Ajax的基本語法
- Ajax
- AJAX+JAVA使用者登陸註冊驗證Java
- wordpress ajax
- jQuery - AJAXjQuery
- 反向ajax
- jQuery AjaxjQuery
- ajax概述
- axios，Ajax,jQuery ajax,axios和fetch的區別iOSjQuery
- Java+Ajax實現使用者名稱重複檢驗Java
- ajax請求
- ajax 封裝封裝
- Vue-ajaxVue
- 前端之AJAX前端
- JavaScript 之 ajaxJavaScript
- Ajax與Fetch
- 自定義_ajax
- ajax優點？
- AJAX 介紹
- JSON&AJAXJSON
- Ajax基本使用
- Ajax簡介
- ajax,axios,fetchiOS
- 初識AJAX
- 手寫ajax
- 取消上次ajax
- 回顧ajax
- jQuery AJAX 方法jQuery
- jQuery.ajaxjQuery
- ajax +jquery 基本jQuery
- 複習 - ajax
- Ajax技術~~
- 好程式設計師Java學習路線分享原生Ajax的使用程式設計師Java
- web系列之AjaxWeb
- 自己實現AJAX
- ajax建立XMLHttpRequest物件XMLHTTP物件
- 原生Ajax書寫