AJAX
AJAX：即“Asynchronous Javascript And XML”（異步的JavaScript和XML）虽抄，是指一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)，尤其是在一種在無需重新加載整個(gè)網(wǎng)頁的情況下，能夠更新部分網(wǎng)頁的技術(shù)瘩扼。
傳統(tǒng)Web開發(fā)
World Wide Web（簡(jiǎn)稱Web）：是隨著Internet的普及使用而發(fā)展起來的一門技術(shù)焚碌，其開發(fā)模式是一種請(qǐng)求→刷新→響應(yīng)的模式，每個(gè)請(qǐng)求由單獨(dú)的一個(gè)頁面來顯示梦鉴，發(fā)送一個(gè)請(qǐng)求就會(huì)重新獲取這個(gè)頁面李茫。
Ajax采用異步通信，主要以數(shù)據(jù)交互為主肥橙；傳統(tǒng)的web開發(fā)采用同步通信魄宏，主要以頁面交互為主。
例子：在頁面寫一個(gè)生成隨機(jī)數(shù)的表單
用form表單提交的方式
index.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>$Title$</title>
</head>
<body>
<form action="random.do" method="post">
<input type="text" name="max" >
<input type="button" value="請(qǐng)輸入隨機(jī)數(shù)" onclick="getNum()">
${num}
</form>
</body>
</html>
random.do
@WebServlet(name = "randomServlet",urlPatterns = "/random.do")
public class randomServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String strmax = request.getParameter("max");
int max = Integer.parseInt(strmax);
Random random = new Random();
int num = random.nextInt(max);
request.setAttribute("num",num);
request.setAttribute("max",max);
request.getRequestDispatcher("index.jsp").forward(request,response);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
}
用這種方式是向后臺(tái)提交整個(gè)網(wǎng)頁
下面用ajax方式
ajax請(qǐng)求步驟
1.創(chuàng)建Ajax對(duì)象
var request = new XMLHttpRequest();
2.連接服務(wù)器
open(method,url,async);
request.open("get","query.do",true);
//get或者post（多用get）存筏，請(qǐng)求的服務(wù)器地址宠互，同步（false）或者異步（true）請(qǐng)求
3.發(fā)送請(qǐng)求
send(string)
在使用GET方式請(qǐng)求時(shí)無需填寫參數(shù),對(duì)數(shù)據(jù)庫無害的時(shí)候用get
req.open('get','random.do?max=100‘,true);
req.send();
在使用POST方式時(shí)參數(shù)代表著向服務(wù)器發(fā)送的數(shù)據(jù)
req.open('post','random.do',true);
req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//post請(qǐng)求需要設(shè)置HTTP頭信息,否則發(fā)送數(shù)據(jù)有問題
req.send('max=100');
4.接收服務(wù)器相應(yīng)數(shù)據(jù)
req.onload = function () {
console.log(req.responseText);
}
index.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>$Title$</title>
<script>
function getNum() {
var input = document.getElementById("max");
//以ajax的方式（js）味榛，向服務(wù)器發(fā)出請(qǐng)求，收到回應(yīng)（回應(yīng)中包含服務(wù)器生成的隨機(jī)數(shù)）
//1.創(chuàng)建ajax請(qǐng)求對(duì)象
var req = new XMLHttpRequest();
//2.調(diào)用第一步中創(chuàng)建的req對(duì)象的open方法予跌，設(shè)置連接服務(wù)器的信息
//open(method,url,async);method是post或者get,url是鏈接地址搏色，async是true（異步）或者false（同步）
req.open("get","random.do?max="+input.value,true);
//3.真正向服務(wù)器發(fā)出該請(qǐng)求
req.send();
//4.處理服務(wù)器的回應(yīng),服務(wù)器回應(yīng)的數(shù)據(jù)可以在req對(duì)象的responseText屬性中獲得
req.onload = function () {
//將該隨機(jī)數(shù)顯示在id是num的div中
var div = document.getElementById("num");
div.innerHTML = req.responseText;
}
}
</script>
</head>
<body>
<form action="#">
<input type="text" name="max" id="max">
<input type="button" value="請(qǐng)輸入隨機(jī)數(shù)" onclick="getNum()">
<div id="num">
</div>
</form>
</body>
</html>
random.do
@WebServlet(name = "randomServlet",urlPatterns = "/random.do")
public class randomServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String strmax = request.getParameter("max");
int max = Integer.parseInt(strmax);
Random random = new Random();
int num = random.nextInt(max);
PrintWriter printWriter = response.getWriter();
printWriter.println(num);
// request.setAttribute("num",num);
// request.setAttribute("max",max);
// request.getRequestDispatcher("index.jsp").forward(request,response);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request,response);
}
}
ajax校驗(yàn)用戶名是否已存在
index.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>$Title$</title>
<script>
function check() {
var input = document.getElementById("username");
var req = new XMLHttpRequest();
req.open("get","reg.do?username="+input.value,true);
req.send();
req.onload = function () {
var span = document.getElementById("msg");
if(req.responseText == 1){
span.innerHTML = "用戶名已經(jīng)存在";
span.style.color = "red";
}
else{
span.innerHTML="可以注冊(cè)";
span.style.color = "green";
}
}
}
</script>
</head>
<body>
<form action="#">
name: <input type="text" id="username" onblur = "check()">
<span id="msg"></span>
hobby:<input type="text">
<input type="button" value="注冊(cè)">
</form>
</body>
</html>
reg.do
@WebServlet(name = "regServlet",urlPatterns = "/reg.do")
public class regServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String username = request.getParameter("username");
if(username.equals("admin")){
response.getWriter().println(1);
}
else {
response.getWriter().println(0);
}
}
}
