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);
}
}
~~~
