Ajax-Ajax基础实例

article/2025/10/6 7:45:33

实例一：点击一个按钮，然后将信息显示到指定的div内。

　　1、创建一个JAVA web工程，命名为AjaxTest。在webRoot创建一个HTML页面，命名为FirstTest.html，FirstTest.html代码如下：

复制代码 
<html><head><title>FirstTest.html</title><script language="javascript">function onclickAjax(){}</script></head><body><input type="button" value="测试" onclick="onclickAjax()"><div id="testid"></div></body>
</html>
复制代码

 　　在上面代码中给input绑定了点击事件onclickAjax()，这个onclickAjax()方法就是要实现Ajax的JS方法。

　　2、实现onclickAjax方法

　　为了方便理解，我给AJAX统一了一个流程，要想实现AJAX，就要按照以后步骤走：

　　（1）创建XMLHttp对象。（2）设置请求方式。（3）调用回调函数。（4）发送请求。

　　下面详细解释这4个步骤。

　　（1）创建XMLHttp对象：XMLHttp对象用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

　　创建XMLHttp对象的语法是:var xmlHttp=new XMLHttpRequest();如果是IE5或者IE6浏览器，则使用ActiveX对象，创建方法是：

var xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

　　一般我们手写AJAX的时候，首先要判断该浏览器是否支持XMLHttpRequest对象，如果支持则创建该对象，如果不支持则创建ActiveX对象。JS代码如下：

