zl程序教程

您现在的位置是:首页 >  前端

当前栏目

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

jQuery方法缓存AJAX 问题 使用 解决
2023-06-13 09:15:14 时间

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

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

防止GET的等幂访问就在URL后面加上?+newDate();,[总之就是使每次访问的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方法处理.例:varurl="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.参数是名/值一一对应的键值对,每对值用&号隔开.如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乱码问题

产生乱码的原因:
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类型可能导致不可预知的错误。见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>