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

超、凢脫俗 2023-09-30 15:49 3阅读 0赞

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

#### 文章目录 ####

*  前言
 *  一、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对象 并且判断是否成功 ####

#### 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的页面应用以下语句**

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

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

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

###  ###

--------------------

##  ##

[JavaScript]: https://blog.csdn.net/jiebaoshayebuhui/article/details/127086976?spm=1001.2014.3001.5501