Java Web入门之Ajax的用法详解(附代码和实战）

创作不易 觉得有帮助或需要源码可以点赞关注收藏后评论区留言

文章目录

• 前言
• 一、Ajax与传统的Web应用模式的对比
• 二、Ajax使用的技术
• 三、XMLHttpRequest对象的具体使用
• 四、与服务器通信--发送请求与处理响应
• 五、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>

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

有想要的朋友点赞关注收藏后评论区留言即可

---