Ajax的一些有用的小技巧

北鼻安好123

北鼻安好123

2016-02-19 20:03

有了下面这个Ajax的一些有用的小技巧教程,不懂Ajax的一些有用的小技巧的也能装懂了,赶紧get起来装逼一下吧!

在使用Ajax过程中,有时候总会遇到一些难题,浏览器兼容、编码、IE下的特殊处理等等,偶尔会搞的人头昏脑胀哭笑不得,这里列一些小贴士,或许有些用。

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

使用Javascript库

Ajax的流行和巨大威力,让我们重新审视了Javascript的开发,也直接促使各种库的出现。对于普通的开发者,使用一些适合自己的Javascript库不仅可以避免Ajax应用上的浏览器兼容等问题,也使其开发更加的稳定和高效。这里列一些我知晓的轻量级的Javascript库:

YUI:YAHOO出品,组件丰富强大健壮稳定,是团队协作开发的首选。
JQuery:灵活、高效,其基于CSS3 和XPath的选择器语法引擎非常的强大和完整。
Prototype:是一个非常优雅的Javascript库,最经典的莫过于$符号了,DWR,JQuery都被它吸引了。在它基础上出现了script.aculo.us。
Mootools:核心语法和Prototype比较类似,但是用过之后才知道什么叫简单轻巧和短小精悍。
编码问题

通过XMLHttpRequest获取的数据,默认的字符编码是UTF-8,如果前端页面是GB2312或者其它编码,显示获取的数据就是乱码。通过XMLHTTPRequest,POST的数据也是UTF-8编码,如果后台是GB2312或者其他编码也会出现乱码。解决方法:

统一到UTF-8。这也是国际化的必然趋势。
输出通过XMLHttpRequest获取的文本文本时,在headers中增加文本声明(直接HTML声明没有作用)。如:
PHP:header('Content-Type:text/html;charset=GB2312');
ASP:Response.Charset = "GB2312"
JSP:response.setHeader("Charset","GB2312");
WWW服务器上强制声明。比如:apache下的配置:
AddDefaultCharset GB2312

这种情况主要是应对通过XMLHttpRequest访问的文件是静态文件,无法声明headers的情况下。

静态页面一般都会经过Apache的deflate或gzip压缩,此时在上面情况下IE中,首次通过XMLhttpRequest获得的数据可以正常显示,但再获取数据显示时出现乱码,这次因为再次获取的数据来自缓存,可能由于浏览器解压缩的问题导致Apache设置的默认编码声明丢失。由于这种情况下一般是纯文本,可能还无法禁止缓存,可以设置XMLhttpRequest访问的文本文件不压缩来解决这个问题。

非UTF-8页面通过XMLHttpRequest获取的文本文本输出前字符转码成unicode,或者编码直接是UTF-8,可以正常显示。如实例所示。

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)


IE下的缓存问题

由于IE的缓存处理机制问题,每次通过XMLHttpRequest访问动态页面返回的总是首次访问的内容,解决方法有:

客户端通过添加随机字符串解决。如:
var url = 'http://dancewithnet.com/';
url +=  '?temp=' + new Date().getTime();
url +=  '?temp=' + Math.random();
在HTTP headers禁止缓存。如:
HTTP:
meta http-equiv="pragma" content="no-cache" /
meta http-equiv="Cache-Control" content="no-cache, must-revalidate" /
meta http-equiv="expires" content="Thu, 01 Jan 1970 00:00:01 GMT" /
meta http-equiv="expires" content="0" /
PHP:
header("Expires: Thu, 01 Jan 1970 00:00:01 GMT");
header("Cache-Control: no-cache, must-revalidate");
header("Pragma: no-cache");
ASP:
Response.expires=0
Response.addHeader("pragma","no-cache")
Response.addHeader("Cache-Control","no-cache, must-revalidate")
JSP:
response.addHeader("Cache-Control", "no-cache");
response.addHeader("Expires", "Thu, 01 Jan 1970 00:00:01 GMT");
在XMLHttpRequest发送请求之前加上:
XMLHttpRequest.setRequestHeader("If-Modified-Since","0");
XMLHttpRequest.send(null);
IE下的reponseXML问题

使用responseXML时,IE下只能接受.xml为后缀的XML文件,如果不能以.xml文件为结尾的,则需要如下处理:

在服务器端声明是xml文件类型。如:

PHP:header("Content-Type:text/xml;charset=utf-8");
ASP:Response.ContentType = "text/xml";
JSP:response.setHeader("ContentType","text/xml");

利用responseText获取,然后封装成XML。

在AJAX应用上,JSON和JsonML是XML非常好的替代品。

展开更多 50%)
分享

猜你喜欢

Ajax的一些有用的小技巧

Web开发
Ajax的一些有用的小技巧

一些有用的CSS资源

Web开发
一些有用的CSS资源

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

初次学习Ajax的一些心得

Web开发
初次学习Ajax的一些心得

VC中一些控件的小技巧

编程语言 网络编程
VC中一些控件的小技巧

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

ajax以及一些乱码问题

Web开发
ajax以及一些乱码问题

压线的一些技巧

拼布
压线的一些技巧

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

AJAX案例研究之详细剖析Gmail应用

AJAX案例研究之详细剖析Gmail应用

寻找Windows 8系统虚拟键盘隐藏的那个彩蛋

寻找Windows 8系统虚拟键盘隐藏的那个彩蛋
下拉加载更多内容 ↓