[前端] AJAX

背景

• Asynchronous JavaScript And XML：异步js和XML，可实现异步刷新

用途

• 验证提交的用户名是否已存在
• 不使用AJAX，需要提交数据后，刷新页面来验证
• 使用AJAX，可实现实时验证

执行过程

• 创建XHR对象（XML Http Request）
  • var xmlhttp =new XMLHttpRequest();
  • XHR对象是一个js对象，可自动与服务器进行数据交互
• 设置响应函数
  • xmlhttp.onreadystatechange=checkResult
  • 处理服务器返回的响应
• 设置要访问的页面，并发出请求
  • xmlhttp.open("GET",url,true);
  • 设置要访问的页面（GET方式）
  • xmlhttp.send(null);
  • 访问页面
• 处理响应消息
  • xmlhttp.responseText;
  • 获取服务器传回的文本

完整代码 

网页

<span>输入账号 :</span>
<input id="name" name="name" onkeyup="check()" type="text">  
<span id="checkResult"></span>
 
<script>
var xmlhttp;
function check(){
  var name = document.getElementById("name").value;
  var url = "https://how2j.cn/study/checkName.jsp?name="+name;
 
  xmlhttp =new XMLHttpRequest(); 
  xmlhttp.onreadystatechange=checkResult; //响应函数
  xmlhttp.open("GET",url,true);   //设置访问的页面
  xmlhttp.send(null);  //执行访问
}
 
function checkResult(){
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    document.getElementById('checkResult').innerHTML=xmlhttp.responseText;
  
}
 
</script>

checkName.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" isELIgnored="false"%>
 
<%
    String name = request.getParameter("name");
     
    if("abc".equals(name))
        out.print("<font color='red'>已经存在</font>");
    else
        out.print("<font color='green'>可以使用</font>");
     
%>