jQuery中ajax的使用与缓存问题的解决方法


Posted in Javascript onDecember 19, 2013

1:GET访问 浏览器 认为 是等幂的
就是 一个相同的URL 只有一个结果[相同是指 整个URL字符串完全匹配]
所以 第二次访问的时候 如果 URL字符串没变化 浏览器是 直接拿出了第一次访问的结果

POST则 认为是一个 变动性 访问 (浏览器 认为 POST的提交 必定是 有改变的)

防止 GET 的 等幂 访问 就在URL后面加上 ?+new Date();,[总之就是使每次访问的URL字符串不一样的]

设计WEB页面的时候 也应该遵守这个原则

2:一.谈Ajax的Get和Post的区别

Get方式:
用get方式可传送简单数据,但大小一般限制在1KB下,数据追加到url中发送(http的header传送),也就是说,浏览器将各个表单字段元素及其数据按照URL参数的格式附加在请求行中的资源路径后面。另外最重要的一点是,它会被客户端的浏览器缓存起来,那么,别人就可以从浏览器的历史记录中,读取到此客户的数据,比如帐号和密码等。因此,在某些情况下,get方法会带来严重的安全性问题。

Post方式:
当使用POST方式时,浏览器把各表单字段元素及其数据作为HTTP消息的实体内容发送给Web服务器,而不是作为URL地址的参数进行传递,使用POST方式传递的数据量要比使用GET方式传送的数据量大的多。

总之,GET方式传送数据量小,处理效率高,安全性低,会被缓存,而POST反之。

使用get方式需要注意:
1 对于get请求(或凡涉及到url传递参数的),被传递的参数都要先经encodeURIComponent方法处理.例:var url = "update.php?username=" +encodeURIComponent(username) + "&content=" +encodeURIComponent

(content)+"&id=1" ;

使用Post方式需注意:
1.设置header的Context-Type为application/x-www-form-urlencode确保服务器知道实体中有参数变量. 通常使用XmlHttpRequest对象的SetRequestHeader("Context-Type","application/x-www- form-urlencoded;")。例:

xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
2.参数是名/值一一对应的键值对,每对值用&号隔开.如 var name=abc&sex=man&age=18,注意var name=update.php?

abc&sex=man&age=18以及var name=?abc&sex=man&age=18的写法都是错误的;
3.参数在Send(参数)方法中发送,例: xmlHttp.send(name); 如果是get方式,直接 xmlHttp.send(null);

4.服务器端请求参数区分Get与Post。如果是get方式则$username = $_GET["username"]; 如果是post方式,则$username = $_POST["username"];

AJAX乱码问题

产生乱码的原因:
1、xtmlhttp 返回的数据默认的字符编码是utf-8,如果客户端页面是gb2312或者其它编码数据就会产生乱码
2、post方法提交数据默认的字符编码是utf-8,如果服务器端是gb2312或其他编码数据就会产生乱码

解决办法有:
1、若客户端是gb2312编码,则在服务器指定输出流编码
2、服务器端和客户端都使用utf-8编码

gb2312:header('Content-Type:text/html;charset=GB2312');

utf8:header('Content-Type:text/html;charset=utf-8');

注意:如果你已经按上面的方法做了,还是返回乱码的话,检查你的方式是否为get,对于get请求(或凡涉及到url传递参数的),被传递的参数都要先经 encodeURIComponent方法处理.如果没有用encodeURIComponent处理的话,也会产生乱码.

$.ajax不缓存版:
$.ajax({
             type:"GET"
    url:'test.html',
    cache:false,
    dataType:"html",
    success:function(msg){
        alert(msg);
    }
       });

jQuery.ajax( options ) : 通过 HTTP 请求加载远程数据
这个是jQuery 的底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。
$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该对象,但特殊情况下可用于手动终止请求。

注意: 如果你指定了 dataType 选项,请确保服务器返回正确的 MIME 信息,(如 xml 返回 "text/xml")。错误的 MIME 类型可能导致不可预知的错误。见 Specifying the Data Type for AJAX Requests 。

当设置 datatype 类型为 'script' 的时候,所有的远程(不在同一个域中)POST请求都回转换为GET方式。
$.ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数信息。详细参数选项见下。

jQuery 1.2 中,您可以跨域加载 JSON 数据,使用时需将数据类型设置为 JSONP。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。数据类型设置为 "jsonp" 时,jQuery 将自动调用回调函数。(这个我不是很懂)

参数列表:

