一：得到XMLHttpRequest对象
ajax其实只需要学习XMLHttpRequest一个对象
大多数浏览器都支持：
var xmlHttp = new XMLHttprequest();
IE 6.0:
var mltHttp = new ActiveXObject("Msxml2.XMLHTTP");
IE 5.5 及更早的IE
var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
* 编写创建XMLHttpRequest对象函数
function createXMLHttpRequest(){ try{ return new XMLHttpRequest(); }catch(e){ try{ return new ActiveXObject("Msxml2.XMLHTTP"); }catch(e){ try{ return new ActiveXObject(Microsoft.XMLHTTP'); }catch(e){ throw e； } } } }
二：打开与服务器的链接
xmlHttp.open()用来打开与服务器的链接
参数：请求方式，请求URL，请求是否为异步
xmlHttp.oprn("GET","/AServlet",true);
三：发送请求
xmlHttp.send(null);//如果不写null可能导致部分浏览器无法使用
GET请求必须写null
四：
要在xmlHttp对象的一个事件上注册监听器：onreadystatechange
得到xmlHttp对象的状态：
var state = xmlHttp.readyState;//可能是0、1、2、3、4
得到服务器响应的状态码
var status = xmlHttp.status;//例如200、404、500
得到服务器响应的内容
var content = xmlHttp.responseText;//得到服务器响应的文本格式的内容 var content = xmlHttp.responseXML;//得到服务器响应的XML响应内容，它是Document对象了
xmlHttp.onreadystatechange = function(){//xmlHttp的5种状态都会调用本方法 if(xmlHttp.readyState ==4 && xmlHttp.status ==200){//双重判断，既要响应成功，又要服务器响应结束 //获取服务器响应的内容 var text = xmlHttp.responseText; } };
五：POST(如果发送请求时带有参数，一般使用POST请求）
open :
xmlHttp.open("POST");
添加一步：设置Content-Type请求头
xmlHttp.setRequestHeander("Content-Type","application/x-www-form-urlencoded");
send:
xmlHttp.send("username=xxx&password=xxx");
jsp
<%-- Created by IntelliJ IDEA. User: YuWenHui Date: 2017/4/20 0020 Time: 19:12 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <html> <head> <title>AJAX</title> <script type="text/javascript"> function createXMLHttpRequest() { try { return new XMLHttpRequest(); }catch (e){ try { return new ActiveXObject("Msxml2.XMLHTTP"); }catch (e){ try { return new ActiveXObject("Microsoft.XMLHTTP"); }catch (e){ throw e; } } } } window.onload = function () { var username = document.getElementById("username"); username.onblur=function () { var xmlHttp = createXMLHttpRequest(); xmlHttp.open("POST","<c:url value='/ValidateUsenameServlet'/> ",true); xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xmlHttp.send("username="+username.value); xmlHttp.onreadystatechange=function () { if(xmlHttp.readyState==4 && xmlHttp.status ==200){ var span = document.getElementById("errorSpan"); if(xmlHttp.responseText == 1){ span.innerHTML="该用户名已被注册"; }else { span.innerHTML=""; } } } } } </script> </head> <body> <h1>测试用户名是否被注册</h1> <form action="" method="post"> 用户名：<input type="text" name="username" ><span name="errorSpan"></span><br/> 密 码：<input type="password" name="password"><br> <input type="submit" value="登陆"> </form> </body> </html>
sevlet
package servlet; import java.io.IOException; /** * Created by YuWenHui on 2017/4/20 0020. */ public class ValidateUsenameServlet extends javax.servlet.http.HttpServlet { protected void doPost(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException { response.setContentType("text/html;charset=utf-8"); request.setCharacterEncoding("utf-8"); String name = request.getParameter("username"); if ("yuwenhui".equalsIgnoreCase(name) || "余文辉".equalsIgnoreCase(name)){ response.getWriter().print("1"); }else { response.getWriter().print("0"); } } }