一：
AJAX = Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）。
AJAX 不是新的編程語言，而是一種使用現(xiàn)有標準的新方法。
AJAX 是與服務器交換數(shù)據(jù)并更新部分網(wǎng)頁的藝術，在不重新加載整個頁面的情
況下。
AJAX 是一種在無需重新加載整個網(wǎng)頁的情況下，能夠更新部分網(wǎng)頁的技術。
AJAX = 異步 JavaScript 和 XML。
AJAX 是一種用于創(chuàng)建快速動態(tài)網(wǎng)頁的技術。
通過在后臺與服務器進行少量數(shù)據(jù)交換，AJAX 可以使網(wǎng)頁實現(xiàn)異步更新。這意味著可以在不重新加載整個網(wǎng)頁的情況下，對網(wǎng)頁的某部分進行更新。
傳統(tǒng)的網(wǎng)頁（不使用 AJAX）如果需要更新內容，必需重載整個網(wǎng)頁面。
有很多使用 AJAX 的應用程序案例：新浪微博、Google 地圖、開心網(wǎng)等等。
//Get方式提交：
xmlhttp.open("GET","testServlet?name="+userName,true);
xmlhttp.send(null);
//Post方式請求的代碼
xmlhttp.open("POST","testServlet",true);
//POST方式需要自己設置http的請求頭
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//POST方式發(fā)送數(shù)據(jù)
xmlhttp.send("name="+userName);
二：代碼演示(配置好相應的環(huán)境，比如c3p0-config-xml...)
A：get請求：
Ajax1servlet:
package com.pp.web;
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("/ajax")
public class Ajax1servlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String username = request.getParameter("username");
response.setContentType("text/html;charset=utf-8");
response.getWriter().print("姓名"+username);
}
}
get.jsp
page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<body>
<input type="button" value="點我試試看" onclick="btnclick()">
<script>
function btnclick() {
//創(chuàng)建核心對象
xmlhttp=null;
if(window.XMLHttpRequest){
//只針對于ie7，谷歌，firefox,
xmlhttp=new XMLHttpRequest();
}else if(window.ActiveXObject){
xmlhttp=new ActiveXObject("microsoft.XMLHTTP");
}
//編寫回調函數(shù)
xmlhttp.onreadystatechange=function () {
alert(xmlhttp.readyState)//狀態(tài)碼
if(xmlhttp.readyState==4&&xmlhttp.status==200){
//xmlhttp.readyState==4 這個指的是xmlhttp的交互狀態(tài).為4就是交互完成.
//xmlhttp.status==200 這個是你xmlhttp與后臺交互時返回的一個狀態(tài)碼.關于HTTP狀態(tài)碼
alert("準備好了嗎")
alert(xmlhttp.responseText);
}
}
xmlhttp.open("get","/ajax?username=王芝洋");
xmlhttp.send();
}
</script>
</body>
</html>
B：post請求：
Ajax2servlet:
package com.pp.web;
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("/ajax2")
public class Ajax2servlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String username = request.getParameter("pas");
System.out.println(username);
response.setContentType("text/html;charset=utf-8");
response.getWriter().print("姓名"+username);//相應
}
}
post.jsp
<%--
Created by IntelliJ IDEA.
User: Administrator
Date: 2019/1/25
Time: 16:59
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<body>
<input type="button" value="點我試試看" onclick="btnclick()">
<script>
function btnclick() {
//創(chuàng)建核心對象
xmlhttp=null;
if(window.XMLHttpRequest){
//只針對于ie7，谷歌，firefox,
xmlhttp=new XMLHttpRequest();
}else if(window.ActiveXObject){
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//編寫回調函數(shù)
xmlhttp.onreadystatechange=function () {
alert(xmlhttp.readyState);//狀態(tài)碼
if(xmlhttp.readyState==4&&xmlhttp.status==200){
//xmlhttp.readyState==4 這個指的是xmlhttp的交互狀態(tài).為4就是交互完成.
//xmlhttp.status==200 這個是你xmlhttp與后臺交互時返回的一個狀態(tài)碼.關于HTTP狀態(tài)碼
alert("準備好了嗎");
alert(xmlhttp.responseText);
}
}
xmlhttp.open("post","/ajax2");
xmlhttp.setRequestHeader("content-type","application/x-www-form-urlencoded");
xmlhttp.send("pas=root");
}
</script>
</body>
</html>
