Ajax技术——与服务器通信
2016-10-22 09:23
260 查看
1. 发送请求
Ajax可以通过XMLHttpRequest对象实现采用异步方式在后台发送请求。通常情况下，Ajax发送请求有两种，一种是发送GET请求，另一种是发送POST请求。但是无论发送哪种请求，都需要经过以下4个步骤。（1）初始化XMLHttpRequest对象。为了提高程序的兼容性，需要创建一个跨浏览器的XMLHttpRequest对象，并且判断XMLHttpRequest对象的实例是否成功，如果不成功，则给予提示。具体代码如下：
例1.1 发送请求。
http_request=false;
if(window.XMLHttpRequest){ //非IE浏览器
http_request=new XMLHttpRequest(); //创建XMLHttpRequest对象
}else if(window.ActiveXObject){ //IE浏览器
try{
http_request=new ActiveXObject("Msxml2.XMLHTTP"); //创建XMLHttpRequest对象
}catch(e){
try{
http_request=new ActiveXObject("Microsoft.XMLHTTP"); //创建XMLHttpRequest对象
}catch(e){}
}
}
if(!http_request){
alert("不能创建XMLHttpRequest 对象实例！");
return false;
}(2) 为XMLHttpRequest对象指定一个返回结果处理函数（即回调函数），用于对返回结果进行处理。具体代码如下：
例1.2 设置回调函数。
http_request.onreadystatechange=getResult; //调用返回结果处理函数
注意：使用XMLHttpRequest对象的onreadystatechange属性指定回调函数时，不能指定要传递的参数。如果要指定传递的参数，可以用以下方法：
http_request.onreadystatechange=function(){getResult(param)};（3）创建一个与服务器的连接。在创建时，需要指定发送请求的方式（即GET或POST），以及设置是否采用异步方式发送请求。
例1.3 采用异步方式发送GET方式的请求的具体代码如下：
http_request.open('GET',url,true);例1.4 采用异步方式发送POST方式的请求的具体代码如下：
http_request.open('POST',url,true);说明：在open()方法中的url参数，可以是一个JSP页面的URL地址，也可以是Servlet的映射地址。也就是说，请求处理页，可以是一个JSP页面，也可以是一个Servlet。
技巧：在指定URL参数时，最好将一个时间戳追加到该URL参数的后面，这样可以防止因浏览器缓存结果而不能实时得到最新的结果。例如，可以指定URL参数为以下代码：
String url="deal.jsp?nocache="+new Date().getTime();
（4）想服务器发送请求。XMLHttpRequest对象的send()方法可以实现向服务器发送请求，该方法需要传递一个参数，如果发送的是GET请求，可以将该参数设置为null；如果发送的是POST请求，可以通过该参数指定要发送的请求参数。
向服务器发送GET请求的代码如下：
http_request.send(null); //向服务器发送请求
例1.5 向服务器发送POST请求的代码如下：
var param="user="+form1.user.value+"&pwd="+form1.pwd.value+"&emali="+form1.email.value; //组合参数 http_request.send(param); //向服务器发送请求
需要注意的是在发送POST请求之前，还需要设置正确的请求头。具体代码如下：
http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");上面这句代码，需要加在“http_request.send(param);”语句之前。
2. 处理服务器响应
XMLHttpRequest对象提供了两个用来访问服务器响应的属性，一个是responseText属性，返回字符串响应；另一个是responseXML属性，返回XML响应。
2.1 处理字符串响应
字符串响应通常应用在响应不是特别复杂的情况下。例如，将响应显示在提示对话框中，或者响应只是显示成功或失败的字符串。例2.1 将字符串响应显示到提示对话框中的回调函数的具体代码如下：
function getResult(){
if(http_request.readyState==4){ //判断请求状态
if(http_request.status==200){ //请求成功，开始处理返回结果
alert(http_request.responseText); //显示判断结果
}else { //请求页面有错误
alert("您所请求的页面有错误！");
}
}
}如果需要将该响应结果显示到页面的指定位置，也可以先在页面的合适位置添加一个<div>或<span>标记，将设置该标记的id属性，如div_result，然后在回调函数中应用以下代码显示响应结果：
document.getElementById("div_result").innerHTML=http_request.responseText;
2.2 处理XML响应
如果在服务器端需要生成特别复杂的响应，那么就需要应用XML响应。应用XMLHttpRequest对象的responseXML属性，可以生成一个XML文档，而且当前浏览器已经提供了很好的解析XML文档对象的方法。例2.2 保存图书信息的XML文档。具体代码如下：
<?xml version="1.0" encoding="UTF-8"?> <mr> <books> <book> <title>Java Web程序开发范例宝典</title> <publisher>人民邮电出版社</publisher> </book> <book> <title>Java 范例完全自学手册</title> <publisher>人民邮电出版社</publisher> </book> </books> </mr>
在回调函数中遍历保存图书信息的XML文档，并将其显示到页面中的代码如下：
function getResult(){
if(http_request.readyState==4){
if(http_request.status==200){
var xmldoc=http_request.responseXML;
var str="";
for (int i = 0; i <xmldoc.getElementByTagName("book").length; i++) {
var book=xmldoc.getElementByTagName("book").item(i);
str=str+"《"+book.getElementByTagName("title")[0].firstChild.data+"》由“"+
book.getElementByTagName('publisher')[0].firstChild.data+"”出版<br>";
}
document.getElementById("book").innerHTML=str; //显示图书信息
}else {
alert("您所请求的页面有错误！");
}
}
}
<div id="book"></div>通过上面的代码获取的XML文档的信息如下：
《Java Web程序开发范例宝典》由“人民邮电出版社”出版
《Java 范例完全自学手册》由“人民邮电出版社”出版
3. 一个完整的实例——检测用户名是否唯一
例3.1 检测用户名是否唯一。（1）创建index.jsp文件，在该文件中添加一个用于收集用户注册信息的表单及表单元素，以及表“检测用户名”按钮的图片，并在该图片的onclick事件中调用checkName()方法，检测用于名是否被注册。在页面的合适位置添加一个用于显示提示信息的<div>标记，并且通过CSS设置该<div>标记的样式。关键代码如下：
<%@ page language="java" contentType="text/html; charset=GB18030"
pageEncoding="GB18030"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>Insert title here</title>
</head>
<style type="text/css">
<!--
#toolTip{
position:absolute; //设置绝对定位
left:331px; //设置左边距
top:39px; //设置顶边距
width:98px; //设置宽度
height:48px; //设置高度
padding-top:45px; //设置文字与顶边的距离
padding-left:25px; //设置文字与左边的距离
padding-right:25px; //设置文字与右边的距离
z-index:1;
display:none; //设置默认不显示
color:red; //设置文字的颜色
background-image:url(images/tooltip.gif); //设置背景图片
}
-->
</style>
<div id="toolTip"></div>
<script type="text/javascript">
function createRequest(url){
http_request=false;
if(window.XMLHttpRequest){ //非IE浏览器
http_request=new XMLHttpRequest(); //创建XMLHttpRequest对象
}else if(window.ActiveXObject){ //IE浏览器
try{
http_request=new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
http_request=new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){}
}
}
if(!http_request){
alert("不能创建MLHttpRequest对象实例！");
return false;
}
http_request.onreadystatechange=getResult; //调用返回结果处理函数
http_request.open("GET", url, true); //创建与服务器的连接
http_request.send(null); //向服务器发送请求
}
function getResult(){
if(http_request.readyState==4){ //判断请求状态
if(http_request.status==200){ //请求成功，开始处理返回结果
document.getElementById("toolTip").innerHTML=http_request.responseText; //设置提示内容
document.getElementById("toolTip").style.display="block"; //显示提示框
}else { //请求页面有错误
alert("您所请求的页面有错误！");
}
}
}
function checkUser(userName){
if(userName.value==""){
alert("请输入用户名！");
userName.focus();
return;
}else{
createRequest('checkUser.jsp?user='+userName.value);
}
}
</script>
<body>
<form method="post" action="" name="form1">
用 户 名：<input type="text" name="username" id="username" size="32">
<img src="images/checkBt.png" width="100" height="26" style="cursor:hand;" onclick="checkUser(form1.username);"><br>
密 码：<input type="password" name="pwd1" id="pwd1" size="35"><br>
确认密码：<input type="password" name="pwd2" id="pwd2" size="35"><br>
E-mail：<input type="text" name="email" id="email" size="45"><br>
<input type="image" name="imageField" src="images/registerBt.png">
</form>
</body>
</html>（2）编写检测用户名是否被注册的处理页checkUse.jsp，在该页面中判断输入的用户名是否注册，并应用JSP内置对象out的println()方法输出判断结果。checkUser.jsp页面的具体代码如下：
<%@ page language="java" contentType="text/html; charset=GB18030"
pageEncoding="GB18030"%>
<%@ page import="java.util.*" %>
<%
String[] userList={"明日科技","mr","mrsoft","gao"}; //创建一个一维数据
String user=new String(request.getParameter("user").getBytes("ISO-8859-1"),"GB18030"); //获取用户名 防止乱码
Arrays.sort(userList); //对数组排序
int result=Arrays.binarySearch(userList, user);
if(result>-1){
out.println("很抱歉，该用户名已被注册！"); //输出检测结果
}else{
out.println("恭喜您，该用户名没有被注册!"); //输出检测结果
}
%>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Ajax技术之与服务器通信-发送请求与处理响应
- Ajax技术之与服务器通信-一个完整的实例(实现检测用户名是否唯一功能)
- Ajax技术——与服务器通信
- Ajax与服务器异步通信通信代码的实现
- jQuery实战读书笔记（第八章 使用 Ajax 与服务器通信）
- AJAX建立和服务器连接，接收服务器技术处理服务器返回的数据
- 服务器推送技术comet（AJAX长轮询）
- ajax利用json进行服务器与客户端的通信
- AJAX建立和服务器连接，接收服务器技术处理服务器返回的数据
- 前端通信：ajax设计方案（三）--- 集成ajax上传技术
- Ajax获取XmlHttpRequest对象的方法，兼容IE、火狐。用来与服务器进行通信。
- Remoting技术初探--实现简单服务器客户机通信
- Comet, 下一代反向AJAX（即服务器推送技术- Server-side push）
- 【实验】综合实验（VLAN间通信，ACL技术，DNS/WEB服务器架设，RIP路由）
- jQuery框架问 4000 题：ajax与web服务器通信
- AJAX实践之与服务器通信
- 技术文档：使用JavaFX Script 进行客户端-服务器通信(eNew 第二十八期/2007.09)
- jQuery框架问题：ajax与web服务器通信
- 基于 Ajax 的 web 应用程序中各种客户端-服务器通信机制
- Comet, 下一代反向AJAX（即服务器推送技术- Server-side push）