Ajax:通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
用ajax实现验证用户名是否存在:
/*获取用户名的静态页面*/
<span>输入账号 :</span>
<input id="name" name="name" onkeyup="check()" type="text"> /**input中输入内容,出发onkeyup中的check()函数*/
<span id="checkResult"></span>
<script>
/**
创建XHR对象 XMLHttpRequest,XHR对象是一个javascript对象,既会发消息给服务器,也能接受服务器返回的响应,它可以在用户没有感觉的情况下,就像背后运行的一根小线程一般,悄悄的和服务器进行数据交互
AJAX就是通过它做到无刷新效果的*/
var xmlhttp;//定义常亮
/**1.获取页面输入的值
- 形成要访问的验证页面的URL并传入值,也可以在xmlhttp.send(null)中传入
- 创建XHR对象并赋值
- 设置访问动作
- 执行访问动作
*/
function check(){
var name = document.getElementById("name").value;
var url = "https://how2j.cn/study/checkName.jsp?name="+name;
xmlhttp =new XMLHttpRequest();
xmlhttp.open("GET",url,true); //设置访问的页面
xmlhttp.send(null); //执行访问
/**在 onreadystatechange 事件中,我们规定当服务器响应已做好被处理的准备时所执行的任务,即执行checkResult函数*/
xmlhttp.onreadystatechange=checkResult; //响应函数
}
/**服务器响应成功后,将返回的结果填充到页面 */
function checkResult(){
if (xmlhttp.readyState==4 && xmlhttp.status==200)
document.getElementById('checkResult').innerHTML=xmlhttp.responseText;
}
</script>
/*验证用户名是否存在的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>");
%>