名 类型 描述
url  String (默认: 当前页地址) 发送请求的地址。
type String (默认: "GET") 请求方式 ("POST" 或 "GET"), 默认为 "GET"。注意:其它 HTTP 请求方法,如 PUT 和 DELETE 也可以使用,但仅部分浏览器支持。
timeout Number 设置请求超时时间(毫秒)。此设置将覆盖全局设置。
async  Boolean (默认: true) 默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为 false。注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。
beforeSend  Function 发送请求前可修改 XMLHttpRequest 对象的函数,如添加自定义 HTTP 头。XMLHttpRequest 对象是唯一的参数。

function (XMLHttpRequest) {
 this; // the options for this ajax request
}
cache  Boolean (默认: true) jQuery 1.2 新功能,设置为 false 将不会从浏览器缓存中加载请求信息。
complete  Function 请求完成后回调函数 (请求成功或失败时均调用)。参数: XMLHttpRequest 对象,成功信息字符串。

function (XMLHttpRequest, textStatus) {
 this; // the options for this ajax request
}
contentType  String (默认: "application/x-www-form-urlencoded") 发送信息至服务器时内容编码类型。默认值适合大多数应用场合。
data  Object,
String 发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组,jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。
dataType  String 预期服务器返回的数据类型。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息返回 responseXML 或 responseText,并作为回调函数参数传递,可用值:

"xml": 返回 XML 文档,可用 jQuery 处理。

"html": 返回纯文本 HTML 信息;包含 script 元素。

"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。

"json": 返回 JSON 数据 。

"jsonp": JSONP 格式。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。

error  Function (默认: 自动判断 (xml 或 html)) 请求失败时将调用此方法。这个方法有三个参数:XMLHttpRequest 对象,错误信息,(可能)捕获的错误对象。

function (XMLHttpRequest, textStatus, errorThrown) {
 // 通常情况下textStatus和errorThown只有其中一个有值
 this; // the options for this ajax request
}
global  Boolean (默认: true) 是否触发全局 AJAX 事件。设置为 false 将不会触发全局 AJAX 事件,如 ajaxStart 或 ajaxStop 。可用于控制不同的Ajax事件
ifModified  Boolean (默认: false) 仅在服务器数据改变时获取新数据。使用 HTTP 包 Last-Modified 头信息判断。
processData  Boolean (默认: true) 默认情况下,发送的数据将被转换为对象(技术上讲并非字符串) 以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息,请设置为 false。
success  Function 请求成功后回调函数。这个方法有两个参数:服务器返回数据,返回状态

function (data, textStatus) {
 // data could be xmlDoc, jsonObj, html, text, etc...
 this; // the options for this ajax request
}

这里有几个Ajax事件参数:beforeSend ,success ,complete ,error 。我们可以定义这些事件来很好的处理我们的每一次的Ajax请求。注意一下,这些Ajax事件里面的 this 都是指向Ajax请求的选项信息的(请参考说 get() 方法时的this的图片)。
请认真阅读上面的参数列表,如果你要用jQuery来进行Ajax开发,那么这些参数你都必需熟知的。

示例代码,获取博客园首页的文章题目:

$.ajax({ 
type: "get", 
url: "http://www.cnblogs.com/rss", 
beforeSend: function(XMLHttpRequest){ 
//ShowLoading(); 
}, 
success: function(data, textStatus){ 
$(".ajax.ajaxResult").html(""); 
$("item",data).each(function(i, domEle){ 
$(".ajax.ajaxResult").append("<li>"+$(domEle).children("title").text()+"</li>"); 
}); 
}, 
complete: function(XMLHttpRequest, textStatus){ 
//HideLoading(); 
}, 
error: function(){ 
//请求出错处理 
} 
});

jQuery.ajaxSetup( options ) : 设置全局 AJAX 默认选项。
设置 AJAX 请求默认地址为 "/xmlhttp/",禁止触发全局 AJAX 事件,用 POST 代替默认 GET 方法。其后的 AJAX 请求不再设置任何选项参数。

jQuery 代码:

$.ajaxSetup({ 
url: "/xmlhttp/", 
global: false, 
type: "POST" 
}); 
$.ajax({ data: myData });

serialize() 与 serializeArray()
serialize() : 序列表表格内容为字符串。
serializeArray() : 序列化表格元素 (类似 '.serialize()' 方法) 返回 JSON 数据结构数据。

示例:
HTML代码:

