您的位置:首页 > Web前端 > JavaScript

【JavaScript】(5)——JavaScript与cookie、XML交互

2015-12-06 17:01 726 查看
背景: JavaScript是一种具有面向对象能力的、解释型的程序设计语言。它的主要目的是,验证发往服务器端的数据,增加Web互动,加强用户体验度等。强大的JavaScript和许多Web前端都有交互,下面就来介绍一下,增长见识的时刻又到了。

一、JavaScript与Cookie

随着Web越来越复杂,开发者急切的需要能够本地化存储的脚本功能。这个时候,第一个出现的方案:cookie诞生了。cookie的意图是:在本地的客户端的磁盘上以很小的文件形式保存数据。



cookie也叫 HTTPCookie,最初是客户端与服务器端进行会话使用的。比如,会员登录,下次回访网站时无须登录了;或者是购物车,购买的商品没有及时付款,过两天发现购物车里还有之前的商品列表。



HTTPCookie要求服务器对任意 HTTP请求发送 Set-Cookie,因此,Cookie的处理原则上需要在服务器环境下进行。当然,现在大部分浏览器在客户端也能实现 Cookie的生成和获取。(目前 Chrome不可以在客户端操作,其他浏览器均可)




cookie的组成:cookie由名/值对形式的文本组成: name=value。完整格式为:name=value; [expires=date]; [path=path]; [domain=somewhere.com]; [secure],中括号是可选,name=value是必选。




https安全通信链接需要单独配置。JavaScript设置、读取和删除并不是特别的直观方便, 我们可以封装成函数来方便调用。


//创建cookie
function setCookie(name,value,expires,path,domain,secure){
var cookieName=encodeURIComponent(name)+'='+encodeURIComponent(value);
if(expires instanceof Date) {
cookieName+=';expires='+expires;
}
if(path){
cookieName+=';path='+expires;
}
if(domain){
cookieName+=';domain='+domain;
}
if(secure){
cookieName+=';secure';
}
document.cookie=cookieName;
}

//失效天数,直接传一个天数即可
function setCookieDate(day) {
var date = null;
if (typeof day== 'number' && day> 0){
var date = new Date();
date.setDate(date.getDate() + day);
} else {
throw new Error('传递的day必须是一个天数,必须比0大');
}
return date;
}

//今天是2015年12月6日,7天后此cookie过期
setCookie('user','何丽杰',setCookieDate(7));
setCookie('url','baidu.com',setCookieDate(7));
setCookie('email','helijie92902@163.com',setCookieDate(7));








//获取cookie
function getCookie(name){
var cookieName=encodeURIComponent(name)+'=';   //cookieName得到user或者URL或者Email
var cookieStart=document.cookie.indexOf(cookieName); //cookieStart得到三者中的未知,user是0,URL是34,Email是48,不存在是-1
var cookieValue=null;
if(cookieStart>-1){
var cookieEnd = document.cookie.indexOf(';', cookieStart); //cookieEnd得到user的结尾是32,URL是46,Email是-1
if (cookieEnd == -1) {
cookieEnd = document.cookie.length;   //Email是74
}
cookieValue=decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd)); //解码
}
return cookieValue;
}

//删除 cookie
function unsetCookie(name) {
document.cookie = name +"= ; expires=" + newDate(0);
}

alert(getCookie('user'));
alert(getCookie('url'));
alert(getCookie('email'));








cookie虽然在持久保存客户端用户数据提供了方便, 分担了服务器存储的负担。但是还有很多局限性的。



第一:每个特定的域名下最多生成 20个 cookie(根据不同的浏览器有所区别)。




1.IE6或更低版本最多 20个 cookie

2.IE7和之后的版本最多可以 50个 cookie。 IE7最初也只能 20个, 之后因被升级不定后增加了。

3.Firefox最多 50个 cookie

4.Opera最多 30个 cookie

5.Safari和 Chrome没有做硬性限制。




PS:为了更好的兼容性,所以按照最低的要求来,也就是最多不得超过 20个 cookie。当超过指定的 cookie时,浏览器会清理掉早期的cookie。 IE和 Opera会清理近期最少使用的 cookie, Firefox会随机清理cookie。




第二: cookie的最大大约为4096字节(4k), 为了更好的兼容性, 一般不能超过4095字节即可。




第三: cookie存储在客户端的文本文件,所以特别重要和敏感的数据是不建议保存在cookie的。比如银行卡号,用户密码等。



二、JavaScript与XML

随着互联网的发展, Web应用程序的丰富,开发人员越来越希望能够使用客户端来操作XML技术。而XML技术一度成为存储和传输结构化数据的标准。所以,本文探讨一下JavaScript中使用 XML的技术。XML可以理解成一个微型的结构化的数据库,保存一些小型数据用的。



在统一的正式规范出来以前, 浏览器对于 XML的解决方案各不相同。 DOM2级提出了动态创建 XMLDOM规范, DOM3进一步增强了 XMLDOM。所以,在不同的浏览器实现XML的处理是一件比较麻烦的事情。如果要实现跨浏览器就要思考几个个问题:

1.load()只有IE、Firefox、Opera支持,所以无法跨浏览器;

2.获取 XMLDOM对象顺序问题,先判断先进的 DOM2的,然后再去判断落后的IE;

3.针对不同的IE和DOM2级要使用不同的序列化。

4.针对不同的报错进行不同的报错机制。

//跨浏览器返回XML DOM对象
function getXMLDOM(xmlStr) {
var xmlDom = null;

if (typeof window.DOMParser != 'undefined') {   //W3C
xmlDom = (new DOMParser()).parseFromString(xmlStr, 'text/xml');
var errors = xmlDom.getElementsByTagName('parsererror');
if (errors.length > 0) {
throw new Error('XML解析错误: ' + errors[0].firstChild.nodeValue);
}
} else if (typeof window.ActiveXObject != 'undefined') { //IE
var version = [
'MSXML2.DOMDocument.6.0',
'MSXML2.DOMDocument.3.0',
'MSXML2.DOMDocument'
];

for (var i = 0; i < version.length; i ++) {
try {
xmlDom = newActiveXObject(version[i]);
} catch (e) {
//跳过
}
}

//加载XML字符串
xmlDom.loadXML(xmlStr);
if (xmlDom.parseError != 0) {
throw new Error('XML解析错误: ' + xmlDom.parseError.reason);
}
} else {
throw new Error('您所使用的系统或浏览器不支持 XMLDOM! ');
}
return xmlDom;
}

//其次,必须跨浏览器序列化XML
function serializerXML(xmlDom){
var xml='';
if(typeof XMLSerializer!='undefined'){
xml=(new XMLSerializer()).serializeToString(xmlDom);
}else if(typeof xmlDom.xml!='undefined'){
xml=xmlDom.xml;
}else{
throw newError('无法解析XML! ');
}
return xml;
}

var xmlStr = '<root><user>helijie</user></root>';
var xmlDom = getXMLDOM(xmlStr);
alert(serializerXML(xmlDom));


火狐 IE





PS:由于兼容性序列化过程有一定的差异,可能返回的结果字符串可能会有一些不同。至于load()加载XML文件则因为只有部分浏览器支持而无法跨浏览器.



三、学习心得

1、没有独立的软件,要想占有不败的地位就必须和外界进行联系。相互联系、沟通才能更好的适应社会。

2、跨浏览器兼容的软件才是好的软件。人才也是一样,可以精通一门,但不可以只会一门。

3、每个开发软件都有自己的长处和短处,取长补短才能打造出强大的软件。合作共赢。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: