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"
}
相關文章
- 【java web】--Ajax拾遺JavaWeb
- java Ajax ext之API文件詳解JavaAPI
- (轉)JAVA AJAX教程第四章—AJAX和MVC的簡單結合JavaMVC
- Ajax 什麼是Ajax? Ajax的基本語法
- Ajax學習-Ajax簡介
- AJAX、$.ajax、axios、fetch、superagentiOS
- Ajax+ashx vs Ajax+WebServiceWeb
- AJAX+JAVA使用者登陸註冊驗證Java
- DWR(AJAX的一種Java實現)做的分頁!!Java
- jQuery AjaxjQuery
- jQuery - AJAXjQuery
- AJAX教程
- 來了解一下Ajax是什麼?Ajax的原理?Ajax與傳統Web比較?Ajax的優缺點?Ajax的Post與Get比較Web
- Java+Ajax實現使用者名稱重複檢驗Java
- 【java web】--Ajax非同步判斷使用者名稱是否存在JavaWeb非同步
- ajax請求
- ajax 封裝封裝
- jQuery.ajaxjQuery
- ajax +jquery 基本jQuery
- Vue-ajaxVue
- Ajax技術~~
- jQuery AJAX 方法jQuery
- Ajax簡介
- 自定義_ajax
- PHP--ajaxPHP
- JQuery使用AJAXjQuery
- JavaScript 之 ajaxJavaScript
- 前端之AJAX前端
- AJAX初學
- jquery Ajax搭配jQuery
- Ajax基礎
- Ajax入門
- jQuery.ajax()jQuery
- 【AJAX 總結】
- ajax_mockMock
- Ajax初步理解
- jQuery系列:AjaxjQuery
- AJAX 入門