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 相关文章推荐
通过ifame指向的页面高度调整iframe的高度
Oct 05 Javascript
几行代码轻松搞定jquery实现flash8类似的连接效果
May 03 Javascript
jQuery EasyUI API 中文文档 - Documentation 文档
Sep 29 Javascript
jQuery实用基础超详细介绍
Apr 11 Javascript
JavaScript模块随意拖动示例代码
May 27 Javascript
jquery插件star-rating.js实现星级评分特效
Apr 15 Javascript
基于JavaScript获取鼠标位置的各种方法
Dec 16 Javascript
js时间戳和c#时间戳互转方法(推荐)
Feb 15 Javascript
jQuery封装animate.css的实例
Jan 04 jQuery
jQuery实现高级检索功能
May 28 jQuery
vue elementui 实现搜索栏公共组件封装的实例代码
Jan 20 Javascript
vue之封装多个组件调用同一接口的案例
Aug 11 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
基于PHP与XML的PDF文档生成技术
2006/10/09 PHP
PHP操作文件类的函数代码(文件和文件夹创建,复制,移动和删除)
2011/11/10 PHP
php多个文件及图片上传实例详解
2014/11/10 PHP
javascript动态加载实现方法一
2012/08/22 Javascript
JS中setInterval、setTimeout不能传递带参数的函数的解决方案
2013/04/28 Javascript
使用jQuery避免鼠标双击的解决方案
2013/08/21 Javascript
Jquery自定义button按钮的几种方法
2014/06/11 Javascript
jQuery寻找n以内完全数的方法
2015/06/24 Javascript
jQuery+ajax实现实用的点赞插件代码
2016/07/06 Javascript
AngularJS 基础ng-class-even指令用法
2016/08/01 Javascript
将form表单通过ajax实现无刷新提交的简单实例
2016/10/12 Javascript
第一次接触神奇的前端框架vue.js
2016/12/01 Javascript
nodejs和php实现图片访问实时处理
2017/01/05 NodeJs
vue日期组件 支持vue1.0和2.0
2017/01/09 Javascript
Webpack中css-loader和less-loader的使用教程
2017/04/27 Javascript
Vue.js中兄弟组件之间互相传值实例
2017/06/01 Javascript
探究react-native 源码的图片缓存问题
2017/08/24 Javascript
Node之简单的前后端交互(实例讲解)
2017/11/14 Javascript
react+ant design实现Table的增、删、改的示例代码
2018/12/27 Javascript
微信小程序bindinput与bindsubmit的区别实例分析
2019/04/17 Javascript
简述vue-cli中chainWebpack的使用方法
2019/07/30 Javascript
微信小程序实现语音识别转文字功能及遇到的坑
2019/08/02 Javascript
[59:36]2018DOTA2亚洲邀请赛 4.3 突围赛 Secret vs VG 第二场
2018/04/04 DOTA
Python批量更改文件名的实现方法
2017/10/29 Python
python实现的MySQL增删改查操作实例小结
2018/12/19 Python
python实现将文件夹内的每张图片批量分割成多张
2019/07/22 Python
pygame实现俄罗斯方块游戏(对战篇1)
2019/10/29 Python
python3实现elasticsearch批量更新数据
2019/12/03 Python
浅谈tensorflow模型保存为pb的各种姿势
2020/05/25 Python
Keras实现DenseNet结构操作
2020/07/06 Python
What is view? why do we have view?
2012/06/22 面试题
财务部经理岗位职责
2014/02/03 职场文书
水毁工程实施方案
2014/04/01 职场文书
爱心捐款倡议书
2014/04/14 职场文书
如何让vue长列表快速加载
2021/03/29 Vue.js
vue实力踩坑之push当前页无效
2022/04/10 Vue.js