Ajax简介

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.获取页面输入的值

1. 形成要访问的验证页面的URL并传入值，也可以在xmlhttp.send(null)中传入
2. 创建XHR对象并赋值
3. 设置访问动作
4. 执行访问动作

*/

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>");     

%>