模拟jQuery ajax服务器端与客户端通信的代码


Posted in Javascript onMarch 28, 2011

功能如下:

如果用户名为空提示“用户名不能为空 ”   

如果用户名存在提示“用户名[xxxxxx]已经存在,请使用其他用户名, 4 ”          

如果用户名不存在提示“用户名[xxxxxx]尚未存在,可以使用该用户名注册, 5”

运行效果如下: 

模拟jQuery ajax服务器端与客户端通信的代码

模拟jQuery ajax服务器端与客户端通信的代码

模拟jQuery ajax服务器端与客户端通信的代码

模拟jQuery ajax服务器端与客户端通信的代码

             
目录结构:
模拟jQuery ajax服务器端与客户端通信的代码 
服务器端AjaxServer
package com.ljq.test; 
import java.io.IOException; 
import java.io.PrintWriter; 
import java.net.URLDecoder; 
import javax.servlet.ServletException; 
import javax.servlet.http.HttpServlet; 
import javax.servlet.http.HttpServletRequest; 
import javax.servlet.http.HttpServletResponse; 
@SuppressWarnings("serial") 
public class AjaxServer extends HttpServlet { 
@Override 
protected void doGet(HttpServletRequest request, 
HttpServletResponse response) throws ServletException, IOException { 
try { 
//设置页面utf-8编码 
response.setContentType("text/html;charset=utf-8"); 
PrintWriter out = response.getWriter(); 
Integer total = (Integer) request.getSession().getAttribute("total"); 
int temp = 0; 
if (total == null) { 
temp = 1; 
} else { 
temp = total.intValue() + 1; 
} 
request.getSession().setAttribute("total", temp); 
// 1.取参数 
String param = request.getParameter("name"); 
String name = URLDecoder.decode(param, "UTF-8"); 
// 2、检查参数是否有效 
if (param == null || param.length() == 0) { 
out.println("用户名不能为空"); 
} else { 
// 3、校验操作 
if (name.equals("linjiqin")) { 
// 4、返回结果数据 
out.println("用户名[" + name + "]已经存在,请使用其他用户名, " + temp); 
} else { 
out.println("用户名[" + name + "]尚未存在,可以使用该用户名注册, " + temp); 
} 
} 
} catch (Exception e) { 
e.printStackTrace(); 
} 
} 
@Override 
protected void doPost(HttpServletRequest request, 
HttpServletResponse response) throws ServletException, IOException { 
doGet(request, response); 
} 
}

配置web.xml
<?xml version="1.0" encoding="UTF-8"?> 
<web-app version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" 
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee 
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"> 
<servlet> 
<servlet-name>AjaxServer</servlet-name> 
<servlet-class>com.ljq.test.AjaxServer</servlet-class> 
</servlet> 
<servlet-mapping> 
<servlet-name>AjaxServer</servlet-name> 
<url-pattern>/servlet/ajaxServer</url-pattern> 
</servlet-mapping> 
<welcome-file-list> 
<welcome-file>index.jsp</welcome-file> 
</welcome-file-list> 
</web-app>

index.jsp页面
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 
<% 
String path = request.getContextPath(); 
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 
%> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<base href="<%=basePath%>"> 
<title>My JSP 'index.jsp' starting page</title> 
<meta http-equiv="pragma" content="no-cache"> 
<meta http-equiv="cache-control" content="no-cache"> 
<meta http-equiv="expires" content="0"> 
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 
<meta http-equiv="description" content="This is my page"> 
<script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-1.3.1.js"></script> 
<script type="text/javascript" src="<%=request.getContextPath() %>/js/validate.js"></script> 
</head> 
<body> 
<!--html5的标准: 首先标签名要小写,其次标签必须关闭,第三属性名遵循骆驼命名法,第四属性值必须位于双引号中--> 
请输入用户名:<br/> 
<input id="userName"/> 
<input type="button" value=" 校 验 " onclick="verify();"/> 
<div id="result"></div> 
</body> 
</html>

