AJAX：即“Asynchronous Javascript And XML”（異步的JavaScript和XML），是指一種創建交互式網頁應用的網頁開發技術，尤其是在一種在無需重新加載整個網頁的情況下，能夠更新部分網頁的技術。
傳統Web開發
World Wide Web（簡稱Web）：是隨著Internet的普及使用而發展起來的一門技術，其開發模式是一種請求→刷新→響應的模式，每個請求由單獨的一個頁面來顯示，發送一個請求就會重新獲取這個頁面。
Ajax采用異步通信，主要以數據交互為主；傳統的web開發采用同步通信，主要以頁面交互為主
### **ajax請求步驟**
1.創建Ajax對象
~~~
var request = new XMLHttpRequest();
~~~
2.連接服務器
open(method,url,async);
~~~
request.open("get","query.do",true);//異步請求
~~~
3.發送請求
send(string)
在使用GET方式請求時無需填寫參數
在使用POST方式時參數代表著向服務器發送的數據
~~~
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請求需要設置HTTP頭信息,否則發送數據有問題
xhr.send('max=100');
~~~
4.接收服務器相應數據
~~~
xhr.onload = function () {
console.log(xhr.responseText);
}
~~~
### 練習1.驗證用戶名是否存在
reg.jsp
~~~
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function check(){
var oForm = document.getElementById('form1');
var oMsg = document.getElementById('msg');
// 發送ajax請求
// 1.創建Ajax對象
var request = new XMLHttpRequest();
// 2.連接服務器
/* request.open('get','${ pageContext.request.contextPath }/reg.do?username='+oForm.username.value,true); */
request.open('post','${ pageContext.request.contextPath }/reg.do',true);
// 3.發送請求
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.send('username='+oForm.username.value);
// 4.接收服務器相應數據
request.onload = function(){
if(request.responseText == 1){
oMsg.style.color='red';
oMsg.innerHTML = '無法注冊';
}else{
oMsg.style.color='green';
oMsg.innerHTML = '可以注冊';
}
}
}
</script>
</head>
<body>
<form id="form1" action="${ pageContext.request.contextPath }/reg.do" method="post">
<input type="text" name="username" onblur="check()"><span id="msg"></span><br/>
<input type="password" name="password"><br/>
<input type="submit">
</form>
</body>
</html>
~~~
RegisterServlet
~~~
package com.neusoft.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("/reg.do")
public class RegisterServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String username = request.getParameter("username");
if(username.equals("mike")) {
response.getWriter().println(1);
}else {
response.getWriter().println(0);
}
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request,response);
}
}
~~~
