13、Ajax的使用

时间:2022-11-05 20:59:22

一、AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。

  a)、AJAX = 异步 JavaScript 和 XML。

  b)、AJAX 是一种用于创建快速动态网页的技术。

  通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。例如我们在用户注册的时候需要验证该注册名是否已经存在,这时候就可以使用Ajax实现与服务器的的通信来验证。

二、AJAX的使用:

  1、创建 XMLHttpRequest 对象:所有现代浏览器(IE7+、Firefox、Chrome、Safari 以及 Opera)均内建 XMLHttpRequest 对象。老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveX 对象(详见W3School)

  2、向服务器发送请求:与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用

  3、处理返回数据

 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript">
function ajax(){
var url = "<%=request.getContextPath() %>/servlet/AjaxTest";
var value = document.getElementById("userName").value;
var xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState == 4){
if("unsucceed"== xmlHttp.responseText){
document.getElementById("userName").value=null;
document.getElementById("userName").placeholder="该用户已被占用,请重新输入";
}
}
};
xmlHttp.open("POST", url, true);// true:异步调用 false:同步调用
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");// 设置请求头信息
xmlHttp.send("userName="+value);
}
function submit_user(){
if(document.getElementById("userName").value.length>1){
if(document.getElementById("passWord").value.length > 5)
document.getElementById("user").submit();
else{
document.getElementById("passWord").value=null;
document.getElementById("passWord").placeholder="请重新输入密码";
alert("请输入6位数以上密码");
}
}else
alert("请先输入用户名");
}
</script>
</head>
<body>
<form id="user" method="get" action="<%=request.getContextPath()%>/servlet/LoginTest">
<table>
<tr>
<td>姓名<td/>
<td><input type="text" id="userName" name="userName" onblur="ajax()" placeholder="请输入姓名"><td/>
<tr/>
<tr>
<td>密码<td/>
<td><input type="password" id="passWord" name="passWord" placeholder="请输入密码"><td/>
<tr/>
<tr>
<td><td/>
<td><input type="button" onClick="submit_user()" value="注册"/><td/>
<tr/>
</table>
</form>
</body>
</html>