Java Web中Ajax技术使用方法介绍-Java开发

ajax技术是使页面能局部刷新的一种技术,下面这篇文章主要给大家介绍了关于JavaWeb之Ajax的基本使用与实战案例的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

前言

Ajax是一个客户端技术是更加先进标准化和高效的Web开发技术

提示：以下是本篇文章正文内容，下面案例可供参考

一、Ajax与传统的Web应用模式的对比

在传统的Web应用中页面中用于的每一次操作都将触发一次返回Web服务器的HTTP请求服务器将进行相应的处理然后返回一个HTML页面给客户端

而在Ajax应用中页面中用户的操作将通过Ajax引擎与服务器端进行通信然后将返回结果提交给客户端页面的Ajax引擎再由Ajax引擎来决定将这些数据插入到页面的指定位置

所以在Ajax开发模式中可以通过JavaScript实现在不刷新整个页面的情况下对部分数据进行更新从而降低了网络流浪给用户带来更好的体验

二、Ajax使用的技术

Ajax是XMLHttpRequest对象和JavaScript XML CSS DOM等多种技术的组合其中只有XMLHttpRequest对象是新技术其他的均为已有技术

1：XMLHttpRequest对象

是核心技术它是一个具有应用程序接口的JavaScript对象能够使用超文本传输协议连接一个服务器是微软公司为了满足开发者的需要推出的

2：XML

它是可扩展的标记语言的缩写，它提供了用于描述结构化数据的格式适用于不同应用程序间的数据交换而且这种交换不以预先定义的一组数据结构为前提增强了可扩展性 XMLHttpRequest对象与服务器交换的数据通常采用XML格式

在XML文档中元素以树形分层结构排列其实<resume>为根元素其他的都是该元素的子元素

3：JavaScript

它是一种在Web页面中添加动态脚本代码的解释性程序语言具体介绍可以参考

JavaScript

4：CSS 样式表

5：DOM 文档对象模型

三、XMLHttpRequest对象的具体使用

1、初始化XMLHttpRequest对象

IE浏览器初始化如下

var http_request=new ActiveXObject("Msxml2.XMLHTTP");

或者

var http_request=new ActiveObject("Microsoft.XMLHTTP");

非IE浏览器

var http_request=new XMLHttpRequest();

两种情况的实例化代码如下

if(window.XMLHttpRequest){
http_request=new XMLHttpRequest();
}
else if(window.ActiveObject){
try{
http_request=new ActiveXObject("Msxml2.XMLHTTP");
}
cathc(e){
try{
http_request=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){}
}
}

2、XMLHttpRequest对象常用方法

open()方法用于设置进行异步请求目标的URL 请求方法以及其他参数信息

open("method","URL"[,asyncFlag[,"userName"[,"password"]]])

send()方法用于向服务器发送请求如果请求声明为异步该方法将立即返回否则要等到接受到响应为止

send(content)

setRquestHeader()方法用于为请求的HTTP头设置值

setRequestHeader("header","value")

3、XMLHttpRequest常用属性

onreadystatechange属性用于指定状态改变时所触发的事件处理器在Ajax中每个状态改变都会触发一个事件处理器通常会调用一个JavaScript函数

http_request.onreadystatechange=getResult;

readystate属性用于获取请求的状态包括五个属性值 0代表未初始化 1代表正在加载 2代表已加载 3代表交互中 4代表完成

status属性用于返回服务器的HTTP状态码 200表示请求成功 202表示请求被接受 400表示错误的请求 404表示文件未找到 500表示内部服务器错误

四、与服务器通信-发送请求与处理响应

发送get和post请求都要经过以下四个步骤

1：初始化XMLHttpRequest对象为了提高程序的兼容性需要创建一个跨浏览器的XMLHtppRequest对象并且判断是否成功

if(window.XMLHttpRequest){
http_request=new XMLHttpRequest();
}
else if(window.ActiveObject){
try{
http_request=new ActiveXObject("Msxml2.XMLHTTP");
}
cathc(e){
try{
http_request=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){}
}
}

2：为XMLHttpRequest对象指定一个返回结果处理函数用于对返回结果进行处理

3：创建一个与服务器的连接在创建时需要指定发送请求的方式以及设置是否采用异步方法发送请求

4：向服务器发送请求 XMLHttpRequest对象的send方法可以向服务器发送请求该方法需要传递一个参数如果发送的时GET请求则参数可以设置为NULL POST请求则要指定参数

处理服务器响应

XMLHttpRequest对象提供了两个用来访问服务器响应的属性一个时responseText属性返回字符串响应另一个时responseXML属性返回XML响应

1：处理字符串响应

通常应用在响应不是特别复杂的情况下

2：处理XML响应

如果在服务器端需要生成特别复杂的响应那么就需要应用XML响应应用XMLHttpRequest对象的responseXML属性可以生成一个XML文档

解决中文乱码问题

1：当接收使用GET方法提交的数据时要将编码转换为GBK或者UTF-8

String seIProvince=request.getParameter("parProvince");
seIProvince=new String(seIProvince.getBytes("ISO-8859-1"),("UTF-8");

2:应用POST方法提交数据时

String username=request.getParameter("user");
username=new String(username.getBytes("ISO-8859-1"),("UTF-8");

五、Ajax重构

Ajax的实现主要依赖于XMLHttpRequest对象如果在调用其进行异步数据传输时由于XMLHttpRequest对象的实例在处理事件完成后就会被销毁所以如果不对该对象进行封装处理，在下次需要调用它的时猴就要重新构建，浪费资源并且浪费事件，不过JavaScript脚本语言支持OO编码风格，通过它将Ajax所必需的功能封装在对象中分为以下三步

1:创建一个单独的JS文件命名为AjaxRequest.js 并且在该文件中编写重构Ajax所需要的代码

2:在需要应用Ajax的页面应用以下语句

<script language="javascript" src="AjaxRequest.js"></script>

3:在应用Ajax的页面中编写错误处理的方法实例化Ajax对象的方法和回调函数

<script language="javascript">
 function onerror(){
alert("您的操作有错误");
}
function getInfo(){
var loader=new net.AjaxRequest("getInfo.jsp?nocache="+new Date().getTime(),deal_getInfo,onerror,"GET");
}
function deal_getInfo(){
document.getElementById("showInfo").innerHTML=this.req.responseText;
}
</script>

有两个实例分别是级联下拉列表的创建和显示进度条代码过多此处不展示

到此这篇关于Java Web中Ajax技术使用方法介绍的文章就介绍到这了,更多相关JavaWeb Ajax内容请搜索编程学习网以前的文章希望大家以后多多支持编程学习网！