jquery中ajax学习笔记4


Posted in Javascript onOctober 16, 2011

缓存问题:
何谓缓存问题?即当浏览器的输入内容相同,即请求的URL相同,这样浏览器就会去读缓存,两次的内容一样,就不会和服务器端进行交互。
解决方式:在请求的url中加上时间戳。
通过我的测试,IE、360两次用户名输入一致时不会和服务器端交互,firefox即使两次用户名输入的一样,仍然会和服务器端交互。
即:firefox的中服务器端返回的temp值会每次加1,IE、360就不会改变。故加上时间戳在这三种浏览器中都不会再有缓存问题。
修改的代码:
AJAXServer.java
缓存问题

//缓存问题加的测试代码 输入内容不变IE、360次数不增加,firefox会增加 
Integer inte= (Integer) request.getSession().getAttribute("total"); 
int temp=0; 
if(inte==null){ 
temp=1; 
}else{ 
temp=inte.intValue()+1; 
} 
request.getSession().setAttribute("total",temp);

在AJAXServer.java 加入以上代码,同时out.println的时候把temp变量加进去返回给客户端。
这样,如果客户端的temp值加入,就表示客户端和服务器端进行了交互,否则就没有。
verify.js
<!--缓存问题,用时间戳来解决--> 
//给url地址增加时间戳,骗过浏览器,不读取缓存 
function convertURL(url){ 
//获取时间戳 
var timestamp=(new Date().valueOf()); 
//将时间戳信息拼接到url上 
//url=“AJAXServer” 
if(url.indexOf("?")>=0){ 
url=url+"&t="+timestamp; 
}else{ 
url=url+"?t="+timestamp; 
} 
return url; 
} 
function verifyCache(){ 
var url="AJAXServer?name="+$("#username").val(); 
url=convertURL(url); //缓存 
$.get(url,null,function(data){ 
$("#result").html(data); 
}); 
}

