[前端] 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;
  • 获取服务器传回的文本

完整代码

网页

 1 <span>输入账号 :</span>
 2 <input id="name" name="name" onkeyup="check()" type="text">
 3 <span id="checkResult"></span>
 4
 5 <script>
 6 var xmlhttp;
 7 function check(){
 8   var name = document.getElementById("name").value;
 9   var url = "https://how2j.cn/study/checkName.jsp?name="+name;
10
11   xmlhttp =new XMLHttpRequest();
12   xmlhttp.onreadystatechange=checkResult; //响应函数
13   xmlhttp.open("GET",url,true);   //设置访问的页面
14   xmlhttp.send(null);  //执行访问
15 }
16
17 function checkResult(){
18   if (xmlhttp.readyState==4 && xmlhttp.status==200)
19     document.getElementById('checkResult').innerHTML=xmlhttp.responseText;
20
21 }
22
23 </script>

checkName.jsp

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