通过AJAX( Asynchronous JavaScript And XML) 实现异步刷新
问题:如何建立一个JSP页面,步骤过程?这里留疑
——已解决,利用eclipse,收藏问题里有详细答题
一、认识AJAX
用于用户名校验的页面 准备一个JSP页面,叫做checkName.jsp用于校验提交的用户名是否存在 | <html> <a href="https://how2j.cn/study/checkName.jsp?name=abc">checkName.jsp?name=abc</a> <br> <a href="https://how2j.cn/study/checkName.jsp?name=def">checkName.jsp?name=def</a> </html> |
不使用AJAX 通过刷新页面验证账号是否存在 | <form action="https://how2j.cn/study/checkName.jsp"> 输入账号 <input name="name" type="text" value="abc"> <input type="submit" value="验证账号是否存在"> </form> |
使用AJAX 通过无刷新验证账号是否存在 | <span>输入账号 :</span> <input id="name" name="name" οnkeyup="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> |
二、 分布分析AJAX每个步骤(学习与网页,已标注)
AJAX 请求和相应图示 | |
创建XHR 创建XHR对象 XMLHttpRequest | <script> var xmlhttp =new XMLHttpRequest(); document.write(xmlhttp); </script> |
设置响应函数 | XHR对象的作用是和服务器进行交互,所以既会发消息给服务器,也能接受服务器返回的响应。 |
设置并发出请求 | 通过open函数设置背后的这个小线程,将要访问的页面url ,在本例中就是 /study/checkName.jsp xmlhttp.open("GET",url,true);
xmlhttp.send(null);
|
处理响应信息 在checkResult 函数中处理响应 function checkResult(){ if (xmlhttp.readyState==4 && xmlhttp.status==200) document.getElementById('checkResult').innerHTML=xmlhttp.responseText; } | xmlhttp.readyState 4 表示请求已完成 |
checkName.jsp 先简单了解一下,后面学习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>"); %> |