模拟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学习网址备忘
May 29 Javascript
jquery 学习之二 属性 文本与值(text,val)
Nov 25 Javascript
js中查找最近的共有祖先元素的实现代码
Dec 30 Javascript
人人网javascript面试题 可以提前实现下
Jan 05 Javascript
调用innerHTML之后onclick失效问题的解决方法
Jan 28 Javascript
javascript操作数组详解
Dec 17 Javascript
JavaScript编写带旋转+线条干扰的验证码脚本实例
May 30 Javascript
PHP实现本地图片上传和验证功能
Feb 27 Javascript
Node爬取大批量文件的方法示例
Jun 28 Javascript
Layui 动态禁止select下拉的例子
Sep 03 Javascript
微信小程序实现注册登录功能(表单校验、错误提示)
Dec 10 Javascript
vue动态加载SVG文件并修改节点数据的操作代码
Aug 17 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 动态添加记录
2009/03/10 PHP
PHP 5.3新特性命名空间规则解析及高级功能
2010/03/11 PHP
PHP XML操作的各种方法解析(比较详细)
2010/06/17 PHP
kohana框架上传文件验证规则写法示例
2014/07/14 PHP
php中explode的负数limit用法分析
2015/02/27 PHP
PHP实现数组转JSon和JSon转数组的方法示例
2018/06/14 PHP
php实现每日签到功能
2018/11/29 PHP
jQuery EasyUI API 中文文档 DateTimeBox日期时间框
2011/10/16 Javascript
javascript学习笔记(十一) 正则表达式介绍
2012/06/20 Javascript
指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)
2014/02/21 Javascript
js比较日期大小的方法
2015/05/12 Javascript
简介JavaScript中setUTCSeconds()方法的使用
2015/06/12 Javascript
基于javascript实现tab切换特效
2016/03/29 Javascript
jQuery实现鼠标经过像翻页和描点链接效果
2016/08/08 Javascript
JavaScript 获取元素在父节点中的下标(推荐)
2017/06/28 Javascript
再谈Angular4 脏值检测(性能优化)
2018/04/23 Javascript
CentOS7中源码编译安装NodeJS的完整步骤
2018/10/13 NodeJs
React如何解决fetch跨域请求时session失效问题
2018/11/02 Javascript
Vue 实现html中根据类型显示内容
2019/10/28 Javascript
基于JavaScript实现十五拼图代码实例
2020/04/26 Javascript
js实现微信聊天效果
2020/08/09 Javascript
[01:05:40]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第三场
2014/05/24 DOTA
Python 变量类型及命名规则介绍
2013/06/08 Python
Python基础教程之利用期物处理并发
2018/03/29 Python
Python利用splinter实现浏览器自动化操作方法
2018/05/11 Python
python 解压pkl文件的方法
2018/10/25 Python
Python 串口读写的实现方法
2019/06/12 Python
简单了解Python字典copy与赋值的区别
2020/09/16 Python
Python远程linux执行命令实现
2020/11/11 Python
科颜氏加拿大官方网站: Kiehl’s加拿大
2016/08/16 全球购物
团组织关系介绍信
2014/01/12 职场文书
企业员工培训感言
2014/02/26 职场文书
群众路线批评与自我批评发言稿
2014/10/16 职场文书
消夏晚会主持词
2015/06/30 职场文书
大学运动会加油稿
2015/07/22 职场文书
浅谈Python数学建模之线性规划
2021/06/23 Python