jQuery中ajax的使用与缓存问题的解决方法
所以第二次访问的时候如果URL字符串没变化浏览器是直接拿出了第一次访问的结果
POST则认为是一个变动性访问(浏览器认为POST的提交必定是有改变的)
防止GET的等幂访问就在URL后面加上?+newDate();,[总之就是使每次访问的URL字符串不一样的]
设计WEB页面的时候也应该遵守这个原则
总之,GET方式传送数据量小,处理效率高,安全性低,会被缓存,而POST反之。
(content)+"&id=1";
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
2.参数是名/值一一对应的键值对,每对值用&号隔开.如varname=abc&sex=man&age=18,注意varname=update.php?
abc&sex=man&age=18以及varname=?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乱码问题
2、post方法提交数据默认的字符编码是utf-8,如果服务器端是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类型可能导致不可预知的错误。见SpecifyingtheDataTypeforAJAXRequests。
当设置datatype类型为"script"的时候,所有的远程(不在同一个域中)POST请求都回转换为GET方式。
$.ajax()只有一个参数:参数key/value对象,包含各配置及回调函数信息。详细参数选项见下。
jQuery1.2中,您可以跨域加载JSON数据,使用时需将数据类型设置为JSONP。使用JSONP形式调用函数时,如"myurl?callback=?"jQuery将自动替换?为正确的函数名,以执行回调函数。数据类型设置为"jsonp"时,jQuery将自动调用回调函数。(这个我不是很懂)
参数列表:
名类型描述
url String(默认:当前页地址)发送请求的地址。
typeString(默认:"GET")请求方式("POST"或"GET"),默认为"GET"。注意:其它HTTP请求方法,如PUT和DELETE也可以使用,但仅部分浏览器支持。
timeoutNumber设置请求超时时间(毫秒)。此设置将覆盖全局设置。
async Boolean(默认:true)默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为false。注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。
beforeSend Function发送请求前可修改XMLHttpRequest对象的函数,如添加自定义HTTP头。XMLHttpRequest对象是唯一的参数。
function(XMLHttpRequest){
this;//theoptionsforthisajaxrequest
}
cache Boolean(默认:true)jQuery1.2新功能,设置为false将不会从浏览器缓存中加载请求信息。
complete Function请求完成后回调函数(请求成功或失败时均调用)。参数:XMLHttpRequest对象,成功信息字符串。
function(XMLHttpRequest,textStatus){
this;//theoptionsforthisajaxrequest
}
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;//theoptionsforthisajaxrequest
}
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){
//datacouldbexmlDoc,jsonObj,html,text,etc...
this;//theoptionsforthisajaxrequest
}
这里有几个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代码:
<pid="results"><b>Results:</b></p>
<form>
<selectname="single">
<option>Single</option>
<option>Single2</option>
</select>
<selectname="multiple"multiple="multiple">
<optionselected="selected">Multiple</option>
<option>Multiple2</option>
<optionselected="selected">Multiple3</option>
</select><br/>
<inputtype="checkbox"name="check"value="check1"/>check1
<inputtype="checkbox"name="check"value="check2"
checked="checked"/>check2
<inputtype="radio"name="radio"value="radio1"
checked="checked"/>radio1
<inputtype="radio"name="radio"value="radio2"/>radio2
</form>
相关文章
- jquery判断数组中是否包含某个元素的值_java判断元素是否在数组中
- jQuery图片缩小效果详解编程语言
- jQuery图片切换插件jquery.cycle.js详解编程语言
- jquery淡入淡出详解编程语言
- jQuery width()和height()方法的用法
- jQuery $.get()方法的用法
- jquery必填项判断表单是否为空的方法
- jquery将disabled的元素置为enabled的三种方法
- 禁止JQuery中的load方法装载IE缓存中文件的方法
- (jQuery,mootools,dojo)使用适合自己的编程别名命名
- 初窥JQuery-Jquery简介入门了解篇
- Jquery:ajax实现翻页无刷新功能代码
- jquery添加节点的几种方法介绍
- jquery缓存问题的几个解决方法
- jquery.ui.draggable中文文档(原文翻译)
- JQuery的ready函数与JS的onload的区别详解
- js与jquery获取父元素,删除子元素的两种不同方法
- jQuery在iframe中无法弹出对话框的解决方法
- jquery实现ajax提交form表单的方法总结
- jquery跟js初始化加载的多种方法及区别介绍
- jQuery.extend()、jQuery.fn.extend()扩展方法示例详解
- jquery操作对象数组元素方法详解
- jquery通过load获取文件的内容并跳到锚点的方法
- 基于jQuery实现最基本的淡入淡出效果实例
- jquery实现一个简单好用的弹出框