背景

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

[前端] AJAX_ajax

 

完整代码 

网页

[前端] AJAX_javascript_02[前端] AJAX_html_03
 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>
View Code

checkName.jsp

[前端] AJAX_javascript_02[前端] AJAX_html_03
 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 %>
View Code