Ajax
AJAX：即“Asynchronous Javascript And XML”（異步的JavaScript和XML），是指一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)鳞青，尤其是在一種在無需重新加載整個網(wǎng)頁的情況下计露，能夠更新部分網(wǎng)頁的技術(shù)畅厢。
傳統(tǒng)Web開發(fā)
World Wide Web（簡稱Web）：是隨著Internet的普及使用而發(fā)展起來的一門技術(shù)颅和，其開發(fā)模式是一種請求→刷新→響應(yīng)的模式，每個請求由單獨的一個頁面來顯示扳剿，發(fā)送一個請求就會重新獲取這個頁面。
image
Ajax采用異步通信昼激，主要以數(shù)據(jù)交互為主庇绽；傳統(tǒng)的web開發(fā)采用同步通信锡搜，主要以頁面交互為主。
ajax請求步驟
1.創(chuàng)建Ajax對象
var request = new XMLHttpRequest();
2.連接服務(wù)器
open(method,url,async);
request.open("get","query.do",true);//異步請求
3.發(fā)送請求
send(string)
在使用GET方式請求時無需填寫參數(shù)
在使用POST方式時參數(shù)代表著向服務(wù)器發(fā)送的數(shù)據(jù)
xhr.open('get','random.do?max=100‘,true);
xhr.send();
// xhr.open('post','random.do',true);
// xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");//post請求需要設(shè)置HTTP頭信息,否則發(fā)送數(shù)據(jù)有問題
// xhr.send('max=100');
4.接收服務(wù)器相應(yīng)數(shù)據(jù)
xhr.onload = function () {
console.log(xhr.responseText);
}
一個綜合實例
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title></title>
<script>
function getRandom() {
var max = document.getElementById('max');
var xhr = new XMLHttpRequest();
xhr.open('get','random.do?max='+ max.value,true);
xhr.send();
// xhr.open('post','random.do',true);
// xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// xhr.send('max='+ max.value);
xhr.onload = function () {
var div = document.getElementById('num');
div.innerHTML = xhr.responseText;
}
}
</script>
</head>
<body>
多少以內(nèi)的隨機數(shù)：<input type="text" id="max">
<button onclick="getRandom();">得到一個隨機數(shù)</button>
<div id="num">
</div>
</body>
</html>
@WebServlet(name = "RandomServlet",urlPatterns = "/random.do")
public class RandomServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request,response);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
int max = Integer.parseInt(request.getParameter("max"));
Random random = new Random();
int num = random.nextInt(max);
response.getWriter().println(num);
}
}
可以寫一個傳統(tǒng)web開發(fā)方式的請求回應(yīng)瞧掺，進行對比耕餐。
ajax校驗用戶名是否已存在
image
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>$Title$</title>
<script>
function checkUser() {
//創(chuàng)建一個XMLHttpRequest類型的對象ajaxReq
var ajaxReq = new XMLHttpRequest();
var username = document.getElementById('username');
//用ajaxReq打開一個連接
ajaxReq.open("post","valid.do",true);
ajaxReq.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//發(fā)送請求給服務(wù)器
ajaxReq.send("username="+username.value);
//設(shè)置一個回調(diào)函數(shù)，用來處理服務(wù)器的回應(yīng)夸盟。
ajaxReq.onload = function () {
var msg = document.getElementById('msg');
if(ajaxReq.responseText=="0")//可以注冊蛾方，用戶名還不存在
{
msg.innerHTML="可以注冊";
}
else
{
msg.innerHTML="用戶名已存在";
}
}
}
</script>
</head>
<body>
用戶注冊
<form method="post" action="valid.do">
用戶名：<input type="text" id = "username" name="username" onblur="checkUser();">
<span id="msg"></span>
密碼：<input type="text" name="pwd">
<input type="submit">
</form>
</body>
</html>
ValidUserServlet.java
@WebServlet(name = "ValidUserServlet",urlPatterns = "/valid.do")
public class ValidUserServlet extends HttpServlet {
private List<String> lst = new ArrayList<String>();
public void init() throws javax.servlet.ServletException
{ /* compiled code */
lst.add("zhangsan");
lst.add("lisi");
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String strName = request.getParameter("username");
//contains---包含
PrintWriter pw = response.getWriter();
if(lst.contains(strName))//用戶已存在
{
pw.print("1");
}
else
{
pw.print("0");
}
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
}
