JavaWeb——Ajax
一、概述
- Ajax 是一种客户端技术,无论使用何种服务器技术都可以使用 Ajax;Ajax 是 XMLHttpRequest 对象和 Javascript、XML、CSS、DOM 等多种技术的组合。
- XMLHttpRequest 对象为新技术,是 Ajax 技术中的核心部分,是一个具有应用程序接口的 Javascript 对象,能使用 HTTP 连接服务器;由微软公司在 1999 年提出。
- XML 即 eXtensible Markup Language,翻译为中文为:可拓展标记语言,用于描述结构化数据,适用于不同应用程序之间的数据交换,因此 XMLHttpRequest 对象与服务器交互的数据采用该格式。
二、XMLHttpRequest
1、初始化
- XMLHttpRequest 对象的初始化分为 IE 式和非 IE 式,IE 式初始化如下:
var http_request = new ActiveXObject("Msxml2.XMLHTTP"); var http_request = new ActiveXObject("Microsoft.XMLHTTP");
- IE 浏览器将 XMLHttpRequest 对象初始化为一个 ActiveX 对象;非 IE 式初始化如下:
var htpp_request = new XMLHttpRequest();
- 因此要达到一个跨浏览器的 XMLHttpRequest 对象,可以使用如下方式:
if(window.XMLHttpRequest){ http_request = new XMLHttpRequest(); }else if(window.ActiveXObject){ try{ http_request = new ActiveXObject("Msxml2.XMLHTTP"); }catch(e){ try{ http_request = new ActiveXObject("Microsoft.XMLHTTP"); }catch(e){} } }
2、常用方法
open(method,URL,asyncFlag,userName,password)
- 该方法用于设置进行异步请求目标的 URL、请求方法以及其他参数信息。
- 前两个为必选参数,后三个为可选参数。
- 示例:
http_request.open("GET","register.jsp",true);
send(content)
- 该方法用于向服务器发送请求,为异步请求则立刻返回,如果非异步请求则等到服务器响应才返回。
- 示例:
http_request.send(null);
setRequestHeader(header,value)
- 用于设置请求的 HTPP 头设置值,第一个参数指定 HTTP 头,第二个参数设置 HTTP 头值。
- 示例:
http_request.setRequestHeader("Content-Type","application/x-www-from-urlcoded");
abort()
- 用于停止或放弃当前异步请求。
getReqponseHeader(headerLabel)
- 该方法用于获取指定的 HTTP 头的信息,类似的还有 getAllResponseHeader() 方法用于获取所有的 HTTP 头信息。
3、常用属性
- XMLHttpRequest 对象常用属性如下表:
属性名 意义 onreadystatechange 用于指定状态改变时所触发的事件处理器 readyState 用于获取请求的状态:0-未初始化,1-正在加载,2-已加载,3-交互中,4-完成 responseText 用于获取服务器的响应,表示为字符串 responseXML 用于获取服务器的响应,表示为 XML status 用于返回服务器的 HTTP 状态码,200-表示成功,202-表示请求被接受但尚未成功,400-错误的请求,404-文件未找到,500-内部服务器错误 statusText 用于返回 HTTP 状态码对应的文本
3、简单示例
- 首先新建一个 JSP 页面,命名为:userLogin.jsp,其代码如下:
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>用户名检查</title> <script language="javascript"> function createRequest(url) { http_request = false; if (window.XMLHttpRequest) { // a browser is not IE http_request = new XMLHttpRequest(); //create XMLHttpRequest object instance } else if (window.ActiveXObject) { // a browser is IE try { http_request = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { http_request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {} } } if (!http_request) { alert("Cannot create XMLHttpRequest object instance!"); return false; } http_request.onreadystatechange = getResult; // call option function to deal with the result http_request.open('GET', url, true); // create the connection between the server and client http_request.send(null); // send a request to a server } function getResult() { if (http_request.readyState === 4) { // Judge the statue of request if (http_request.status === 200) { // Request successfully,start to deal with the result of return document.getElementById("toolTip").innerHTML=http_request.responseText; //设置提示内容 document.getElementById("toolTip").style.display="block"; //show tooltip } else { // An error occurred on the request pages alert("The page you requested has errors!"); } } } function checkUser(userName){ if(userName.value===""){ alert("please enter user name!");userName.focus();return; }else{ createRequest('checkUser.jsp?user='+userName.value); } } </script> <style type="text/css"> <!-- #toolTip { position:absolute; left:331px; top:39px; width:100px; height:150px; padding-top:45px; padding-left:25px; padding-right:25px; z-index:1; display:none; color:red; background: #9ce9dd; } --> </style> </head> <body> <form method="post" action="" name="form"> <table width="509" height="352" border="0" align="center" cellpadding="0" cellspacing="0" > <tr> <td height="54"> </td> </tr> <tr> <td height="253" valign="top"> <div style="position:absolute;"> <table width="100%" height="250" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="18%" height="54" align="right" style="color:#8e6723 "><b>用户名:</b></td> <td width="49%"><label for="username"></label><input name="username" type="text" id="username" size="32"></td> <td width="33%"><input type="button" value="Checking username!" onclick="checkUser(form.username)"> </td> </tr> <tr> <td height="51" align="right" style="color:#8e6723 "><b>密码:</b></td> <td><label for="pwd1"></label><input name="pwd1" type="password" id="pwd1" size="35"></td> <td rowspan="2"> <div id="toolTip"></div></td> </tr> <tr> <td height="56" align="right" style="color:#8e6723 "><b>确认密码:</b></td> <td><label for="pwd2"></label><input name="pwd2" type="password" id="pwd2" size="35"></td> </tr> <tr> <td height="55" align="right" style="color:#8e6723 "><b>E-mail:</b></td> <td colspan="2"><label for="email"></label><input name="email" type="text" id="email" size="45"></td> </tr> <tr> <td> </td> <td colspan="2"><input type="button" value="Login"></td> </tr> </table> </div> </td> </tr> <tr> <td> </td> </tr> </table> </form> </body> </html>
- 在建立一个 JSP 页面用于检查用户名是否可用,命名为:checkUser.jsp,代码如下:
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ page import="java.util.Arrays" %> <% String[] userList={"御承扬","pyc","夜烬天","wyn"}; //创建一个一维数组 String user= request.getParameter("user"); //获取用户名 Arrays.sort(userList); //对数组排序 int result=Arrays.binarySearch(userList,user); //搜索数组 if(result>-1){ out.println("Sorry, the username is already registered!"); //输出检测结果 }else{ out.println("Congratulations, the username has not been registered!"); //输出检测结果 } %>
- 运行效果如下:
- 当用户名没有输入时,点击检查则弹出提示请输入用户名。
- 当用户名已经被注册
- 当用户名为被注册。