由于只是问了验证和介绍缓存问题,为了便于说明问题,故采用的校验方式是jquery封装ajax接收服务器端文本数据。
》》》同样,别忘记了修改ajax.html中调用的方法,名称改为上述脚本中的verifyCache()
中文问题:
有两种解决方式:
第一种:页面端使用一次encodeURI,服务器端用String name=new String(old.getBytes("iso8859-1"),"UTF-8");
中文1
function verifychinese1{ 
var url="AJAXServer?name="+encodeURI($("#username").val()); 
url=convertURL(url); //缓存 
$.get(url,null,function(data){ 
$("#result").html(data); 
}); 
》》》在verify.js中加入上述方法,同时把 
String name=new String(old.getBytes("iso8859-1"),"UTF-8");

加入到AJAXServer.java类中的适当的位置。比如放在PrintWriter这句代码后面就可以。
同样,用第一种方式时,别忘记了修改ajax.html中调用的方法,名称改为上述脚本中的verifychinese1()
第二种:页面端使用两次encodeURI,服务器端用String name= URLDecoder.decode(old,"UTF-8");
中文2
function verifychinese2(){ 
var url="AJAXServer?name="+encodeURI(encodeURI($("#username").val())); 
url=convertURL(url); //缓存 
$.get(url,null,function(data){ 
$("#result").html(data); 
}); 
} 
》》》在verify.js中加入上述方法,同时把 
String name= URLDecoder.decode(old,"UTF-8");

加入到AJAXServer.java类中的适当的位置。比如放在PrintWriter这句代码后面就可以。
同样,用第二种方式时,别忘记了修改ajax.html中调用的方法,名称改为上述脚本中的verifychinese2()
需要源码的可以留言。
通过几天的学习,ajax的动态的验证基本有所了解,后续会根据情况增加相应的内容。
Javascript 相关文章推荐
浅谈Javascript中Object与Function对象
Sep 26 Javascript
JavaScript编写页面半透明遮罩效果的简单示例
May 09 Javascript
深入理解Vue 的条件渲染和列表渲染
Sep 01 Javascript
JS写谷歌浏览器chrome的外挂实例
Jan 11 Javascript
解决vue-cli项目打包出现空白页和路径错误的问题
Sep 04 Javascript
Spring boot 和Vue开发中CORS跨域问题解决
Sep 05 Javascript
微信实现自动跳转到用其他浏览器打开指定APP下载
Feb 15 Javascript
Vue2.0 实现页面缓存和不缓存的方式
Nov 12 Javascript
vue父子组件间引用之$parent、$children
May 20 Javascript
JS如何判断对象是否包含某个属性
Aug 29 Javascript
JS addEventListener()和attachEvent()方法实现注册事件
Jan 11 Javascript
小程序实现筛子抽奖
May 26 Javascript
jquery中ajax学习笔记3
Oct 16 #Javascript
jquery ajax学习笔记2 使用XMLHttpRequest对象的responseXML
Oct 16 #Javascript
jquery中ajax学习笔记一
Oct 16 #Javascript
jQuery EasyUI API 中文文档 DateTimeBox日期时间框
Oct 16 #Javascript
自己动手制作jquery插件之自动添加删除行功能介绍
Oct 14 #Javascript
javascript nextSibling 与 getNextElement(node) 使用介绍
Oct 13 #Javascript
获取body标签的两种方法
Oct 13 #Javascript
You might like
域名查询代码公布
2006/10/09 PHP
PHPLog php 程序调试追踪工具
2009/09/09 PHP
laravel model 两表联查示例
2019/10/24 PHP
JS实现浏览器菜单命令
2006/09/05 Javascript
javascript 写类方式之二
2009/07/05 Javascript
js 未结束的字符串常量错误解决方法
2010/06/13 Javascript
JavaScript与Image加载事件(onload)、加载状态(complete)
2011/02/14 Javascript
treepanel动态加载数据实现代码
2012/12/15 Javascript
js 通过cookie实现刷新不变化树形菜单
2014/10/30 Javascript
手机开发必备技巧:javascript及CSS功能代码分享
2015/05/25 Javascript
通过示例彻底搞懂js闭包
2017/08/10 Javascript
详解vuex的简单使用
2018/03/12 Javascript
在layui中使用form表单监听ajax异步验证注册的实例
2019/09/03 Javascript
JavaScript运行机制实例分析
2020/04/11 Javascript
Vue项目vscode 安装eslint插件的方法(代码自动修复)
2020/04/15 Javascript
基于Echarts图表在div动态切换时不显示的解决方式
2020/07/20 Javascript
轻松掌握python设计模式之访问者模式
2016/11/18 Python
Python 找到列表中满足某些条件的元素方法
2018/06/26 Python
在Python中实现shuffle给列表洗牌
2018/11/08 Python
python基础知识(一)变量与简单数据类型详解
2019/04/17 Python
Python 实现网课实时监控自动签到、打卡功能
2020/03/12 Python
django实现日志按日期分割
2020/05/21 Python
html5视频媒体标签video的使用方法及完整参数说明详解
2019/09/27 HTML / CSS
世界上最大的二手相机店:KEN
2017/05/17 全球购物
Famous Footwear加拿大:美国多品牌运动休闲鞋店
2018/12/05 全球购物
澳大利亚设计师服装在线:MISHA
2019/10/07 全球购物
亚洲颇具影响力的男性在线购物零售商:His
2019/11/24 全球购物
您熟悉ORM(Object-Relation Mapping)吗?请谈谈您所理解的ORM
2016/02/08 面试题
保荐人的岗位职责
2013/11/19 职场文书
宪法宣传周工作方案
2014/05/26 职场文书
抵押贷款承诺书
2014/05/30 职场文书
党的群众路线教育实践活动对照检查材料思想汇报(党员篇)
2014/09/25 职场文书
导游词之安徽九华山
2019/09/18 职场文书
MySQL中的布尔值,怎么存储false或true
2021/06/04 MySQL
python实现A*寻路算法
2021/06/13 Python
JavaScript中的宏任务和微任务详情
2021/11/27 Javascript