一：什么是Ajax?
Ajax：異步的JavaScript和XML，用於完成網頁局部刷新功能（修改少量數據只用局部刷新，不用再整個網頁重新加載）；
XML的作用：1.是用於數據傳輸，但現在都在使用JSON
2.用於存取數據（已經不用），被數據庫取代
3.用於寫配置文件，現在還在少量使用，逐漸被注解取代
注意：Ajax請求不能寫跳轉（1.會報錯。2.把跳轉的頁面當作字符串傳回去）
二：使用原生的方式實現Ajax
1、創建一個Ajax對象
從Ajax對象xhr創建開始，它的所有操作都被監聽
xhr本身是有一個狀態的概念，這個狀態：readyState
0(為初始化)：對象已經建立，但是尚未初始化（尚未調用open）方法
1(初始化)：對象已建立，尚未調用send方法
2(發送數據)：send方法已經調用，但是當前的狀態及http頭未知
3(數據發送中)：已接收部分數據，因為響應及http頭不全，這時通過responseBody和responseText獲取部分數據會出現錯誤
4(完成）：數據接收完畢，此時可以通過responseBody和responseText獲取完整的回應數據
//內置了一個類：XMLHttpRequest;兼容IE需要創建ActiveXobject //在js中，所有變量定義都使用var var xhr= new XMLHttpRequest();
2、准備請求 .open(methodType（請求類型），methodUrl（請求到后端的地址），isSys（是否異步）)：請求類型：get/post。是否異步：默認為true
注意：如果要傳參的話，get請求在路徑中傳參數，post請求在send中傳參
//get請求
xhr.open("get","/地址?傳到后台的參數");
//post請求
xhr.open("post","/login");
//如果是post請求，必須設置請求頭的類型，后台才能夠接收到前台傳過去的相應的數據;當然，get請求不需要設置
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
3、准備監聽Ajax相應的狀態變化：on(監聽)，readystate(狀態) ，change(匿名方法）
xhr.onreadystatechange = function() {
//xhr.status：請求狀態（200表示成功）
//xhr.readyState：獲取到響應的值：（當它的狀態等於4-->整個請求已經完成，你就可以獲取數據了 ）
if(xhr.status==200 && xhr.readyState == 4){
//獲取相應的值
var result= xhr.responseText;
//放到相應的位置
document.getElementById("寫id").imnnerHTML = result;
}
}
4、發送請求 .sed(varBody)---->varBody：post請求傳參要寫（key=value&key=value&...);get請求不用寫
//get請求
xhr.sed();
//post請求
xhr.send("userName="+userName+"&pwd="+pwd);
get請求前端完整的html代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>原生Ajax測試</title>
<script type="text/javascript">
function getTime(){
//1.創建ajax對象
var xhr= new XMLHttpRequest();
//2.准備請求（請求類型，后端地址）：此處請求並沒有傳數據出去，只是發送了一個請求
xhr.open("get","/gettime");
//3.監聽ajax的狀態變化
xhr.onreadystatechange= funtion(){
if(xhr.status==200 && xhr.readyState==4){
var result = xhr.responseText;
//放到相應的位置
document.getElementById("time").innerHTML = result;
}
}
//4.發送請求
xhr.send();
}
</script>
</head>
<body>
<button onclick="getTime()">得到時間</button><span id="time"></span>
</body>
</html>
get請求后端的java代碼:
package ajax.servlet;
import java.io.IOException;
import java.util.Date;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/gettime")//前端請求過來的地址
public class GetTimeServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//用於前后台交互數據測試
String date = new Date().toLocaleString();
//通過響應返回相應的數據
resp.getWriter().print(date);
}
}
post請求前端完整的html代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function login(){
//1.獲取到用戶名與密碼
var userName = document.getElementById("userName").value;
var pwd = document.getElementById("pwd").value;
//2.創建ajax對象
var xhr= new XMLHttpRequest();
//3.准備請求（請求類型，后台地址）
xhr.open("post","/login");
//如果是post請求，必須設置請求頭的類型，后台才能夠接收到前台傳過去的相應的數據
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//3.監聽ajax的狀態變化
xhr.onreadystatechange= function(){
if(xhr.status==200 && xhr.readyState==4){
var result = xhr.responseText;
// responseText獲取到的都是字符串
if(result == "true"){//登錄成功
window.location.href="https://www.baidu.com";
}else{//登錄失敗
document.getElementById("erSpan").innerHTML="用戶名或密碼錯誤！";
}
}
}
//4.發送請求:post請求必須通過.send()傳數據到后台
xhr.send("userName="+userName+"&pwd="+pwd);
}
</script>
</head>
<body>
<span id="erSpan"></span>
<form action="/login" method="post">
用戶名：<input type="text" name="userName" id="userName" /> <br />
密碼<input type="text" name="pwd" id="pwd" /><br />
<input type="button" value="ajax提交" onclick="login()" />
</form>
</body>
</html>
post請求后端的java代碼:
package ajax.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/login")
public class LoginServlet extends HttpServlet{
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//字符集編碼，必須寫，不然中文會亂碼
req.setCharacterEncoding("utf-8");
resp.setContentType("utf-8");
//接收到前台傳過來的值
String userName = req.getParameter("userName");
String pwd = req.getParameter("pwd");
//System.out.println(userName+":"+pwd);
//測試
if("流星".equals(userName) && "123".equals(pwd)){
//向前端返回Boolean類型的true,但前端接收到的是String類型
resp.getWriter().print(true);
}else{
resp.getWriter().print(false);
}
}
}