复制代码 
var xmlHttp;
if(window.XMLHttpRequest){xmlHttp=new XMLHttpRequest();
}
else if(window.ActiveXObject){xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
复制代码

 　　（2）设置请求方式：在WEB开发中，请求有两种形式，一个是get 一个是post，所以在这里需要设置一下具体使用哪个请求，XMLHttpRequest对象的open()方法就是来设置请求方式的。

　　open()：

　　　　功能：规定请求的类型、URL 以及是否异步处理请求。

　　　　参数：参数1，设置请求类型（GET 或 POST），GET与POST的区别请自己百度一下，这里不做解释；

　　　　　　   参数2，文件在服务器上的位置；

　　　　　　   参数3，是否异步处理请求，是为true，否为false。

　　具体的JS代码实现如下：

xmlHttp.open("POST","test.do?method=ajaxTest&&msg="+new Date(),true);

　　在上段代码中，请求的名字是："test.do?method=ajaxTest&&msg="+new Date()，后面有个new Date()，这里主要是防止缓存问题，如果是不段的更新页面内容，那么很可能就会出现点击按钮后内容页不改变，因为如果没有后面的msg=new Date()那么我们每一次发送的请求都是一样的，这样很可能就导致了缓存问题。所以需要在请求后面加上msg=new Date()，这样保障了每次的请求都不一样，避免缓存问题。

　　（3）回调函数：

　　如果在上一步中open方法的第三个参数选择的是true，那么当前就是异步请求，这个时候需要写一个回调函数，xmlHttp对象有一个onreadystatechange属性，这个属性返回的是一个匿名的方法，所以回调函数就在这里写xmlHttp.onreadystatechange=function{},function{}内部就是回调函数的内容。所谓回调函数，就是请求在后台处理完，再返回到前台所实现的功能。在这个例子里，我们的回调函数要实现的功能就是接收后台处理后反馈给前台的数据，然后将这个数据显示到指定的div上。因为从后台返回的数据可能是错误的，所以在回调函数中首先要判断后台返回的信息是否正确，如果正确才可以继续执行。代码如下：

复制代码 
if(xmlHttp.readyState==4){if(xmlHttp.status==200){document.getElementById("testid").value=xmlHttp.responseText;//将信息显示到页面
 }else{alert("AJAX服务器返回错误！");
}    
}
复制代码

　　在上面代码中，xmlHttp.readyState是存有XMLHttpRequest 的状态。从 0 到 4 发生变化。0: 请求未初始化。1: 服务器连接已建立。2: 请求已接收。3: 请求处理中。4: 请求已完成，且响应已就绪。所以这里我们判断只有当xmlHttp.readyState为4的时候才可以继续执行。

　　xmlHttp.status是服务器返回的结果，其中200代表正确。404代表未找到页面，所以这里我们判断只有当xmlHttp.status等于200的时候才可以继续执行。

　　document.getElementById("testid").value=xmlHttp.responseText;这段代码就是回调函数的核心内容，就是获取后台返回的数据，然后将这个数据赋值给id为testid的div。xmlHttp对象有两个属性都可以获取后台返回的数据，分别是：responseText和responseXML，其中responseText是用来获得字符串形式的响应数据，responseXML是用来获得 XML 形式的响应数据。至于选择哪一个是取决于后台给返回的数据的，这个例子里我们只是显示一条字符串数据所以选择的是responseText。responseXML将会在以后的例子中介绍。

　　（4）发送请求：发送请求是调用xmlHttp对象的send()方法。代码如下：

xmlHttp.send();

　　综合以上讲解，整个FirstTest.html页面的代码如下：

复制代码 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>FirstTest.html</title><script language="javascript">function onclickAjax(){var xmlHttp;//分浏览器创建XMLHttp对象
if(window.XMLHttpRequest){xmlHttp=new XMLHttpRequest();}else if(window.ActiveXObject){xmlHttp=new ActiveXObject("Microsoft.XMLHTTP")}//设置请求类型
            xmlHttp.open("POST","test.do?method=ajaxTest&&msg="+new Date(),true);//回调函数
            xmlHttp.onreadystatechange=function(){if(xmlHttp.readyState==4){if(xmlHttp.status==200){document.getElementById("testid").value=xmlHttp.responseText;}else{alert("AJAX服务器返回错误！");}    }}//发送请求
            xmlHttp.send();}</script></head><body><input type="button" value="测试" onclick="onclickAjax()"><div id="testid"></div></body>
</html>
复制代码

 　　3、后台部分

　　这个例子的后台部分使用JAVA来写，主要应用了struts1框架。

　　（1）struts-config文件：

复制代码 
<struts-config><form-beans /><action-mappings><action path="/test" type="com.test.controller.AjaxController" parameter="method" scope="request"></action></action-mappings><message-resources parameter="com.test.controller.ApplicationResources" />
</struts-config>
复制代码

　　（2）在包com.test.controller包下创建类AjaxController，并继承DispatchAction，重写execute方法并将该方法命名为ajaxTest。该方法代码如下：

复制代码 
public ActionForward ajaxTest(ActionMapping mapping, ActionForm form,HttpServletRequest request, HttpServletResponse response)throws Exception {String msg="第一个AJAX小程序";response.getWriter().write(msg);return null;}
复制代码

至此后台代码完成。



实例二：Ajax返回Json在Java中的实现

　　在上一个随笔中，介绍AJAX的一个简单实例，在这篇中主要是说一下使用Json来将后台取得的数据显示到前台页面。可以说这种方法应该是实现无刷新分页的基础，而且在开发过程中经常被用到。这里的后台部分由JAVA来实现。

　　这个例子也在上一篇中那个项目中实现。新建一个SecondTest.html页面，定义一个按钮，并给这个按钮绑定事件ajaxJson()。在JS中实现AJAX，这里的AJAX相对于上一篇中的，我做了简单的封装，将原有的代码分成三个方法，分别是create()、callback()、run()。

　　create方法是用来创建XMLHttp对象的，callback是用来实现回调函数的，run方法是核心方法。具体代码如下：

　　create()：

复制代码 
function create(){if(window.XMLHttpRequest){xmlHttp=new XMLHttpRequest();}else if(window.ActiveXObject){xmlHttp=new ActiveXObject("Microsoft.XMLHTTP")}}
复制代码

　　callback()：

复制代码 
function callback(){if(xmlHttp.readyState==4){if(xmlHttp.status==200){//要实现的操作
                    }else{alert("AJAX服务器返回错误！");}    }}
复制代码

　　run()：

function run(url){create();xmlHttp.open("POST",url,true);xmlHttp.onreadystatechange=callback;xmlHttp.send();}

　　以上三个方法写好后，在ajaxJson()方法中直接调用run方法并将请求当参数传入进去。代码如下：

function ajaxJson(){run("test.do?method=jsonTest&&msg="+new Date());}

　　在AjaxController类的中新建jsonTest方法，在JAVA中实现Json是需要Json架包的，Json的架包有：json-lib-2.3-jdk15.jar，ezmorph-1[1].0.6.jar，commons-logging-tests.jar，commons-logging-api-1.1.1.jar，commons-logging-adapters-1.1.1.jar，commons-logging-1.1.1-sources.jar，commons-logging-1.1.1-javadoc.jar，commons-logging-1.1.1.jar，commons-lang.jar，commons-collections-3[1].2.1.jar，commons-beanutils-core.jar，commons-beanutils-bean-collections.jar，commons-beanutils.jar。看着有点多哈，可以自己去CSDN上面找，我试着删掉一些，但发现少了会不好使，所以为了保险还是把这些都加进去吧。

　　在开发过程中一般数据都是从数据库中取出来的，习惯性的我们会在程序中将取出的数据存到List中，而Json架包中正好有封装好的方法能将List转换为Json。在这个例子中我们自己制造一些假数据放到List中，然后再将List转换为Json，再返回给前台。代码如下：

复制代码 
public ActionForward jsonTest(ActionMapping mapping, ActionForm form,HttpServletRequest request, HttpServletResponse response)throws Exception {//制造假数据
        ArrayList<UserModel> list=new ArrayList<UserModel>();UserModel user1=new UserModel();//用户对象1
        user1.setUserId(1);user1.setUserName("哈哈");user1.setUserSex("男");list.add(user1);UserModel user2=new UserModel();//用户对象2
        user2.setUserId(2);user2.setUserName("呵呵");user2.setUserSex("女");list.add(user2);//将List转化为JSON
        JSONArray json=JSONArray.fromObject(list);//设置编码
        response.setCharacterEncoding("gbk");//写入到前台
        response.getWriter().write(json.toString());return null;}
复制代码

　　后台部分写完了，现在前台SecondTest.html页面需要接收后台反馈来的数据，这个时候就需要在回调函数中接收Json数据。JS代码如下：

复制代码 
//回调函数
        function callback(){if(xmlHttp.readyState==4){if(xmlHttp.status==200){var xmlDoc=xmlHttp.responseText;var data=eval(xmlDoc);alert(data[0].userId+","+data[0].userName+","+data[0].userSex);alert(data[1].userId+","+data[1].userName+","+data[1].userSex);}else{alert("AJAX服务器返回错误！");}    }}
复制代码

以上就完成了Ajax返回Json在Java中的实现。



http://chatgpt.dhexx.cn/article/3020slwm.shtml

相关文章

Ajax最实用的小例子集合

Ajax最实用的小例子集合

今天我为大家带来了几个非常实用的ajax小例子&#xff0c;都是在工程中经常用到的实用的例子。适合有基础的同学&#xff0c;废话也不多说了&#xff0c;看代码 哦&#xff0c;对了&#xff0c;所有的例子都是用servletjsp实现的 至于三大框架的&#xff0c;我相信&#xff0c;…
阅读更多...
Java 网络编程（大全）

Java 网络编程（大全）

前言必读 读者手册&#xff08;必读&#xff09;_云边的快乐猫的博客-CSDN博客 一、1网络通信的基本模式分为两种 1.CS模式&#xff08;Client---客户端&#xff0c;Server---服务端&#xff09; 客户端是需要程序员去开发的&#xff0c;例如日常使用的各种的APP&#xff0c…
阅读更多...
java游戏编程:三路兵线,BOSS走位,代码和视频

java游戏编程:三路兵线,BOSS走位,代码和视频

一、基本功能&#xff1a; 坦克大战&#xff1a;三路兵线的走&#xff0c;停&#xff0c;走&#xff0c;停。四个版本的飞机大战&#xff1a;多种运动方式。都有代码和视频下载地址。 二、后续改进&#xff1a; 走&#xff0c;停发起攻击&#xff0c;走&#xff0c;停发起攻击…
阅读更多...
Java实现石头剪刀布游戏

Java实现石头剪刀布游戏

思路&#xff1a;采取5局3胜制&#xff1b;用两个变量a、b标记&#xff0c;若&#xff0c;第一局电脑胜&#xff0c;则b加1&#xff0c;反之亦然。其中用到int randomNumber new Random().nextInt(4) 随机生成04的一个数&#xff0c;通过生成的数索引数组中的内容&#xff0c;…
阅读更多...
Java实现猜数游戏

Java实现猜数游戏

1 问题 编写一个Java程序&#xff0c;实现以下功能&#xff1a; 2 方法 首先导入java.util包下的Random&#xff0c;让程序随便分配给用户一个数。 再导入java.util包下的Scanner类&#xff0c;构建Scanner对象&#xff0c;以便输入。 利用Random().nextInt()生成一个随机的i…
阅读更多...
Java小游戏:飞翔的小鸟 【附源码和素材】

Java小游戏:飞翔的小鸟 【附源码和素材】

目录 一、项目分析 二、项目展示 1.开始状态 2.运行状态 3.结束状态 三、实现代码 1.游戏启动类 2.地面类 3.小鸟类 4.柱子类 四、代码资源 一、项目分析 创建一个窗口和画板&#xff0c;把画板放到窗口上&#xff0c;在画板上绘画图片 &#xff08;2&#xff09;让小鸟…
阅读更多...
Java——猜数字游戏

Java——猜数字游戏

目录 &#x1f351;前置知识 &#x1f351;题目要求 &#x1f351;代码实现 &#x1f351;测试 &#x1f351;前置知识 既然是猜数字那么就要生成一个随机数 在Java中要生成一个指定范围之内的随机数字有两种方法&#xff1a;一种是调用 Math 类的 random() 方法&…
阅读更多...
Java简单实现猜拳游戏

Java简单实现猜拳游戏

前言 Random类的简单使用 .nextInt()方法&#xff0c;返回伪随机的&#xff0c;均匀分布 int值介于0&#xff08;含&#xff09;和指定值&#xff08;不包括&#xff09;&#xff0c;从该随机数生成器的序列绘制。 public class Demo_02 {//出拳游戏:1表示石头,2表示剪刀,3表…
阅读更多...
java实现猜拳游戏

java实现猜拳游戏

剪刀、石头、布又称“猜丁壳”&#xff0c;古老而简单&#xff0c;这个游戏的主要目的是为了解决争议&#xff0c;因为三者相互制约&#xff0c;因此不论平局几次&#xff0c;总会有胜负的时候。 游戏规则中&#xff0c;石头克剪刀&#xff0c;剪刀克布&#xff0c;布克石头。…
阅读更多...
Java游戏编程前篇 修改eclipse背景颜色

Java游戏编程前篇 修改eclipse背景颜色

最近准备开始研究java游戏设计了。&#xff08;不是安卓的游戏设计&#xff0c;关于安卓的游戏设计&#xff0c;我打算学完java之后直接学cocos2dx&#xff0c;学习java的原因是因为在公司里接触到了eclipse&#xff0c;所以打算顺便将java也啃下来&#xff0c;以后说不定哪天就…
阅读更多...
java游戏开发入门(一) - HelloWorld

java游戏开发入门(一) - HelloWorld

java游戏开发入门&#xff08;一&#xff09;- HelloWorld 前言开发环境启程 Hello WorldMaven启动类 HelloWorldApp创建一个600 x 600&#xff0c;标题为"Hello world"的窗体main运行效果完整代码 完整项目 前言 开发一款游戏&#xff0c;我相信很多人在学习开发之前…
阅读更多...
JAVA编程实现猜数游戏

JAVA编程实现猜数游戏

1.该程序就是随机生成一个1-100的整数让玩家进行游戏&#xff0c;不限次数&#xff0c;直到玩家猜对为止。 2.使用while循环语句实现功能 3.代码展示 import java.util.Random; import java.util.Scanner;public class S11 {public static void main(String[] args) {Random…
阅读更多...
Java游戏框架编写

Java游戏框架编写

自己抽空编写的一个2D游戏框架(也可以说是工具类集吧)&#xff0c;在此记录一下&#xff0c;开发完了顺便写了一个案例判断框架的可用性 项目地址&#xff1a;https://gitee.com/shaokang123/spring-game-starter 框架特点 支持直接使用Tiled设计地图&#xff0c;以name为beanN…
阅读更多...
Java游戏编程——愤怒的小鸟（一）

Java游戏编程——愤怒的小鸟（一）

Java游戏编程——愤怒的小鸟&#xff08;一&#xff09; 前言&#xff1a;最近在b站up主尚学堂杨老师&#xff08;b站链接&#xff09;学习了我做的第一个游戏项目&#xff0c;所以在csdn进行总结&#xff0c;便于今后查看。 本部分主要是将游戏的背景绘制出来 先上一张效果…
阅读更多...
java游戏开发(java游戏开发教程)

java游戏开发(java游戏开发教程)

Java游戏开发绘图器是什么呢&#xff1f; 众所周知&#xff0c;Java GUI以paint进行绘图&#xff0c;以repaint进行图像刷新&#xff0c;而完成repaint及paint这一连贯过程中所用到绘图组件&#xff0c;我将其称为绘图器。就我个人的体会&#xff0c;绘图器的调用时机应始终处于…
阅读更多...
Java编程实现三种等级的扫雷游戏（完整版）

Java编程实现三种等级的扫雷游戏（完整版）

大家好&#xff0c;我是陈橘又青&#xff0c;今天用Java编程实现图形化界面的扫雷游戏&#xff08;三种难度&#xff09;&#xff0c;以下是完整的开发思路以及代码&#xff0c;供各位讨论交流。 文章目录 一、效果展示初级难度中级难度高级难度测试界面 二、项目介绍项目背景功…
阅读更多...
Java游戏编程初步

Java游戏编程初步

现在流行的游戏似乎都是用C或C来开发的。在java平台上几乎没有很大型及可玩的流行游戏。由于java是个新生语言&#xff0c;他的许多特性还有待大家的发掘,但是我们不能否认Java在游戏编程方面的强大性。本文将带领大家一步一步学习编写Java游戏。最终打造属于自己的Java游戏。 …
阅读更多...
如何用java语言编写小游戏？（一）

如何用java语言编写小游戏？（一）

学习java的过程中&#xff0c;如果想找一些小游戏项目来练手的话&#xff0c;我们需要学习哪些技术先呢&#xff1f;&#xff08;适用于java初学者&#xff09; 第一步&#xff1a;了解GUI编程—Swing基础 GUI&#xff08;Graphical User interface&#xff09;&#xff1a; …
阅读更多...
SQL编程篇

SQL编程篇

SQL编程篇 这是以前的学习总结&#xff1a; 这一周将SQL编程篇仔细地看了一遍&#xff0c;有不少感触&#xff0c;因为SQL Server 中的T-SQL语言&#xff0c;在某种程度上就类似C等编程语言&#xff0c;其中有基本运算、控制语句及函数还有一个叫存储过程的东东。但目前对他们在…
阅读更多...
SQL语言

SQL语言

创建数据库 创建table&#xff0c;create table后可以"库名.表名"或者"库名.用户.表名"&#xff0c;也可以用上面工具选择&#xff0c;如果名字中含有特殊关键字&#xff0c;mysql需要交,sql server需要加[] 创建表 CREATE TABLE Student (S# CHAR ( 8 …
阅读更多...
推荐文章

Copyright @ 2022~2023