- 浏览: 48927 次
- 性别:
- 来自: 广州
最新评论
-
hsluoyz:
现在新推出了一个权限框架,叫jCasbin(https://g ...
扩展RBAC用户角色权限设计方案 -
江川河:
rongxh,您好RBAC模型里面,User-Role-Per ...
扩展RBAC用户角色权限设计方案 -
di1984HIT:
写的很好啊~
扩展RBAC用户角色权限设计方案 -
liyonghui160com:
ming_02 写道ming_02 写道ming_02 写道m ...
扩展RBAC用户角色权限设计方案 -
ming_02:
ming_02 写道ming_02 写道ming_02 写道x ...
扩展RBAC用户角色权限设计方案
现在JavaWeb领域,MVC框架越来越多,比较出名的有Struts、Struts2、SpringMVC、WebWork等。而Ajax,作为一种与特定的动态Web编程语言(如Java、C#、PHP)无关的技术,也已经被引入到了Java MVC框架的各家各户。而这些MVC框架,归根到底,都是对Servlet技术的封装。同时,支持Ajax的JavaScript框架(or类库)也越来越多,出名的如Jquery、Ext、Prototype、DWR等,而它们实现异步传输功能还是离不开JavaScript中的XMLHttpRequest这个对象。好,转入正题吧。
Ajax通过XMLHttpRequest对象实现异步传输,那我们首先要获取这个对象。由于浏览器的差异,为了兼容各种常用的浏览器,先写一个初始化XMLHttpRequest对象的方法,代码如下:
对上面的代码,在这里解析一下:XMLHttpRequest对象的请求状态(readyState)有0、1、2、3、4,其中,0表示未初始化,1表示open方法成功调用,2表示服务器应答客户端请求,3表示交互中,HTTP头信息已经收到,但响应数据还没有接收,4表示数据接收完成。我们通过“xmlHttp.onreadystatechange = callback;” 来设置如果XMLHttpRequest对象的请求状态发生改变了,则会执行回调函数callback。我们可以看到,在callback方法体中,我们只关心readyState==4(交互完成)的情况,再获取从服务器端返回的状态码status,常见的状态码有:200表示交互成功,404表示页面没找到,500表示服务器处理错误等。接着,通过XMLHttpRequest的responseText属性得到从服务器端返回的文本数据,或者通过responseXML属性获得XML格式的数据。 在上面的代码中,doGet方法和doPost方法都有参数”data”,它由XMLHttpRequest负责从客户端传送到服务器端,对于Get方法,附在URL尾部,例如:member.jsp?name=xxx&sex=male。对于Post方式,可调用XMLHttpRequest的send方法发送。data的数据形式比较灵活,可以是普通的参数格式、XML格式,JSON格式或者是其他格式,只要你能发送过去,服务器端就有办法将你解析出来。在这里,我们降低难度,就用最简单的参数格式,即 key1=value1 & key2=value2 & key3=value3 & …… 我们都知道,HTTP协议的Get方式传输数据,是通过把这些key-value串附到URL后面的,也就是我们只要点表单的提交按钮,就可以看到地址栏后面会多了一串key-value,代表表单里各输入框的名和值。然后,我们要做异步发送数据,就不能用表单的自动提交了,也就是说,得自己一个一个获取到各输入框的数据,然后再一个一个拼成上面的key-value串再发送。有没有一种简单的办法来组织这些数据呢?大家看到key-value是否会想到Java中的什么类?请看下面代码,我用JavaScript写了一个Map类(JavaScript中的“function”可以看作是方法,也可以看作是面向对象的“类”),就是类似于Java中我们常用的Map接口。/**
* Get方式向服务器端异步发送数据
* @param url 服务器端的路径,数据发送的目的地
* @param data 发送的数据,格式如: "key1=value1&key2=value2"
* @param callback 回调函数,
*/
function doGet(url, data, callback) {
var url = url;
if(url.indexOf("?") == -1) {
url = url + "?" + data;
} else {
url = url + "&" + data;
}
initXmlHttp();
xmlHttp.onreadystatechange = callback; //注册回调函数
xmlHttp.open("GET", url, true); //设置连接信息
xmlHttp.send(null);
}
/**
* Post方式向服务器端异步发送数据
* @param url 服务器端的路径,数据发送的目的地
* @param data 发送的数据,格式如: "key1=value1&key2=value2"
* @param callback 回调函数
* @return
*/
function doPost(url, data, callback) {
initXmlHttp(); //初始化
xmlHttp.onreadystatechange = callback; //注册回调函数
xmlHttp.open("POST", url, true);
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlHttp.send(data);
}
/**
* 默认回调函数
* 只在测试时使用,在doGet和doPost函数中的第三个参数callback,可由用户自定义回调函数,
* 若不设定,则调用默认的回调函数
*/
function callback() {
//判断对象的状态是否交互完成
if(xmlHttp.readyState == 4) {
//判断http的交互是否成功
if(xmlHttp.status == 200) {
//获取服务器返回的纯文本数据
var responseText = xmlHttp.responseText;
//获取服务器返回的XML格式数据
//var responseXml = xmlHttp.responseXML;
//Alert从服务器端返回的信息
window.alert(responseText);
}
}
}
/** * Map类 * 实现了类似于Java语言中的Map接口的常用方法 */ function Map(){ //key集 this.keys = new Array(); //value集 this.values = new Array(); //添加key-value进Map this.put = function(key, value){ if(key == null || key == undefined) return; var length = this.size(); for(var i = 0 ; i < length ; i ++ ) { //如果keys数组中有相同的记录,则不覆盖原记录的值 if(this.keys[i] == key) this.values[i] = value; } this.keys.push(key); this.values.push(value); }; //获取指定key的value this.get = function(key){ var length = this.size(); for(var i = 0 ; i < length ; i ++ ) { if(this.keys[i] == key) { return this.values[i]; } else { continue; } return null; } }; //移除指定key所对应的map this.remove = function(key) { var length = this.size(); for(var i = 0 ; i < length ; i ++ ) { if(this.keys[i] == key) { while(i < length - 1) { this.keys[i] = this.keys[i+1]; this.values[i] = this.values[i+1]; i ++ ; } //处理最后一个元素 this.keys.pop(); this.values.pop(); break; } } }; //是否包含指定的key this.containsKey = function(key) { var length = this.size(); for(var i = 0 ; i < length ; i ++ ) { if(this.keys[i] == key) { return true; } } return false; }; //是否包含指定的value this.containsValue = function(value) { var length = this.size(); for(var i = 0 ; i < length ; i ++ ) { if(this.values[i] == value) { return true; } } return false; }; //包含记录总数 this.size = function() { return this.keys.length; }; //是否为空 this.isEmpty = function() { return this.size() == 0 ? true : false; }; //清空Map this.clear = function() { this.keys = new Array(); this.values = new Array(); }; //将map转成字符串,格式:key1=value1,key2=value2 this.toString = function() { var length = this.size(); var str = ""; for(var i = 0 ; i < length ; i ++ ) { str = str + this.keys[i] + "=" + this.values[i]; if(i != length-1) str += ","; } return str; }; }
代码比较长,有些方法在本例中可能用不到,但也写出来了,或者在其他地方可能有用吧。当我们使用这个Map类来存储HTTP的参数时,发觉有几个不妥的地方:一是put方法,在Java的Map接口中,是不允许有重复的key存在的,而在JavaScript中作为传输参数的载体时,很多时候会出现多个同名的key的,例如处理表单的checkbox时,同一个name的有几个checkbox,构成一个复选框组,组织参数时就形如“key=value1&key=value2”,故put方法必须改。也是由于这个原因,get方法和remove方法也要改。二是toString方法,key=value对,不是用“,”号隔开的,而是用“&”号,故toString方法也须改。而有时候想想,如果把Map类改了,如果其他地方要用到的话,是不是还是改回来,与其改来改去的,不如继承它,重写put 、get、remove和toString方法。好主意,代码如下:
/** * ParamMap类,用于存储HTTP请求中的Get方法或者Post方法所传递的参数 * 继承于Map类,但改写一些方法,以适合HTTP请求中的参数格式 * 与Map不同之处有:ParamMap允许多个同名的"key"存在, * toString方法返回的"key=value"对以"&"号连接,而不是","号,等等。 */ function ParamMap() { //继承Map类 Map.call(this); //重写put方法,允许多个同名key存在 this.put = function(key, value){ if(key == null || key == undefined) return; this.keys.push(key); this.values.push(value); }; //重写get方法,返回values数组 this.get = function(key) { var results = new Array(); var length = this.size(); for(var i = 0 ; i < length ; i ++ ) { if(this.keys[i] == key) results.push(this.values[i]); } return results; }; //重写remove方法 this.remove = function(key) { var length = this.size(); for(var i = 0 ; i < length ; i ++ ) { if(this.keys[i] == key) { while(i < length - 1) { this.keys[i] = this.keys[i+1]; this.values[i] = this.values[i+1]; i ++ ; } //处理最后一个元素 this.keys.pop(); this.values.pop(); } } }; //重写toString方法, 转成XMLHttpRequest.send(ajaxString)方法的参数格式的字符串, //形如:key1=value1&key2=value2 this.toString = function() { var length = this.size(); var str = ""; for(var i = 0 ; i < length ; i ++ ) { str = str + this.keys[i] + "=" + this.values[i]; if(i != length-1) str += "&"; } return str; }; }
怎么使用这个ParamMap类呢,且看下面的示例代码:
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
var sex = document.getElementById("sex").value;
var map = new ParamMap();
map.put("username", username);
map.put("password", password);
map.put("sex", sex);
doGet("test/register", map.toString(), callback);
doPost("test/register", map.toString(), callback);
在JavaScript中,用来获取HTML结点的方法,常用的有如下方法:
Node document.getElementById("username") //根据标签的id NodeList document.getElementsByName(“username”) //根据标签的name NodeList document.getElementsByTagName("input") //根据标签的标签名
我们注意到在除了getElementById是返回Node对象外,其他两个方法都是返回NodeList对象,相当于Node数组。在Ajax应用中,根据ID来获取节点,很多时候十分方便,如获取text、password、hidden、textarea类型的值,但有时候并不那么方便,如处理checkbox、radio(不允许多个同名的id)。况且有许多情况下,开发者是由“非Ajax”转成Ajax应用的。在还没有引进Ajax的时候,表单传值都是根据输入域的name的值来区分的,不管是Get方式还是Post方式,在服务器端(这里指Java Servlet)获取数据的代码如下:
所谓的“单值表单域”就是上面提到过的type为text、password、hidden的input或者textarea等,而“多值表单域”是指checkbox。其实,也不尽然,如单值表单域有时候也可以是多值表单域,如我们注册时有时会要求填多个邮箱,这个<input type=”text” name=”email”>就可以重复多行用同一个name,它在Servlet端获取值方式跟checkbox一样处理。 鉴于各种原因,我们在JavaScript获取HTML Form表单域方法,决定采用getElementsByName方法,这样,我们是不是每取一个表单元素,就得将NodeList类型的返回结果遍历一遍,获取Node,再从Node获取值呢?既然选择了这样做,当然少不了这样的工作,不过,我们可以写一个可重用的方法,让它处理一下NodeList对象。且看代码:
上面代码将NodeList转成了值数组,而且让使用者忽略表单域类型的差异,专心于值的获取和使用。美中不足的是,上面的方法返回的是数组,我们还是一个一个遍历再拼成key=value字符串。接下来的方法不但解决了这一点,而且还大大简化我们的表单取值,且看: String HttpServletRequest.getParameter("keyName"); //用于单值表单域
String[] HttpServletRequest.getParameterValues("keyName"); //用于多值表单域
/**
* 获取nodeList的值集
* @param nodeList Node数组,可通过getElementsByName或者getElementsByTagName等方法获得
* @return 值数组
*/
function nodeList2ValuesArray(nodeList) {
//结果值数组,形如:['aaa','bbb','ccc']
var values = new Array();
var length = nodeList.length;
var nodeName = nodeList.item(0).nodeName;
//对"<input type='xxx'/>"的处理
if(nodeName == "INPUT") {
var type = nodeList.item(0).getAttribute("type");
if(type == "text" || type == "password" || type == "hidden") {
for(var i = 0 ; i < length ; i ++ ) {
values.push(nodeList.item(i).value);
}
}
else if(type == "checkbox" || type == "radio") {
for(var i = 0 ; i < length ; i ++ ) {
var node = nodeList.item(i);
if(node.checked) {
values.push(node.value);
}
}
}
}
//对"<textarea>xxx</textarea>"的处理
else if(nodeName == "TEXTAREA") {
for(var i = 0 ; i < length ; i ++ ) {
values.push(nodeList.item(i).value);
}
}
//对"<select></select>"的处理
else if (nodeName == "SELECT") {
var subNodeList = nodeList.item(0).getElementsByTagName("option");
return nodeList2ValuesArray(subNodeList);
}
//对<select>的子元素"<option>xxx<option>"的处理
else if (nodeName == "OPTION") {
for(var i = 0 ; i < length ; i ++ ) {
var node = nodeList.item(i);
if(node.selected){
values.push(node.value);
}
}
}
return values;
}
/**
* 解析表单的数据,转成ParamMap的形式
* @param 任意个参数,代表表单子元素的name值
* @return ParamMap结果集
*/
function parseForm2ParamMap() {
var map = new ParamMap();
//参数的长度,注意:方法定义的括号中虽然没有定义参数,但却可以设任意多个参数
var length = arguments.length;
for(var i = 0 ; i < length ; i ++ ) {
var nodeList = document.getElementsByName(arguments[i]);
var values = nodeList2ValuesArray(nodeList);
for(var j = 0 ; j < values.length ; j ++ ) {
map.put(arguments[i], values[j]);
}
}
return map;
}
这个方法返回值的类型是ParamMap,也就是我们刚才定义的用来传递参数的类,这个类中有一个toString的方法,不就是返回“key1=value1&key2=value2”形式的字符串吗?
OK,下面的测试例子,将涉及到表单的各种元素域,其中引进了ajax.js文件,其内容即是我们上面所写的JS函数和类,在附件中可下载到,在此就不重复贴出来了。且看HTML代码:
<?xml version="1.0" encoding="UTF-8" ?> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>测试Ajax与Servlet之间的数据传递</title> <script type="text/javascript" src="js/ajax.js"></script> <script type="text/javascript"> window.onload = function(){ var submit = document.getElementById("submit"); submit.onclick = function(){ var map = parseForm2ParamMap("username", "email", "password", "userid", "sex", "framework", "salary", "dream"); //doPost("input", map.toString(), callback); //默认Alert出信息 doPost("input", map.toString(), function(){ if(xmlHttp.readyState == 4) { if(xmlHttp.status == 200) { var returnMsg = document.getElementById("returnMsg"); returnMsg.innerHTML = xmlHttp.responseText; } } }); }; }; </script> </head> <body> <h2>测试Ajax与Servlet之间的数据传递<br />(Step1:从Client->Server)</h2> <div id="returnMsg" style="color:red;"></div> <form> <!-- 文本域 --> <p>你的姓名: <input type="text" name="username" /><br /> </p> <p>你的电子邮件(可填两个):<br /> 邮件地址1:<input type="text" name="email" /> <br /> 邮件地址2:<input type="text" name="email" /> </p> <!-- 密码域 --> <p>你的密码: <input type="password" name="password" /><br /> </p> <!-- 隐藏域 --> <input type="hidden" name="userid" value="108" /><br /> <!-- 单选框 --> <p>你的性别 : <label><input type="radio" name="sex" value="male" />男</label> <label><input type="radio" name="sex" value="female" />女</label> </p> <!-- 复选框 --> <p>你掌握的开源框架 :<br /> <label><input type="checkbox" name="framework" value="struts" />Struts</label> <label><input type="checkbox" name="framework" value="spring" />Spring</label> <label><input type="checkbox" name="framework" value="hibernate" />Hibernate</label> <label><input type="checkbox" name="framework" value="ibatis" />iBatis</label> <label><input type="checkbox" name="framework" value="webwork" />WebWork</label> </p> <!-- 下拉列表 --> <p>你的薪水范围 : <select name="salary"> <option value="2000以下">2000以下</option> <option value="2000——3000">2000——3000</option> <option value="3000——4000">3000——4000</option> <option value="4000——5000">4000——5000</option> <option value="5000以上">5000以上</option> </select> </p> <!-- 文本域 --> <p>你的职业梦想: <br /> <textarea rows="5" cols="36" name="dream"></textarea><br /> </p> <input type="button" id="submit" value="submit" /> </form> </body> </html>
服务器端的代码如下:
package simple.rongxh.servlet; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; /** * RongXinHua心梦帆影 * site1: http://rongxh2010.iteye.com * site2: http://www.blogjava.net/rongxh7 * @author rongxinhua * */ public class Input extends HttpServlet { private static final long serialVersionUID = 1L; private void process(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //获取数据 request.setCharacterEncoding("UTF-8"); String username = request.getParameter("username"); String[] emails = request.getParameterValues("email"); String password = request.getParameter("password"); String userid = request.getParameter("userid"); String sex = request.getParameter("sex"); String[] framework = request.getParameterValues("framework"); String salary = request.getParameter("salary"); String dream = request.getParameter("dream"); //响应给客户端 response.setContentType("text/html;charset=UTF-8"); PrintWriter out = response.getWriter(); out.append("恭喜你,保存成功,你的基本信息如下:<br/>"); out.append("姓名:" + username + "<br/>"); for(int i = 0 ; i < emails.length ; i ++ ) { out.append("邮箱" + (i+1) + ":" + emails[i] + "<br/>"); } out.append("密码:" + password + "<br/>"); out.append("编号:" + userid + "<br/>"); out.append("性别:" + sex + "<br/>"); out.append("框架:"); for(int i = 0 ; framework != null && i < framework.length ; i ++ ){ out.append(framework[i] + " "); } out.append("<br/>"); out.append("薪水:" + salary + "<br/>"); out.append("梦想:" + dream + "<br/>"); out.println(); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { process(request, response); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { process(request, response); } }
运行结果截图如下:
当Java遇上Ajax,本文只是第一篇,欢迎提出宝贵的意见和建议,我将十分感谢!
本测试例子eclipse项目源码下载(附件中):rongxh2010_ajaxservlet。
评论
照楼上所说的jq,ext该是什么框架呢
请问JS库只要用到了ajax,哪怕ajax只占一点点,那么都算ajax框架吗????
jq,ext当然不是ajax框架,多学学在回复吧,别误导了初学者!!
照楼上所说的jq,ext该是什么框架呢
jq ext是JavaScript框架框架,ajax其中一部分而已。不能说是jq ext 就是ajax框架。
$.post(url,params,function(data){
alert(data);
});
//如果keys数组中有相同的记录,则不保存重复记录
if(this.keys[i] == key)
return;
map不是这样的吧....
为什么不是这样?map中是根据key取value的,如果有多个同样的key,就不知道该取哪个value了.
它简化写法,方便处理跨浏览器的HTML documents、events、实现动画效果等功能.
确实有这种说法,它们也确实都封装了ajax的操作。知道它们能用来干吗就行了。
for(var i = 0 ; i < activeXName.length ; i ++ ) {
测试Ajax与Servlet之间的数据传递(rongxh2010)在线效果可看
http://www.sh2999.com/sh/ajax/testAjaxSubmit.jsp
照楼上所说的jq,ext该是什么框架呢
准确点说:jQuery、Mootools、ext等是 JS 框架
//如果keys数组中有相同的记录,则不保存重复记录
if(this.keys[i] == key)
return;
map不是这样的吧....
jq,ext 不是ajax框架??????????,摆脱多学学在发帖吧,别误导了初学者!!
照楼上所说的jq,ext该是什么框架呢
var map = new ParamMap(); map.put("username", username); map.put("password", password); map.put("sex", sex); doGet("test/register", map.toString(), callback); doPost("test/register", map.toString(), callback);
直接用json不是更好?
相关推荐
探讨Ajax获取表单值向Servlet传递的设计方案 在 JavaWeb 领域,MVC 框架越来越多,比较出名的有 Struts、Struts2、SpringMVC、WebWork 等,而 Ajax 作为一种与特定的动态 Web 编程语言(如 Java、C#、PHP)无关的...
总结,Ajax获取表单值并向Servlet传递的设计方案涉及以下几个关键步骤: 1. 初始化XMLHttpRequest对象。 2. 遍历表单获取数据。 3. 使用GET或POST方法发送Ajax请求。 4. 在Servlet端处理请求并返回响应。 5. 注册回...
本篇文章将深入探讨AJAX异步文件上传以及如何使用Servlet进行处理。 ### 1. AJAX异步文件上传原理 在HTML5之前,由于浏览器安全限制,AJAX无法直接处理文件,但HTML5引入了`FormData`对象,使得AJAX能够处理文件...
本项目是针对初学者设计的,主要涉及的知识点是利用Ajax技术与Servlet进行交互,从而实现HTML页面动态获取后台数据。我们将详细探讨这些关键概念和技术。 首先,Ajax(Asynchronous JavaScript and XML)是一种在不...
在本文中,我们将深入探讨Ajax(异步JavaScript和XML)与Java Servlet之间的数据传输机制,这是Web开发中的重要组成部分。Ajax技术允许Web应用程序在不刷新整个页面的情况下与服务器进行交互,提高了用户体验。而...
在本文中,我们将深入探讨如何使用AJAX技术实时获取Servlet中的数据,并将其显示在Web页面上。这个示例展示了AJAX(异步JavaScript和XML)的强大功能,它允许我们在不刷新整个网页的情况下与服务器进行通信,提升...
// 获取表单数据 $.ajax({ url: 'submitForm', // 后端接口URL type: 'POST', data: formData, dataType: 'json', success: function(response) { console.log('提交成功:', response); // 处理成功后的...
在这个实例中,我们将深入探讨如何使用Ajax与Servlet结合,以实现更高效、更流畅的用户界面。 ### 1. 创建Ajax请求 在Ajax中,我们通常使用JavaScript的XMLHttpRequest对象或其现代版本——fetch API来发送请求。...
总结来说,"简单的AJAX示例(JSP+servlet)"是一个演示了如何利用AJAX、JSP和Servlet来实现异步用户名验证的应用。它涉及到前端的交互设计、后端的数据处理以及web服务器的配置,是一个典型的前后端分离的开发模式实例...
本话题主要关注如何使用Ajax将前端的数据传递给后台的Servlet进行处理,并在处理完成后将结果返回到前端进行显示。 ### 1. Ajax基本原理 Ajax的核心是JavaScript对象XMLHttpRequest,它允许JavaScript在后台与...
ajax+servletajax+servletajax+servletajax+servletajax+servletajax+servletajax+servletajax+servletajax+servletajax+servlet
本篇我们将深入探讨如何在JSP、Servlet和AJAX的环境中应用DAO设计模式。 **1. JSP (JavaServer Pages)** JSP是Java的一种视图技术,用于生成动态网页。在JSP中,我们可以直接编写HTML,同时插入Java代码来处理业务...
### AJAX与Servlet交互详解 #### 一、引言 在Web开发中,AJAX(Asynchronous JavaScript and XML)技术被广泛应用于实现网页的部分更新而无需重新加载整个页面,从而提升了用户体验。本文将通过一个具体的例子来...
本篇文章将深入探讨如何使用Ajax来处理Servlet返回的JSON值。 首先,理解Ajax的工作原理至关重要。Ajax的核心是XMLHttpRequest对象,它允许JavaScript在后台与服务器进行异步通信。当用户触发一个Ajax请求时,...
本文将深入探讨Ajax如何与JSP(JavaServer Pages)和Servlet结合,实现动态加载数据。 首先,我们需要了解JSP和Servlet的基础概念。JSP是一种服务器端的技术,用于生成动态网页。开发者可以在JSP文件中混合HTML、...
在这个"Ajax+servlet实现搜索框智能提示"的主题中,我们将探讨如何利用Ajax技术和Servlet来创建一个实时、动态的搜索框,提供智能的用户输入建议。 首先,让我们了解Ajax的基本原理。Ajax的核心是XMLHttpRequest...
Servlet 处理 AJAX中传递的JSON格式参数,JSON中含有JSONArray!在网上搜索资源时发现没有相关内容,所以自己写了一下跟大家一起分享!如有雷同,纯属巧合!第一次传资源,有不好的地方希望大家提出建议!
在本示例中,我们将探讨Servlet如何与Ajax进行数据交互,从而实现无刷新页面更新。 首先,让我们了解一下Servlet的工作原理。当用户通过浏览器发送一个HTTP请求到服务器时,Servlet容器(如Tomcat)会捕获这个请求...