validate.js
function verify() { 
// 解决中文乱码方法一: 页面端发出的数据作一次encodeURI,服务器段使用new String(name.getBytes("iso8859-1"),"UTF-8"); 
// 解决中文乱码方法二: 页面端发出的数据作两次encodeURI,服务器段使用URLDecoder.decode(name,"UTF-8") 
var url = "servlet/ajaxServer?name=" + encodeURI(encodeURI($("#userName").val())); 
//注意url前不要加"/",否则无法访问url 
//var url = "/servlet/ajaxServer?name=" + encodeURI(encodeURI($("#userName").val())); //错误 
url = convertURL(url); 
$.get(url, null, function(data) { 
$("#result").html(data); 
}); 
} 
// 给url地址增加时间戳,骗过浏览器,不读取缓存 
function convertURL(url) { 
// 获取时间戳 
var timstamp = (new Date()).valueOf(); 
// 将时间戳信息拼接到url上 
if (url.indexOf("?") >= 0) { 
url = url + "&t=" + timstamp; 
} else { 
url = url + "?t=" + timstamp; 
} 
return url; 
}
Javascript 相关文章推荐
javascript 三种编解码方式
Feb 01 Javascript
javascript 基础篇2 数据类型,语句,函数
Mar 14 Javascript
Javascript模块化编程(三)require.js的用法及功能介绍
Jan 17 Javascript
基于JQuery实现的Select级联
Jan 27 Javascript
基于jQuery实现的QQ表情插件
Aug 25 Javascript
简介EasyUI datagrid editor combogrid搜索框的实现
Apr 01 Javascript
js style.display=block显示布局错乱问题的解决方法
Sep 21 Javascript
Angular2的管道Pipe的使用方法
Nov 07 Javascript
详解React 在服务端渲染的实现
Nov 16 Javascript
基于百度地图api清除指定覆盖物(Overlay)的方法
Jan 26 Javascript
ejsExcel模板在Vue.js项目中的实际运用
Jan 27 Javascript
如何解决webpack-dev-server代理常切换问题
Jan 09 Javascript
原来Jquery.load的方法可以一直load下去
Mar 28 #Javascript
基于jquery的内容循环滚动小模块(仿新浪微博未登录首页滚动微博显示)
Mar 28 #Javascript
jquery向.ashx文件post中文乱码问题的解决方法
Mar 28 #Javascript
JQuery.ajax传递中文参数的解决方法 推荐
Mar 28 #Javascript
jQuery中调用WebService方法小结
Mar 28 #Javascript
利用jQuery接受和处理xml数据的代码(.net)
Mar 28 #Javascript
jquery.combobox中文api和例子,修复了上面的小bug
Mar 28 #Javascript
You might like
php之字符串变相相减的代码
2007/03/19 PHP
如何使用PHP对网站验证码进行破解
2015/09/17 PHP
PHP实现简单的模板引擎功能示例
2017/09/02 PHP
thinkphp5 模型实例化获得数据对象的教程
2019/10/18 PHP
实例化php类时传参的方法分析
2020/06/05 PHP
jQuery 学习6 操纵元素显示效果的函数
2010/02/07 Javascript
js解析与序列化json数据(三)json的解析探讨
2013/02/01 Javascript
jquery获得同源iframe内body下标签的值的方法
2014/09/25 Javascript
Thinkphp模板没有解析直接原样输出的解决方法
2014/10/31 Javascript
vue 全选与反选的实现方法(无Bug 新手看过来)
2018/02/09 Javascript
socket在egg中的使用实例代码详解
2019/05/30 Javascript
微信小程序中button去除默认的边框实例代码
2019/08/01 Javascript
微信小程序 this.triggerEvent()的具体使用
2019/12/10 Javascript
[06:38]DOTA2怒掀电竞风暴 2013Chinajoy
2013/07/27 DOTA
[05:02]2014DOTA2 TI中国区预选赛精彩TOPPLAY第三弹
2014/06/25 DOTA
Python实现的破解字符串找茬游戏算法示例
2017/09/25 Python
Windows下安装Django框架的方法简明教程
2018/03/28 Python
基于python指定包的安装路径方法
2018/10/27 Python
Django如何实现网站注册用户邮箱验证功能
2019/08/14 Python
如何用python处理excel表格
2020/06/09 Python
Python with语句用法原理详解
2020/07/03 Python
Python+OpenCV检测灯光亮点的实现方法
2020/11/02 Python
python 实现全球IP归属地查询工具
2020/12/18 Python
Sneaker Studio乌克兰:购买运动鞋
2018/03/26 全球购物
Cotton On香港网站:澳洲时装连锁品牌
2018/11/01 全球购物
新西兰网上购物,折扣店:BestDeals.co.nz
2019/03/20 全球购物
Tomcat Mysql datasource数据源配置
2015/12/28 面试题
毕业研究生的自我鉴定
2013/11/30 职场文书
车间主任岗位职责
2014/03/16 职场文书
银行贷款委托书范本
2014/10/11 职场文书
会计求职简历自我评价
2015/03/10 职场文书
销售员岗位职责范本
2015/04/11 职场文书
家庭贫困证明
2015/06/16 职场文书
单位同意报考证明
2015/06/17 职场文书
超级实用!五步法则,教你写好年终工作总结
2019/12/05 职场文书
SONY AN-LP1 短波有源天线放大器
2021/04/22 无线电