<p id="results"><b>Results: </b> </p> 
<form> 
<select name="single"> 
<option>Single</option> 
<option>Single2</option> 
</select> 
<select name="multiple" multiple="multiple"> 
<option selected="selected">Multiple</option> 
<option>Multiple2</option> 
<option selected="selected">Multiple3</option> 
</select><br/> 
<input type="checkbox" name="check" value="check1"/> check1 
<input type="checkbox" name="check" value="check2" 
checked="checked"/> check2 
<input type="radio" name="radio" value="radio1" 
checked="checked"/> radio1 
<input type="radio" name="radio" value="radio2"/> radio2 
</form>
Javascript 相关文章推荐
JS 参数传递的实际应用代码分析
Sep 13 Javascript
为你的网站增加亮点的9款jQuery插件推荐
May 03 Javascript
Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法
Aug 08 Javascript
JavaScript输出当前时间Unix时间戳的方法
Apr 06 Javascript
jQuery网页版打砖块小游戏源码分享
Aug 20 Javascript
jQuery position() 函数详解以及jQuery中position函数的应用
Dec 14 Javascript
JavaScript中Object.prototype.toString方法的原理
Feb 24 Javascript
JavaScript解八皇后问题的方法总结
Jun 12 Javascript
JS控制页面跳转时未请求要跳转的地址怎么回事
Oct 14 Javascript
想学习javascript JS和jQuery哪个重要 先学哪个
Dec 11 Javascript
js时间控件只显示年月
Jan 08 Javascript
详解Vue slot插槽
Nov 20 Vue.js
解析jquery中的ajax缓存问题
Dec 19 #Javascript
快速解决jquery之get缓存问题的最简单方法介绍
Dec 19 #Javascript
探讨JQUERY JSON的反序列化类 using问题的解决方法
Dec 19 #Javascript
Json序列化和反序列化方法解析
Dec 19 #Javascript
利用js(jquery)操作Cookie的方法说明
Dec 19 #Javascript
JQUERY dialog的用法详细解析
Dec 19 #Javascript
JS控制图片翻转示例代码(兼容firefox,ie,chrome)
Dec 19 #Javascript
You might like
修改destoon会员公司的伪静态中的com目录的方法
2014/08/21 PHP
php实现excel中rank函数功能的方法
2015/01/20 PHP
PHP中使用array函数新建一个数组
2015/11/19 PHP
将PHP程序中返回的JSON格式数据用gzip压缩输出的方法
2016/03/03 PHP
php插入含有特殊符号数据的处理方法
2016/11/24 PHP
总结PHP中初始化空数组的最佳方法
2019/02/13 PHP
通过JAVAScript实现页面自适应
2007/01/19 Javascript
JS获取scrollHeight问题想到的标准问题
2007/05/27 Javascript
JavaScript中的对象化编程
2008/01/16 Javascript
MooTools 1.2介绍
2009/09/14 Javascript
jquery+css实现绚丽的横向二级下拉菜单-附源码下载
2015/08/23 Javascript
jquery实现全选、反选、获得所有选中的checkbox
2020/09/13 Javascript
详解JavaScript UTC时间转换方法
2016/01/07 Javascript
jQuery 弹出层插件(推荐)
2016/05/24 Javascript
使用jQuery和ajax代替iframe的方法(详解)
2017/04/12 jQuery
javascript实现二叉树遍历的代码
2017/06/08 Javascript
jQuery扇形定时器插件pietimer使用方法详解
2017/07/18 jQuery
javascript实现Java中的Map对象功能的实例详解
2017/08/21 Javascript
jQuery简单实现对数组去重及排序操作实例
2017/10/31 jQuery
React.js绑定this的5种方法(小结)
2018/06/05 Javascript
webpack打包react项目的实现方法
2018/06/21 Javascript
对Vue- 动态元素属性及v-bind和v-model的区别详解
2018/08/27 Javascript
Vue 2.0双向绑定原理的实现方法
2019/10/23 Javascript
uni-app使用微信小程序云函数的步骤示例
2020/05/22 Javascript
Python中使用copy模块实现列表(list)拷贝
2015/04/14 Python
django启动uwsgi报错的解决方法
2018/04/08 Python
什么是python的id函数
2020/06/11 Python
Python基于xlrd模块处理合并单元格
2020/07/28 Python
英国电器零售商:PRC Direct
2018/06/21 全球购物
科颜氏印度官网:Kiehl’s印度
2021/02/20 全球购物
《雨点儿》教学反思
2014/04/14 职场文书
学生自我评语大全
2014/04/18 职场文书
2014年学生工作总结
2014/11/20 职场文书
2015年圣诞节寄语
2015/08/17 职场文书
HTML+JS实现在线朗读器
2022/02/15 Javascript
Python实现将多张图片合成MP4视频并加入背景音乐
2022/04/28 Python