Menu
Woocommerce Menu

数据交互与本地存储,eval解析JSON字符串的一个小问题

0 Comment


eval分析JSON字符串的一个小意思

2016/02/24 · JavaScript
· JSON

原作出处: 韩子迟   

事先写过一篇 有关 JSON
的介绍小说,里面谈起了
JSON 的剖判。大家都清楚,高档浏览器能够用  JSON.parse() API 将七个 JSON 字符串深入分析成
JSON 数据,稍微欠妥点的做法,大家得以用 eval() 函数。

JavaScript

var str = ‘{“name”: “hanzichi”, “age”: 10}’; var obj = eval(‘(‘ + str +
‘)’); console.log(obj); // Object {name: “hanzichi”, age: 10}

1
2
3
var str = ‘{"name": "hanzichi", "age": 10}’;
var obj = eval(‘(‘ + str + ‘)’);
console.log(obj); // Object {name: "hanzichi", age: 10}

 

是还是不是注意到,向 eval() 传参时,str 变量外裹了一层小括号?为何要这么做?

我们先来探视 eval 函数的概念以及选取。

eval() 的参数是二个字符串。假使字符串表示了三个表明式,eval()
会对表明式求值。假如参数表示了二个或五个 JavaScript 表明, 那么 eval()
会施行表明。不要调用 eval() 来为算数表明式求值; JavaScript
会自动为算数表明式求值。

简言之地说,eval 函数的参数是一个字符串,纵然把字符串 “noString”
化管理,那么得到的将是正规的能够运营的 JavaScript 语句。

怎么说?举个栗子,如下代码:

JavaScript

var str = “alert(‘hello world’)”; eval(str);

1
2
var str = "alert(‘hello world’)";
eval(str);

推行后弹出 “hello world”。大家把 str 变量 “noString”
化,暴虐点的做法正是去掉外面的引号,内部调解(转义等),然后就改为了:

JavaScript

alert(‘hello world’)

1
alert(‘hello world’)

very good!那是例行的能够运作的 JavaScript 语句!运营之!

再回去起先的难题,为啥 JSON
字符串要裹上小括号。假设不加,是其同样子的:

JavaScript

var str = ‘{“name”: “hanzichi”, “age”: 10}’; var obj = eval(str); //
Uncaught SyntaxError: Unexpected token :

1
2
var str = ‘{"name": "hanzichi", "age": 10}’;
var obj = eval(str);  // Uncaught SyntaxError: Unexpected token :

恩,报错了。为何会报错?试试把 str “noString” 化,实施一下:

JavaScript

{“name”: “hanzichi”, “age”: 10}; // Uncaught SyntaxError: Unexpected
token :

1
{"name": "hanzichi", "age": 10};  // Uncaught SyntaxError: Unexpected token :

无庸置疑,三个 JSON 对象可能说是一个对象根本就不是能进行的 JavaScript
语句!等等,试试以下代码:

JavaScript

var str = ‘{name: “hanzichi”}’; var obj = eval(str); console.log(obj);
// hanzichi

1
2
3
var str = ‘{name: "hanzichi"}’;
var obj = eval(str);
console.log(obj); // hanzichi

那又是何许鬼?但是给 name 加上 “” 又报错?

JavaScript

var str = ‘{“name”: “hanzichi”}’; var obj = eval(str); // Uncaught
SyntaxError: Unexpected token : console.log(obj);

1
2
3
var str = ‘{"name": "hanzichi"}’;
var obj = eval(str);  // Uncaught SyntaxError: Unexpected token :
console.log(obj);

行吗,快晕了,其实还是足以将 str “nostring” 化,看看是否能科学推行的
JavaScript 语句。前面一个的结果是:

JavaScript

{name: “hanzichi”}

1
{name: "hanzichi"}

这的确是一条官方的 JavaScript 语句。{} 我们不仅可以在 if、for
语句等场景使用,以至足以在其余时候,因为 ES6 在此以前 JavaScript
独有块级功效域,所以对于功效域什么的并不会有啥抵触。去掉 {}
后 name: "hanzichi"也是官方的话语,二个 label 语句,label
语句在跳出嵌套的轮回中丰富好用,具体能够参谋 label,而作为
label 语句的符号,name 是无法带引号的,标识能放在 JavaScript
代码的别样地方,用不到也没涉及。

如果贰个目的有了多个 key,比如 {name: “hanzichi”, age: 10} ,ok,多个 label 语句?将
“hanzhichi” 以及 10
分别作为是话语,可是 言辞之间只好用封号连接!(表达式之间本事用逗号)。所以改成上边这样也是从未难点的:

JavaScript

var str = ‘{name: “hanzichi”; age: 10}’; var obj = eval(str);
console.log(obj); // 10

1
2
3
var str = ‘{name: "hanzichi"; age: 10}’;
var obj = eval(str);  
console.log(obj); // 10

越扯越远,作品开端代码的荒唐的源委是找到了,为啥套个括号就能够一举成功吧?简来讲之,()
会把语句转变来表明式,称为语句表达式。括号里的代码都会被转移为表明式求值並且再次来到,对象字面量必需作为表明式而留存

正文并不会大谈表达式,关于表明式,能够参谋文末链接。值得记住的有些是,表明式永久有三个重回值。超越十分之五表明式会卷入在()
内,小括号内不可能为空,倘使有四个表达式,用逗号隔绝,也正是所谓的逗号表明式,会回到最后二个的值。

聊到表明式,不得不提函数表明式,在此以前翻译过一篇关于马上实行函数表明式的稿子,能够参照他事他说加以考察下,文末。

Read More:

  • [译]JavaScript中:表达式和说话的区分
  • (译)详解javascript登时实行函数表明式(IIFE)
  • 深刻研商javascript的 {}
    语句块

    1 赞 1 收藏
    评论

银河国际网址手机版 1

数据交互与本土存款和储蓄

2016/01/17 · HTML5,
JavaScript · 1
评论 ·
存储

原版的书文出处:
涂根华   

一:Iframe父页面与子页面之间的调用

规范词语解释如下:

    Iframe:iframe成分是文书档案中的文档。

    window对象: 浏览器会在其开垦多个HTML文书档案时创建多个相应的window对象。不过,如果叁个文书档案定义了八个要么三个框架

(即:富含贰个依旧多少个frame也许iframe标签),浏览器就能够为原始文书档案创制多少个window对象,再为各种iframe创立额外的window对象,那几个额外的window对象是原始窗口的子窗口。

contentWindow: 是指钦定的iframe也许iframe所在的window对象。

   1. 父页面与子页面之间的调用。

方今我们能够稳步做demo来分别授课下,假如有iframe父页面为 iframe1.html, 父页面上有2个子页面 分别为iframe2.html 和 iframe3.html。

父页面iframe1.html代码如下:

XHTML

<!doctype html> <html lang=”en”> <head> <meta
charset=”UTF-8″> <title>Document</title> <script
src=”jquery1.7.js”></script> </head> <body>
<iframe src=”” id =
“iframe3″></iframe> <iframe
src=”” id =
“iframe2″></iframe> <div
class=”iframe1”>父页面</div> <script> function test2() {
console.log(1); } </script> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="jquery1.7.js"></script>
</head>
<body>
    <iframe src="http://localhost/iframe/iframe3.html" id = "iframe3"></iframe>
    <iframe src="http://localhost/iframe/iframe2.html" id = "iframe2"></iframe>
    <div class="iframe1">父页面</div>
   <script>
    function test2() {
        console.log(1);
    }
   </script>
</body>
</html>

子页面iframe2.html代码如下:

XHTML

<!doctype html> <html lang=”en”> <head> <meta
charset=”UTF-8″> <title>Document</title> <script
src=”jquery1.7.js”></script> </head> <body> <div
id=”test”>aaa</div> <div
class=”iframe2″>子页面</div> <script> function b() {
console.log(“笔者是子页面”); } function iframe3Page() {
console.log(“iframe3页面调用iframe2页面”); } </script>
</body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="jquery1.7.js"></script>
</head>
<body>
    <div id="test">aaa</div>
    <div class="iframe2">子页面</div>
       <script>
           function b() {
           console.log("我是子页面");
       }
       function iframe3Page() {
           console.log("iframe3页面调用iframe2页面");
       }
      </script>
</body>
</html>

1.  子页面iframe2.html调用父页面 iframe1.html的成分如下代码:

    console.log($(‘.iframe1’,parent.document));

2.  子页面iframe2.html调用父页面iframe1.html的函数如下代码:

    parent.test2();

留意:父页面iframe1.html页面 中test2方法不可能放在$(function(){}), 放在中间就调用不到。

3.
子页面iframe2.html调用自家的iframe(即便父页面有相当多iframe,获取自己iframe不经过id可能name属性).

   
1.第一咱们得以在父页面上写四个函数 用来获取页面全数的iframe,之后张开遍历,进行判断当前的window对象是或不是一样。如下代码:

JavaScript

function getFrame(f){ var frames =
document.getElementsByTagName(“iframe”); for(i=0;i){
if(frames[i].contentWindow == f){ return(frames[i]) } } }

1
2
3
4
5
6
7
8
function getFrame(f){
    var frames = document.getElementsByTagName("iframe");
    for(i=0;i){
         if(frames[i].contentWindow == f){
              return(frames[i])
          }
      }
  }

    2. 在子页面iframe2.html中如下调用父页面包车型大巴形式 getFrame.

JavaScript

/* 获取自己的iframe */ var aa = parent.getFrame(this);
console.log(aa); $(aa).attr(“flag”,true);

1
2
3
4
/* 获取自身的iframe */
var aa = parent.getFrame(this);
console.log(aa);
$(aa).attr("flag",true);

给iframe2设置属性 flag: true, 如下截图:

银河国际网址手机版 2

4. 父页面iframe1.html调用子页面 iframe2.html的元素及函数.

一般来讲调用有误的:

console.log(document.getElementById(“iframe2”).contentWindow.b());

因为iframe2.html 有希望未加载成功,所以要等iframe2加载成功后再张开调用,

故而大家须要 iframe2.onload = function(){}; 那样再张开调用。为了包容IE,我们得以如下封装二个办法:

JavaScript

function iframeIsLoad(iframe,callback){ if(iframe.attach伊芙nt) {
iframe.attachEvent(‘onload’,function(){ callback & callback(); }); }else
{ iframe.onload = function(){ callback & callback(); } } } //
调用格局如下: // 父页面调用子页面iframe2的章程 var iframe2 =
document.getElementById(“iframe2”); iframeIsLoad(iframe2,function(){
iframe2.contentWindow.b(); // 打印出 笔者是子页面 //
父页面获取子页面iframe2的因素 var iframeDom =
$(“.iframe2”,iframe2.contentWindow.document); console.log(iframeDom);
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function iframeIsLoad(iframe,callback){
    if(iframe.attachEvent) {  
         iframe.attachEvent(‘onload’,function(){
             callback & callback();
         });
 
    }else {
         iframe.onload = function(){
              callback & callback();
         }
    }
}
// 调用方式如下:
// 父页面调用子页面iframe2的方法
var iframe2 = document.getElementById("iframe2");
iframeIsLoad(iframe2,function(){
    iframe2.contentWindow.b(); // 打印出 我是子页面  
    // 父页面获取子页面iframe2的元素
    var iframeDom = $(".iframe2",iframe2.contentWindow.document);
    console.log(iframeDom);
 
});

二:理解JSONP跨域手艺的基本原理

Javascript是一种在web开拓中平常使用的前端动态脚本本事,在javascript中,有贰个非常重大的平安限制,被誉为”same-Origin-Policy”同源计策,这一方针对于javascript代码能够访谈的页面内容作了很关键的界定,即javascript只可以访谈与分包它的文书档案在同合同,同域名,同端口的脚本进行互动;

JSONP的基本原理是:利用在页面中开创节点的格局向差异域提交http恳求的方法称为JSONP。

JSONP的切实达成方式如下:

第一大家为了演示跨域,大家在host文件夹下绑定如下2个域名如下:

   127.0.0.1  abc.example1.com

   127.0.0.1  def.example2.com

里面在abc.example1.com域名下有一个a.html页面;采访页面路线如下:

   

1. 大家在域名下abc.example1.com下的a.html页面引进一个域名称为def.example2.com下的a.js文件;如下:

  然后在a.js代码变为如下:

JavaScript

   function jsonp(){         alert(1)    }   jsonp();

1
2
3
4
   function jsonp(){
        alert(1)
   }
  jsonp();

最终大家在域名下abc.example1.com下的a.html页面运维下可以看到弹出对话框 “1”;大家得以看来引入差异域名下的js文件也能跨域实行;

2. 即使自身在域名字为def.example2.com下的a.js文件是还是不是调用a.html的议程名吧?大家承继来演示那一个demo;大家在abc.example1.com下的a.html引入文件如下:

JavaScript

function jsonp(){     alert(1) }

1
2
3
4
5
function jsonp(){
 
    alert(1)
 
}

中间域名称为def.example2.com下的a.js内容为:jsonp(); 我们继续来运作下页面,能够看到,依然得以弹出对话框 1;

3.
 万一本人在外面的调用方法是还是不是传递二个参数呢?大家承继和第二点同样,只是格局里面多了一个参数字传送进去就可以:如下代码:

def.example2.com下的a.js内容为:jsonp(“我是来测量检验的”);abc.example1.com下的a.html文件内容为:

JavaScript

 function jsonp(html){        alert(html)   }

1
2
3
 function jsonp(html){
       alert(html)
  }

咱们运营下页面a.html,也足以见见弹出了对话框 “小编是来测量试验的”文案;所以,大家就能够通过这种艺术来给页面中盛传外站的数码;可以兑现JSONP的跨域数据;

接头JSONP推行进度如下:

   
首先在客商端注册三个callback(比方jsonpcallback),然后把callback名字(比如叫jsonp123456)传给服务器端,服务器端获得callback名字后,须要用jsonp123456(),把就要输出的json内容富含起来,此时,服务器生成的json数据本事被客商端精确接受;然后以javascript语法的秘技,生成五个function,function的名字就是传递回来的参数jsonp123456.然后就可以在客商端直接运营调用jsonp123456以此函数了;

示范代码如下:

在域名下abc.example1.com下的a.html页面代码如下:

动态创造script标签,给script动态设置src值为域名def.example2.com,那样就贯彻在不一样的域名下了;

如下代码:

JavaScript

<script> function jsonp123456(data){ alert(data.name); // tugenhua
alert(data.age); // 28 alert(data.single); // yes } var eleScript=
document.createElement(“script”); eleScript.type = “text/javascript”;
eleScript.src =
“”;
document.getElementsByTagName(“HEAD”)[0].appendChild(eleScript);
</script> //在def.example2.com域名下的a.js代码如下:
jsonp123456({“name”:’tugenhua’,’age’:’28’,’single’:’yes’});

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
    function jsonp123456(data){
        alert(data.name); // tugenhua
        alert(data.age);  // 28
        alert(data.single); // yes
    }
    var eleScript= document.createElement("script");
    eleScript.type = "text/javascript";
    eleScript.src = "http://def.example2.com/iframe/a.js?jsonpcallback=jsonp123456";
    document.getElementsByTagName("HEAD")[0].appendChild(eleScript);
</script>
//在def.example2.com域名下的a.js代码如下:
jsonp123456({"name":’tugenhua’,’age’:’28’,’single’:’yes’});

分析:
在a.html下给服务器端发送乞请,而且给劳务器端传递参数 jsonpcallback=jsonp123456;服务器端获得jsonpcallback那么些参数后;需求用jsonp123456(),把将在输出的json内容囊括起来,此时,服务器生成的json数据工夫被客商摆正确接受;然后以javascript语法的诀窍,生成二个function,function的名字正是传递回来的参数jsonp123456.然后就足以在客商端直接运转调用jsonp123456那一个函数了;

如上演示的代码; 之后分别弹出data.name;data.age;及data.single;

JSONP的优点:

它不像XMLHttpRequest对象完结ajax央浼受到同源战略的限制,它在具备的浏览器都补助,

诸如古老的IE6也支持,而且在呼吁完成后方可由此callback的法子传回结果;

JSONP的缺点:

1. 只协助get央浼,不扶助post要求,它只援助http跨域的诉求情形,

不能够消除不一样域的四个页面之间什么进展javascript调用的难题; 

  1. 出于它是get必要,传递的参数都拼在url前边,因此数据安全性不高;

三:iframe之间通讯难点

1. iframe通信 分为:同域通讯 和 跨域通讯。所谓同域通讯是指 
 下的a.html页面嵌套 iframe 比方: 的B.html页面,那八个页面数据进行通讯,比如笔者想在父页面A.html 调用子页面个中的函数 咱们很轻巧想到依旧google下
;document.getElementById(‘iframeA’).contentWindow.b(); 这种艺术,其中b 是子页面B.html中的一个函数。可是这么调用下有个难题笔者纠结了十分久,正是既然在火狐下报那样的失实, 如下图所示:

银河国际网址手机版 3

b不是个函数 但是自个儿在子页面明明定义了那样三个函数,那么为啥会报那样的荒谬呢?经过留神深入分析及google,开掘有与此相类似贰个标题亟需领悟,当iframe未有加载成功后 笔者就去奉行那一个js会报那样的失实,所以就试着在火狐下 用iframe.onload 这些函数 进行测验,果然未有报错,是理之当然的 所以就鲜明是以此难题。所以就想写个包容IE和火狐 google写个函数 来规定iframe已经加载成功!,其实给个回调函数来调用大家地方的艺术。

综述上边的笔触 A.html 就能够写个如此的代码:

JavaScript

<iframe src=”” id=”iframeA”
name=”iframeA”></iframe> <div
id=”topName”>topNddddddddddddddddame</div> <script>
function A(){ alert(“A”); } var iframe =
document.getElementById(‘iframeA’); iframeIsLoad(iframe,function(){ var
obj = document.getElementById(‘iframeA’).contentWindow; obj.b(); });
function iframeIsLoad(iframe,callback){ if(iframe.attachEvent) {
iframe.attachEvent(‘onload’,function(){ callback && callback(); });
}else { iframe.onload = function(){ callback && callback(); } } }
</script> B.html 代码如下: var b = function(){ alert(“B”); };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<iframe src="http://localhost/demo/iframe/iframeB.html" id="iframeA" name="iframeA"></iframe>
<div id="topName">topNddddddddddddddddame</div>
<script>
    function A(){
        alert("A");
    }
    var iframe = document.getElementById(‘iframeA’);
    iframeIsLoad(iframe,function(){
        var obj = document.getElementById(‘iframeA’).contentWindow;
        obj.b();
    });
     function iframeIsLoad(iframe,callback){
        if(iframe.attachEvent) {
            iframe.attachEvent(‘onload’,function(){
                callback && callback();
            });
        }else {
            iframe.onload = function(){
                callback && callback();
            }
        }
     }
</script>
B.html 代码如下:
var b = function(){
    alert("B");
};

2.子页面调用父页面包车型客车函数一点也不细略,只要这么搞下就ok了,window.parent.A();

3. 子页面取父页面成分的值: window.parent.document.getElementById(“topName”).innerHTML等办法。

二: iframe跨域通讯。

iframe跨域访谈一般分为2种景况,第一种是同主域,分化子域的跨域。 第三种是:分化主域跨域。

一、 是同主域上面,不等子域之间的跨域;能够经过document.domain 来设置同样的主域来缓慢解决。

倘使以往小编有个域 abc.example.com 下有个页面叫abc.html, 页面上嵌套了一个iframe 如下:

XHTML

<iframe src=”” id=”iframe2″
style=”display:none;”></iframe>,

1
<iframe src="http://def.example.com/demo/def.html"  id="iframe2" style="display:none;"></iframe>,

本身想在abc域下的页面abc.html 访问 def域下的def.html  我们都晓得是因为安全性 游历器的同源战术的限制,js无法操作页面分裂域下 不相同协商下 分裂端口的页面,所以将在化解跨域采访了,假设父页面abc.html 页面有个js函数:

 function test(){console.log(1);};

 作者想在子页面调用这一个函数 依旧依据地方的同域方式调用 parent.test();那样,通过在火狐下看 已经跨域了 消除的格局是 在千家万户js函数顶上部分 加一句 document.domain = ‘example.com’,就能够消除了。

 abc.html代码如下:

XHTML

<iframe src=”” id=”iframe2″
style=”display:none;”></iframe> // 跨域 子页调用父页的 函数
(借使是上边test函数) document.domain = ‘example.com’; function
test(){console.log(1);};

1
2
3
4
<iframe src="http://def.example.com/demo/def.html"  id="iframe2" style="display:none;"></iframe>
  // 跨域 子页调用父页的 函数 (假设是下面test函数)
  document.domain = ‘example.com’;
  function test(){console.log(1);};

def.html代码如下:

JavaScript

/* * 子页调用父页的点子 */ document.domain = ‘example.com’;
//window.top.test(); window.parent.test();

1
2
3
4
5
6
/*
* 子页调用父页的方法
*/
document.domain = ‘example.com’;
//window.top.test();
window.parent.test();

要么那四个页面 笔者想父页调用子页 如下方法:

a.html代码如下:

JavaScript

/* * 跨域 父页想调用子页的的函数 */ document.domain = ‘example.com’;
var iframe = document.getElementById(‘iframe2’);
iframeIsLoad(iframe,function(){ var obj = iframe.contentWindow;
obj.child(); }); function iframeIsLoad(iframe,callback){
if(iframe.attachEvent) { iframe.attachEvent(‘onload’,function(){
callback & callback(); }); }else { iframe.onload = function(){ callback
& callback(); } } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/*
* 跨域 父页想调用子页的的函数
*/
document.domain = ‘example.com’;
var iframe = document.getElementById(‘iframe2’);
iframeIsLoad(iframe,function(){
    var obj = iframe.contentWindow;
         obj.child();
});
function iframeIsLoad(iframe,callback){
        if(iframe.attachEvent) {
            iframe.attachEvent(‘onload’,function(){
                callback & callback();
            });
        }else {
            iframe.onload = function(){
                callback & callback();
            }
        }
}

若果未来def.html页面有个child函数 代码如下:

JavaScript

document.domain = ‘example.com’; function
child(){console.log(‘俺是子页’);}

1
2
document.domain = ‘example.com’;
function child(){console.log(‘我是子页’);}

就能够跨域调用了 不管是子页面调用父页面 如故父页面调用子页面。一切ok!

三:是见仁见智主域跨域;

固然google有两种艺术有关区别主域上的跨域问题 有通过location.hash方法依旧window.name方法恐怕html5及flash等等,

但是自身觉着上边iframe这种方法值得学习下,如下图所示:

银河国际网址手机版 4

域a.com的页面request.html(即

思路:要兑现a.com域下的request.html页面伏乞域b.com下的process.php,能够将呼吁参数通过url传给response.html,由response.html向process.php发起真正的ajax诉求(response.html与process.php都属于域b.com),然后将回来的结果通过url传给proxy.html,最终由于proxy.html和request.html是在同个域下,所以能够在proxy.html利用window.top 将结果回到在request.html实现真正的跨域。

ok, 先看看页面结构

a.com域下有:

 request.html  proxy.html

1
2
 request.html
 proxy.html

b.com域下有:

response.html Process.php

1
2
3
response.html
 
Process.php

先来探视request.html页面如下:

XHTML

<!DOCTYPE HTML> <html> <head> <title> New
Document </title> </head> <body> <p
id=”result”>这里将会填上响应的结果</p> <a id=”sendBtn”
href=”javascript:void(0)”>点击,发送跨域诉求</a> <iframe
id=”serverIf” style=”display:none”></iframe> <script>
document.getElementById(‘sendBtn’).onclick = function() { var url =
”, fn = ‘GetPerson’,
//那是概念在response.html的措施 reqdata = ‘{“id” : 24}’,
//那是央求的参数 callback = “CallBack”;
//那是呼吁全经过做到后执行的回调函数,施行最终的动作 CrossRequest(url,
fn, reqdata, callback); //发送乞请 } function
CrossRequest(url,fn,reqdata,callback) { var server =
document.getElementById(‘serverIf’); server.src = url + ‘?fn=’
+encodeULacrosseIComponent(fn) + “&data=” +encodeU中华VIComponent(reqdata) +
“&callback=”+encodeUPAJEROIComponent(callback); } //回调函数 function
CallBack(data) { var str = “My name is ” + data.name + “. I am a ” +
data.sex + “. I am ” + data.age + ” years old.”;
document.getElementById(“result”).innerHTML = str; } </script>
</body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE HTML>
<html>
<head>
  <title> New Document </title>
</head>
<body>
    <p id="result">这里将会填上响应的结果</p>
    <a id="sendBtn" href="javascript:void(0)">点击,发送跨域请求</a>
    <iframe id="serverIf" style="display:none"></iframe>
 
    <script>
        document.getElementById(‘sendBtn’).onclick = function() {
            var url = ‘http://b.com/demo/ajax/ajaxproxy/reponse.html’,
                fn = ‘GetPerson’,          //这是定义在response.html的方法
                reqdata = ‘{"id" : 24}’,   //这是请求的参数
                callback = "CallBack";     //这是请求全过程完成后执行的回调函数,执行最后的动作
 
            CrossRequest(url, fn, reqdata, callback);  //发送请求
        }
 
        function CrossRequest(url,fn,reqdata,callback) {
            var server = document.getElementById(‘serverIf’);
            server.src = url + ‘?fn=’ +encodeURIComponent(fn) + "&data=" +encodeURIComponent(reqdata) + "&callback="+encodeURIComponent(callback);
        }
        //回调函数
        function CallBack(data) {
            var str = "My name is " + data.name + ". I am a " + data.sex + ". I am " + data.age + " years old.";
             document.getElementById("result").innerHTML = str;
        }
    </script>
</body>
</html>

其一页面其实正是要报告response.html:作者要令你实践你定义好的主意GetPerson,而且要用小编给您的参数'{“id” : 24}’。

response.html纯粹是承担将CallBack那一个主意名传递给下壹个人兄长proxy.html,而proxy.html得到了CallBack这一个措施名就能够试行了,

因为proxy.html和request.html是同域的。

response.html代码如下:

XHTML

<!DOCTYPE HTML> <html> <head> <title> New
Document </title> </head> <body> <iframe
id=”proxy”></iframe> <script> // 通用方法 ajax诉求function _request (reqdata,url,callback) { var xmlhttp;
if(window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); }else {
xmlhttp = new ActiveXObject(“Microsoft.XMLHTTP”); }
xmlhttp.onreadystatechange = function(){ if(xmlhttp.readyState == 4 &&
xmlhttp.status == 200) { var data = xmlhttp.responseText;
callback(data); } } xmlhttp.open(‘POST’,url);
xmlhttp.setRequestHeader(“Content-Type”, “application/json;
charset=utf-8”); xmlhttp.send(reqdata); } // 通用方法 获取url参数
function _getQuery(key) { var query = location.href.split(‘?’)[1],
value = decodeURIComponent(query.split(key + “=”)[1].split(“&”)[0]);
return value; } //向process.php发送ajax请求 function
GetPerson(reqdata,callback) { var url =
”; var fn = function(data)
{ var proxy = document.getElementById(‘proxy’); proxy.src =
“” +
encodeURIComponent(data) + “&callback=” + encodeURIComponent(callback);
}; _request(reqdata, url, fn); } (function(){ var fn =
_getQuery(‘fn’), reqdata = _getQuery(“data”), callback =
_getQuery(“callback”); eval(fn + “(‘” + reqdata +”‘, ‘” + callback +
“‘)”); })(); </script> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE HTML>
<html>
<head>
  <title> New Document </title>
</head>
<body>
     <iframe id="proxy"></iframe>
    <script>
        // 通用方法 ajax请求
        function _request (reqdata,url,callback) {
            var xmlhttp;
            if(window.XMLHttpRequest) {
                xmlhttp = new XMLHttpRequest();
            }else {
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
 
            xmlhttp.onreadystatechange = function(){
                if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    var data = xmlhttp.responseText;
                    callback(data);
                }
            }
            xmlhttp.open(‘POST’,url);
            xmlhttp.setRequestHeader("Content-Type", "application/json; charset=utf-8");
            xmlhttp.send(reqdata);
        }
 
        // 通用方法 获取url参数
        function _getQuery(key) {
            var query = location.href.split(‘?’)[1],
                value = decodeURIComponent(query.split(key + "=")[1].split("&")[0]);
            return value;
        }
 
        //向process.php发送ajax请求
        function GetPerson(reqdata,callback) {
            var url = ‘http://b.com/demo/ajax/ajaxproxy/process.php’;
            var fn = function(data) {
                var proxy = document.getElementById(‘proxy’);
                proxy.src = "http://a.com/demo/ajax/ajaxproxy/Proxy.html?data=" + encodeURIComponent(data) + "&callback=" + encodeURIComponent(callback);
            };
            _request(reqdata, url, fn);
        }
 
        (function(){
            var fn = _getQuery(‘fn’),
                reqdata = _getQuery("data"),
                callback = _getQuery("callback");
           eval(fn + "(‘" + reqdata +"’, ‘" + callback + "’)");
        })();
    </script>
</body>
</html>

那边其实就是抽出来自request.html的央浼得到须要参数和措施后向服务器process.php发出真正的ajax央求,然后将从服务器重返的数额以及从request.html传过来的回调函数名传递给proxy.html。 

接下去看看php代码如下,其实正是想重临三个json数据:

PHP

<?php $data = json_decode(file_get_contents(“php://input”));
header(“Content-Type: application/json; charset=utf-8”); echo (‘{“id” :
‘ . $data->id . ‘, “age” : 24, “sex” : “boy”, “name” :
“huangxueming”}’); ?>

1
2
3
4
5
<?php
    $data = json_decode(file_get_contents("php://input"));
    header("Content-Type: application/json; charset=utf-8");
    echo (‘{"id" : ‘ . $data->id . ‘, "age" : 24, "sex" : "boy", "name" : "huangxueming"}’);
?>

最终正是proxy.html代码:

XHTML

<!DOCTYPE HTML> <html> <head> <title> New
Document </title> </head> <body> <script>
function _getUrl(key) {//通用方法,获取ULX570L参数 var query =
location.href.split(“?”)[1], value =
decodeURIComponent(query.split(key + “=”)[1].split(“&”)[0]); return
value; } (function() { var callback = _getUrl(“callback”), data =
_getUrl(“data”); eval(“window.top.” + decodeURIComponent(callback) +
“(” + decodeURIComponent(data) + “)”); })(); </script>
</body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE HTML>
<html>
<head>
  <title> New Document </title>
</head>
<body>
    <script>
         function _getUrl(key) {//通用方法,获取URL参数
                       var query = location.href.split("?")[1],
                value = decodeURIComponent(query.split(key + "=")[1].split("&")[0]);
                    return value;
               }
         (function() {
             var callback = _getUrl("callback"),
                 data = _getUrl("data");
             eval("window.top." + decodeURIComponent(callback) + "(" + decodeURIComponent(data) + ")");
         })();
    </script>
</body>
</html>

此间也是最终一步了,proxy终于得到了request.html透过response.html传过来的回调函数名以及从response.html间接传过来的响应数据,

应用window.top施行request.html里定义的回调函数。

四:iframe中度自适应的难点。

 
iframe中度自适应分为2种,一种是同域下自适应  别的一种是跨域下自适应,下边大家来探视同域下iframe高度自适应的难点。

   1. 同域下iframe中度自适应的主题素材:

     思路:获取被嵌套iframe成分,通过JavaScript获得被嵌套页面最终高度,然后在主页面进行安装来促成。

     假若大家demo有iframe1.html和iframe2.html 下边贴上iframe1.html代码如下:

XHTML

<!DOCTYPE HTML> <html> <head> <title> New
Document </title> <style> *{margin:0;padding:0;}
</style> </head> <body> <iframe
src=””
style=”width:100%;border:1px solid #333;” frameborder=”0″
id=”iframe”></iframe> <script> window.onload = function()
{ var iframeid = document.getElementById(‘iframe’); if(iframeid &&
!window.opera) { if(iframeid.contentDocument &&
iframeid.contentDocument.body.offsetHeight) { iframeid.height =
iframeid.contentDocument.body.offsetHeight; }else if(iframeid.Document
&& iframeid.Document.body.scrollHeight){ iframeid.height =
iframeid.Document.body.scrollHeight; } } } </script> </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE HTML>
<html>
<head>
  <title> New Document </title>
  <style>
    *{margin:0;padding:0;}
  </style>
</head>
 
<body>
    <iframe src="http://a.com/demo/ajax/iframeheight/iframe2.html" style="width:100%;border:1px solid #333;" frameborder="0" id="iframe"></iframe>
 
    <script>
        window.onload = function() {
            var iframeid = document.getElementById(‘iframe’);
            if(iframeid && !window.opera) {
                if(iframeid.contentDocument && iframeid.contentDocument.body.offsetHeight) {
                    iframeid.height = iframeid.contentDocument.body.offsetHeight;
                }else if(iframeid.Document && iframeid.Document.body.scrollHeight){
                    iframeid.height = iframeid.Document.body.scrollHeight;
                }
            }
        }
    </script>
</body>
</html>

iframe2.html代码如下:

XHTML

<!DOCTYPE HTML> <html> <head> <title> New
Document </title> <style> *{margin:0;padding:0;}
</style> </head> <body> <div
style=”height:500px;”></div> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE HTML>
<html>
<head>
  <title> New Document </title>
  <style>
    *{margin:0;padding:0;}
  </style>
</head>
 
<body>
    <div style="height:500px;"></div>
</body>
</html>

就足以动态设置iframe1页面的莫斯中国科学技术大学学为iframe2的惊人了。

2. 跨域下iframe中度自适应的难点。

首先大家了解iframe跨域大家是不可能用上面js方式来调节了,所以我们只能用个中间键,大家能够在a.com域下iframe1.html页面嵌套几个b.com域下的iframe2.html页面,然后自个儿在iframe2.html页面嵌套个和iframe1.html同样域的iframe3.html页面了,那样的话 iframe1.html和iframe3.html就足以无障碍的张开通讯了,因为页面iframe2.html嵌套iframe3.html,所以iframe2.html方可改写iframe3.html的href值。

 iframe第11中学的内容:

 iframe1.html剧情根本接受iframe3.html页面传过来的内容还要去做到相应的操作。iframe1.html代码如下:

XHTML

<iframe src=””
style=”width:400px;height:200px;” id=”iframe”></iframe>
<script> var ifr_el = document.getElementById(“iframe”); function
getIfrData(data){ ifr_el.style.height = data+”px”; } </script>

1
2
3
4
5
6
7
<iframe src="http://b.com/demo/ajax/iframeheight/iframe2.html" style="width:400px;height:200px;" id="iframe"></iframe>
<script>
   var ifr_el = document.getElementById("iframe");
   function getIfrData(data){
    ifr_el.style.height = data+"px";
   }
</script>

iframe2.html中的内容:

iframe2.html内容是怎么把值传给iframe3.html页面,刚才说了是将值传递到iframe3.html页面包车型地铁href中,所以倘若修改iframe的src就可以,因为不用刷新C页面,所以能够用过hash的办法传递给iframe3.html页面.iframe2.html代码如下:

JavaScript

<!DOCTYPE HTML> <html> <head> <title> New
Document </title> <style> *{margin:0;padding:0;}
</style> </head> <body> <iframe id=”iframe”
src=”” width=”0″
height=”230px”></iframe> <script> var oldHeight = 0,
ifr_el = document.getElementById(“iframe”); t && clearInterval(t); var
t = setInterval(function(){ var height = document.body.scrollHeight;
if(oldHeight != height) { oldHeight = height; ifr_el.src += ‘#’
+oldHeight; } },200); </script> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE HTML>
<html>
<head>
  <title> New Document </title>
  <style>
    *{margin:0;padding:0;}
  </style>
</head>
<body>
    <iframe id="iframe" src="http://a.com/demo/ajax/iframeheight/iframe3.html" width="0" height="230px"></iframe>
    <script>
        var oldHeight = 0,
              ifr_el = document.getElementById("iframe");
 
        t && clearInterval(t);
        var t = setInterval(function(){
            var height = document.body.scrollHeight;
            if(oldHeight != height) {
                oldHeight = height;
                ifr_el.src += ‘#’ +oldHeight;
            }
        },200);
    </script>
</body>
</html>

能够看出 暗中认可情状下 iframe1.html 页面我给iframe2.html的中度是200像素,
不过在iframe2.html自作者给iframe3.html中度是230像素,那么符合规律景况下是有滚动条的,那么今后自己是想在iframe2.html收获滚动条的冲天,把中度传给通过iframe3.html的src里面去,然后在iframe3.html页面里获得这么些惊人值 传给iframe1.html(因为iframe1.html和iframe3.html是同域的),所以iframe1.html能取到这么些惊人值,再设置下自家的惊人正是以此值就ok了。iframe3.html页面包车型客车独占鳌头功效正是收到iframe2.html页面通过href传进来的值而且传递给iframe1.html页面,可到iframe2.html页面传来的值能够经过三个电磁照顾计时器不停去查看location.href是 否被转移,但是那样以为效能相当的低,还或者有个主意便是在新的浏览器中通过onhashchange事件 (IE8+,Chrome5.0+,Firefox3.6+,Safari5.0+,Opera10.6+)来监听href的改造。

iframe3.html代码如下:

JavaScript

<script> var oldHeight = 0; t && clearInterval(t); var t =
setInterval(function(){ var height = location.href.split(‘#’)[1];
if(height && height != oldHeight) { oldHeight = height;
if(window.parent.parent.getIfrData) {
window.parent.parent.getIfrData(oldHeight); } } },200); </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
    var oldHeight = 0;
    t && clearInterval(t);
    var t = setInterval(function(){
        var height = location.href.split(‘#’)[1];
        if(height && height != oldHeight) {
            oldHeight = height;
            if(window.parent.parent.getIfrData) {
                window.parent.parent.getIfrData(oldHeight);
            }
        }
    },200);
</script>

那样就能够消除由此跨域实现iframe自适应中度的标题了。

五:本地存款和储蓄cookie,sessionStorage, localStorage相比较及选拔

一:Cookie

1. 什么是cookie?

     库克ie是在客商端用于存款和储蓄会话音信的,客户诉求页面在web服务器与浏览器之间传递。每当同一台微机通过浏览器乞求有些页面时,就能发送那一个 cookie。

 2. cookie的限制?

     1. Cookie的数目大小限制只可以为4kb数据,要是数据长度当先4kb数据,领前后相继的数额将重临空字符串。

     2. Cookie是以文件情势储存在顾客端计算机中,查看和修改cookie很有利,但是安全性方面倒霉,因而着重的数额毫无接纳cookie来存款和储蓄。

     3. 库克ie是有 保质期概念的,即使想要cookie存款和储蓄多久,能够设置cookie的光阴,一般的动静下,cookie的生命周期是在游历器关闭的时候失效。

     4. Cookie是有域的概念的,在差别的域下,cookie不可能相互利用,cookie对于那些域是平价的,全部向该域发送的伸手中都会含有那些cookie 的新闻的,

    那一个值能够满含子域(subdomain 如www.zuixiandao.cn) ,也可以不分包它(如.zuixiandao.cn, 对于有所的zuixiandao.cn的享有子域都有效). 

    若无明显的内定,那么这些域会被认作来自设置cookie的那些域。

     5. Cookie路线的定义:对于内定域中的这么些路线,应该向服务器发送cookie,比如大家得以钦赐cookie独有从

     6. Cookie失效时间的定义:表示cookie几时应该被去除,私下认可景况下,浏览器会话截至时就要删除全数的cookie,可是也足以协和安装

 删除时间的。那个值是个金霉素T格式的日子(Wdy DD-Mon-YYYY HH:MM:SS 核糖霉素T),用于钦点相应删除cookie的确切时间,因而,

 cookie可在浏览器关闭后如故保留在顾客的机械上(同贰个浏览器,差别的浏览器不可能保存),假若设置的日子是过期的日子,那么cookie马上删掉。

      7. Cookie平安标识 钦赐后,cookie只有在利用SSL连接的时候才发送到服务器。举例:cookie消息只可以发送给, 

  而

二: javascript中的cookie

 1. Javascript中的cookie是 一多种由支行隔绝的名-值对,如上边包车型大巴Taobao的cookie,如下:

document.cookie = “isg=E5AA5F2CEE8AA93BB351D1601F7B218E; thw=cn; _med=dw:1920&dh:1080&pw:1920&ph:1080&ist:0; v=0; t=1292efa78d867ff6275e6c5cb971bed7”;

     2. 设置cookie的超时。

         expires;   // 设置cookie的超时的小运

         以下设置 cookie 在 365天后超时;

         var date = new Date();

         date.setTime(date.getTime()+365*24*3600*1000);

         document.cookie = ‘key:value;expires =’ + date.toGMTString();

上面是安装cookie, 删除cookie,及 获取cookie的卷入代码如下:

JavaScript

// 获取具备的cookies function getCookies() { var allCookies =
document.cookie; return decodeUOdysseyIComponent(allCookies); } //
获取钦命的cookie function getOneCookie(name) { var allCookies =
document.cookie.split(“;”); for(var i = 0, ilen = allCookies.length; i
< ilen; i++) { var temp = allCookies[i].split(“=”);
if($.trim(decodeURIComponent(temp[0])) == name) { return
decodeURIComponent(temp[1]); } } return -1; } // 增加cookie
保藏期是一年 function addCookie(name,value,expires,path,domain,secure) {
var cur库克ie = encodeUCR-VIComponent(name) + ‘=’ +
encodeU翼虎IComponent(value); if(expires instanceof Date) { curCookie +=
‘;expires =’ + expires.to丙胺博莱霉素TString(); }else { var date = new Date();
date.setTime(date.getTime()+365*24*3600*1000); curCookie += ‘;expires
=’ + date.toGMTString(); } if(path) { curCookie += “; path=” + path; }
if(domain) { curCookie += “; domain=” +domain; } if(secure) { curCookie
+= “; secure”; } document.cookie = curCookie; } // 删除cookie function
removeCookie(name,path,domain,secure) { addCookie(name,””,new
Date(0),path,domain,secure); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
// 获取所有的cookies
function getCookies() {
    var allCookies = document.cookie;
    return decodeURIComponent(allCookies);
}
// 获取指定的cookie
function getOneCookie(name) {
    var allCookies = document.cookie.split(";");
    for(var i = 0, ilen = allCookies.length; i < ilen; i++) {
        var temp = allCookies[i].split("=");
        if($.trim(decodeURIComponent(temp[0])) == name) {
            return decodeURIComponent(temp[1]);
         }
    }
    return -1;
}
// 添加cookie 有效期是一年
function addCookie(name,value,expires,path,domain,secure) {
    var curCookie = encodeURIComponent(name) + ‘=’ + encodeURIComponent(value);
    if(expires instanceof Date) {
        curCookie += ‘;expires =’ + expires.toGMTString();
    }else {
        var date = new Date();                
        date.setTime(date.getTime()+365*24*3600*1000);
        curCookie += ‘;expires =’ + date.toGMTString();
    }
    if(path) {
        curCookie += "; path=" + path;
    }
    if(domain) {
        curCookie += "; domain=" +domain;
    }
    if(secure) {
        curCookie += "; secure";
    }
    document.cookie = curCookie;
}
// 删除cookie
function removeCookie(name,path,domain,secure) {
     addCookie(name,"",new Date(0),path,domain,secure);
}

上边我们来做一个小要求,举个例子一个登录页面,有 有户名,密码,记住密码,及展示cookie和删除cookie开关。当小编点击记住密码的时候,那么当本身第重启开页面时候,只要输入客商名,密码会自动填充,当然大家也得以点击删除cookie按键实行删除,如下代码:

HTML代码:

XHTML

<h2>cookie介绍</h2> <p>
<label>顾客名:</label> <input type=”text”
class=”userName” id=”userName”/> </p> <p>
<label>密码:</label> <input type=”password”
id=”password”> </p> <p>
<label>记住密码:</label> <input type=”checkbox”
id=”remember”/> </p> <input value=”删除” type=”button”
id=”del库克ie”> <input type=”button” value=”呈现cookie”
id=”showpassword”>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<h2>cookie介绍</h2>
<p>
     <label>用户名:</label>
     <input type="text" class="userName" id="userName"/>
</p>
<p>
     <label>密码:</label>
     <input type="password" id="password">
</p>
<p>
     <label>记住密码:</label>
     <input type="checkbox" id="remember"/>
</p>
<input value="删除" type="button" id="delCookie">  
<input type="button" value="显示cookie" id="showpassword">

JS代码如下:

JavaScript

<script> // 获取具有的cookies function getCookies() { var
allCookies = document.cookie; return allCookies; } // 获取内定的cookie
function getOneCookie(name) { var allCookies =
document.cookie.split(“;”); for(var i = 0, ilen = allCookies.length; i
< ilen; i++) { var temp = allCookies[i].split(“=”); if(temp[0] ==
decodeURIComponent(name)) { return decodeURIComponent(temp[1]); } }
return -1; } // 增多cookie 保质期是一年 function
addCookie(name,value,expires,path,domain,secure) { var curCookie =
encodeU传祺IComponent(name) + ‘=’ + encodeUCRUISERIComponent(value); if(expires
instanceof Date) { curCookie += ‘;expires =’ + expires.to罗红霉素TString();
}else { var date = new Date();
date.setTime(date.getTime()+365*24*3600*1000); curCookie += ‘;expires
=’ + date.toGMTString(); } if(path) { curCookie += “; path=” + path; }
if(domain) { curCookie += “; domain=” +domain; } if(secure) { curCookie
+= “; secure”; } document.cookie = curCookie; } // 删除cookie function
removeCookie(name,path,domain,secure) { addCookie(name,””,new
Date(0),path,domain,secure); }
$(“#userName”).unbind(‘blur’).bind(‘blur’,function(){ var val =
$(this).val(); if(val) { var curCookie = getOneCookie(val); if(curCookie
!= -1) { $(“#password”).val(curCookie); } } }); // 记住密码
$(“#remember”).unbind(‘click’).bind(‘click’,function(){
if(document.getElementById(“remember”).checked) {
if($(“#userName”).val() && $(“#password”).val()) {
addCookie($(“#userName”).val(),$(“#password”).val()); alert(“Saved!”);
} } }); // 删除cookie
$(“#delCookie”).unbind(‘click’).bind(‘click’,function() {
if($(“#userName”).val()) { removeCookie($(“#userName”).val());
alert(getCookies()); }else { alert(“顾客名字为空”); } }); // 显示cookie
$(“#showpassword”).unbind(‘click’).bind(‘click’,function(){
if($(“#userName”).val()) { var curCookie =
getOneCookie($(“#userName”).val()); if(curCookie != -1) {
alert(curCookie); }else { alert(“没有cookie”); } }else {
alert(“没有cookie”); } }); </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<script>
        // 获取所有的cookies
        function getCookies() {
            var allCookies = document.cookie;
            return allCookies;
        }
        // 获取指定的cookie
        function getOneCookie(name) {
            var allCookies = document.cookie.split(";");
            for(var i = 0, ilen = allCookies.length; i < ilen; i++) {
                var temp = allCookies[i].split("=");
                if(temp[0] == decodeURIComponent(name)) {
                    return decodeURIComponent(temp[1]);
                }
            }
            return -1;
        }
        // 添加cookie 有效期是一年
        function addCookie(name,value,expires,path,domain,secure) {
            var curCookie = encodeURIComponent(name) + ‘=’ + encodeURIComponent(value);
            if(expires instanceof Date) {
                curCookie += ‘;expires =’ + expires.toGMTString();
            }else {
                var date = new Date();
                date.setTime(date.getTime()+365*24*3600*1000);
                curCookie += ‘;expires =’ + date.toGMTString();
            }
            if(path) {
                curCookie += "; path=" + path;
            }
            if(domain) {
                curCookie += "; domain=" +domain;
            }
            if(secure) {
                curCookie += "; secure";
            }
            document.cookie = curCookie;
        }
        // 删除cookie
        function removeCookie(name,path,domain,secure) {
            addCookie(name,"",new Date(0),path,domain,secure);
        }
 
        $("#userName").unbind(‘blur’).bind(‘blur’,function(){
              var val = $(this).val();
              if(val) {
                 var curCookie = getOneCookie(val);
                 if(curCookie != -1) {
                    $("#password").val(curCookie);
                 }
              }
        });
        // 记住密码
        $("#remember").unbind(‘click’).bind(‘click’,function(){
            if(document.getElementById("remember").checked) {
                if($("#userName").val() && $("#password").val()) {
                    addCookie($("#userName").val(),$("#password").val());  
                    alert("Saved!");
                }
 
            }
        });
        // 删除cookie
        $("#delCookie").unbind(‘click’).bind(‘click’,function() {
            if($("#userName").val()) {
                removeCookie($("#userName").val());
                alert(getCookies());
            }else {
                alert("用户名为空");
            }
        });
 
        // 显示cookie
        $("#showpassword").unbind(‘click’).bind(‘click’,function(){
            if($("#userName").val()) {
                var curCookie = getOneCookie($("#userName").val());
                if(curCookie != -1) {
                    alert(curCookie);
                }else {
                    alert("没有cookie");
                }
 
            }else {
                alert("没有cookie");
            }
        });
</script>

Cookie的实例demo如下:

cookie

三:IE客户数据;

在IE5.0中,微软经过二个自定义行为引进了长久化客户数据的概念,顾客数量允许每一个文书档案最多128kb的多少,各个域名最多1MB的多寡,

要动用悠久化数据,首先必得如下所示,使用css在有个别成分上钦定userData行为:

 

IE顾客数量

 

本着IE有如下使用办法:

1. getAttribute(“key”) 获取钦命的属性值。

2. load(object) 从 userData 存款和储蓄区载入存款和储蓄的对象数据。

3. removeAttribute(“key”) 移除对象的钦点属性。

4. save(object) 将对象数据存款和储蓄到三个 userData 存款和储蓄区。

5. setAttribute(“key”,”value”) 设置钦赐的属性值。

大家一而再做三个demo来演示下在IE浏览器下的仓库储存的demo。

HTML代码如下:

XHTML

<div style=”behavior:url(#default#userData)”
id=”dataStore”>IE客户数量</div> <input value=”IE下保存数据”
type=”button” id=”IESave”> <input type=”button”
value=”IE下获取数据” id=”IEGet”> <input type=”button”
value=”IE下删除数据” id=”IERemove”>

1
2
3
4
<div style="behavior:url(#default#userData)" id="dataStore">IE用户数据</div>
<input value="IE下保存数据" type="button" id="IESave">
<input type="button" value="IE下获取数据" id="IEGet">
<input type="button" value="IE下删除数据" id="IERemove">

JS代码如下:

JavaScript

var dataStore = document.getElementById(“dataStore”);
$(“#IESave”).click(function(e){
dataStore.setAttribute(“name”,”tugenhua”);
dataStore.setAttribute(“book”,’111111′); dataStore.save(“bookInfo”); });
// IE下获取数据 $(“#IEGet”).click(function(){
dataStore.load(“bookInfo”); alert(dataStore.getAttribute(“name”));
alert(dataStore.getAttribute(“book”)); }); // IE下删除数据
$(“#IERemove”).click(function(){ dataStore.removeAttribute(“name”);
dataStore.removeAttribute(“book”); dataStore.save(“bookInfo”); });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var dataStore = document.getElementById("dataStore");
$("#IESave").click(function(e){
    dataStore.setAttribute("name","tugenhua");
    dataStore.setAttribute("book",’111111′);
    dataStore.save("bookInfo");
});
// IE下获取数据
$("#IEGet").click(function(){
    dataStore.load("bookInfo");
    alert(dataStore.getAttribute("name"));
    alert(dataStore.getAttribute("book"));
});
 
// IE下删除数据
$("#IERemove").click(function(){
    dataStore.removeAttribute("name");
    dataStore.removeAttribute("book");
    dataStore.save("bookInfo");
});

IE浏览器下的demo如下:

选用IE浏览器下查看效果 请点击本身!!

四:sessionStorage 和 localStorage 

Html5激增了八个地面存款和储蓄数据,分别是sessionStorage 和 localStorage.

浏览器支持程度如下:

银河国际网址手机版 5

只顾:IE8 及 以上都帮助 web storage。

   sessionStorage: 将数据保存在session对象中,所谓session,指客户浏览有些网址时,从进来网址到浏览器关闭的这段时日,约等于客商浏览那个网址所开销的时光。

       生命周期:指只在当下的窗口有效,张开三个新的同源窗口,大概说重启浏览器都失效。

       多少大小:能够保存5MB以至越来越多。

   localStorage: 将数据保存在顾客端本地的硬件配备(平时是指硬盘,但也足以是其它硬件设施),即使浏览器被关闭了,该数量依旧留存,后一次张开浏览器访问网址时照旧能够三番五次行使。不过,数据保存是按区别的浏览器分别实行的,也正是说,要是张开其余浏览器,是读取不到在那几个浏览器中保留的数指标。

     生命周期:数据直接保留在硬盘中。长久性保存(但是不一样的浏览器保存的数目,是不能够通用的)。

     数据大小:能够保存5MB以致越来越多的数量。

    1. cookie 与 sessionStorage 及 localStorage的区别;   

        共同点:都是在客商端存款和储蓄数据,且是同源的。

    区别:

存款和储蓄大小不均等;cookie存款和储蓄数据最大不得不为4kb,而sessionStorage与localStorage能够保存5MB以致更繁多据。

  Cookie数据始终在同源的http央浼中带走,即cookie在浏览器与服务器之间来回传递,而sessionStorage与localStorage不会自动发给服务端,仅在本土保存。

数据保藏期不相同;sessionStorage仅在方今浏览器窗口未关门从前有效(同源的新窗口不见效),localStorage仅在当前的浏览器下恒久生效(区别的浏览器不可能分享数据),不管关闭了 重新展开的 依旧一蹴而就的。Cookie只在安装的cookie过期时间在此以前向来有效,纵然窗口恐怕浏览器关闭,或然展开新的同源窗口。

功能域不相同;sessionStorage不在不相同的浏览器窗口中国共产党享,便是同贰个页面,localStorage在有着的同源窗口中都以分享的(只在一样的浏览器下),cookie在颇具的同源窗口都以分享的(仅在同三个浏览器中)。

      SessionStorage与LocalStorage他们都兼备同样的章程;

      1. setItem存储value

         用法:.setItem( key, value),代码如下:

         localStorage.setItem(key,value):将value存储到key字段

      2. getItem获取value

          用法:.getItem(key) 代码如下:

          localStorage.getItem(key):获取钦赐key本地存款和储蓄的值

      3. removeItem删除key

          用法:.removeItem(key),代码如下:

          localStorage.removeItem(key):删除钦命key本地存款和储蓄的值

      4. clear清除全体的key/value

          用法:.clear(),代码如下:

          localStorage.clear();  清除全体的数码(firefox除了那么些之外)

      它将去除全数同源的当地存款和储蓄的localStorage数据

      而对此Session Storage,它只清空当前对话存款和储蓄的数码。

      sessionStorage也许有上边同样的章程;

上面大家来采纳sessionStorage及 localStorage 来练习下,来做个demo。如下:

HTML代码如下:

XHTML

<h1>web Storage实列</h1> <p id=”msg”></p>
<input type=”text” id=”input” /> <input type=”button”
value=”保存数据” id=”saveData”/> <input type=”button”
value=”读取数据” id=”readData”/> <input type=”button”
value=”删除数据” id=”removeData”/> <input type=”button”
value=”清除全部的数目” id=”clearData”/>

1
2
3
4
5
6
7
<h1>web Storage实列</h1>
<p id="msg"></p>
<input type="text" id="input" />
<input type="button" value="保存数据" id="saveData"/>
<input type="button" value="读取数据" id="readData"/>
<input type="button" value="删除数据" id="removeData"/>
<input type="button" value="清除所有的数据" id="clearData"/>

页面上八个input输入框,当自家点击 保存数据 按键后 分别采取sessionStorage和localStorage 把值保存起来,当本人点击 读取数据 开关后 读取数据,分别在差别的浏览器照旧新的同源窗口 或然关闭浏览器窗口 重新展开新窗口,来分别寻访里面包车型地铁分别,分裂上面已经计算了,下边大家来看看JS代码如下:

JavaScript

<script> // sessionStorage demo
$(“#saveData”).unbind(‘click’).bind(‘click’,function(){ var inputVal =
$(“#input”).val(); sessionStorage.setItem(“message”,inputVal);
//localStorage.setItem(“message”,inputVal); });
$(“#readData”).unbind(“click”).bind(‘click’,function(){ var msg =
sessionStorage.getItem(“message”); //var msg =
localStorage.getItem(“message”); $(“#msg”).html(msg); });
$(“#removeData”).unbind(‘click’).bind(‘click’,function(){
sessionStorage.removeItem(“message”);
//localStorage.removeItem(“message”); });
$(“#clearData”).unbind(‘click’).bind(‘click’,function(){
sessionStorage.clear(); //localStorage.clear(); }); </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script>
        // sessionStorage demo
        $("#saveData").unbind(‘click’).bind(‘click’,function(){
            var inputVal = $("#input").val();
            sessionStorage.setItem("message",inputVal);
            //localStorage.setItem("message",inputVal);
        });
        $("#readData").unbind("click").bind(‘click’,function(){
            var msg = sessionStorage.getItem("message");
            //var msg = localStorage.getItem("message");
            $("#msg").html(msg);
        });
        $("#removeData").unbind(‘click’).bind(‘click’,function(){
            sessionStorage.removeItem("message");
            //localStorage.removeItem("message");
        });
        $("#clearData").unbind(‘click’).bind(‘click’,function(){
            sessionStorage.clear();
            //localStorage.clear();
        });
</script>

如上的代码,大家前日后续来拜访效果如下:使用

sessionStorage效果请点击:

运用localStorage效果请点击:

大家还是可以做一些繁杂的应用,比方如下五个表格有一部分字段,譬喻姓名,email,tel,及备注字段,大家先保存到地面去,然后遵照姓名这些字段举行寻觅就可以查找到数量到,大家得以叫做那是回顾的地面数据库,如下代码:

XHTML

<table> <tr> <td>姓名:</td> <td>
<input type=”text” id=”name”/> </td> </tr> <tr>
<td>EMALL:</td> <td> <input type=”text”
id=”email”/> </td> </tr> <tr>
<td>电话号码:</td> <td> <input type=”text”
id=”tel”/> </td> </tr> <tr>
<td>备注:</td> <td> <input type=”text”
id=”memo”/> </td> </tr> <tr>
<td>保存</td> <td> <input type=”button” id=”save”
value=”保存”/> </td> </tr> </table> <p>
检索:<input type=”text” id=”file”/> <input type=”button”
id=”find” value=”检索”/> </p> <p id=”msg”></p>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<table>
    <tr>
        <td>姓名:</td>
        <td>
            <input type="text" id="name"/>
        </td>
    </tr>
    <tr>
        <td>EMALL:</td>
        <td>
            <input type="text" id="email"/>
        </td>
    </tr>
    <tr>
        <td>电话号码:</td>
        <td>
            <input type="text" id="tel"/>
        </td>
    </tr>
    <tr>
        <td>备注:</td>
        <td>
            <input type="text" id="memo"/>
        </td>
    </tr>
    <tr>
        <td>保存</td>
        <td>
           <input type="button" id="save" value="保存"/>
        </td>
    </tr>
</table>
<p>
     检索:<input type="text" id="file"/>
     <input type="button" id="find" value="检索"/>
</p>
<p id="msg"></p>

JS代码如下:

JavaScript

// 保存数据 $(“#save”).unbind(‘click’).bind(‘click’,function(){ var
data = new Object; data.name = $(“#name”).val(); data.email =
$(“#email”).val(); data.tel = $(“#tel”).val(); data.memo =
$(“#memo”).val(); var str = JSON.stringify(data);
localStorage.setItem(data.name,str); alert(“数据现已保存”); }); //
检索数据 $(“#find”).unbind(‘click’).bind(‘click’,function(){ var find =
$(“#file”).val(); var str = localStorage.getItem(find); var data =
JSON.parse(str); var result = “姓名:” + data.name + “</br>”;
result += “Email: ” + data.email + “</br>”; result += “tel:” +
data.tel + “</br>”; result += “备注:” + data.memo +
“</br>”; $(“#msg”).html(result); });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//  保存数据
$("#save").unbind(‘click’).bind(‘click’,function(){
     var data = new Object;
     data.name = $("#name").val();
     data.email = $("#email").val();
     data.tel = $("#tel").val();
     data.memo = $("#memo").val();
     var str = JSON.stringify(data);
     localStorage.setItem(data.name,str);
     alert("数据已经保存");
});
 
// 检索数据
$("#find").unbind(‘click’).bind(‘click’,function(){
      var find = $("#file").val();
      var str = localStorage.getItem(find);
      var data = JSON.parse(str);
      var result = "姓名:" + data.name + "</br>";
          result += "Email: " + data.email + "</br>";
          result += "tel:" + data.tel + "</br>";
          result += "备注:" + data.memo + "</br>";
      $("#msg").html(result);
  });

demo如下效果:

请点击查看:

六:window.name 实现跨域数据传输。

Window.name 中的name值在差异的页面(以致不相同的域名)加载后照旧存在,何况数据量能够高达2MB。

Window.name 数据传输的基本原理:

同域下:Name在浏览器意况中是三个大局/window对象的性质,且当在ifrmae中加载页面时,name的属性值仍然保持不改变。

举例大家在同域下abc.example.com下 有2个页面 app.html 和 data.html

 App.html页面代码嵌套二个iframe data.html页面,代码如下:

XHTML

<iframe
src=””
id=”iframe”/>

1
<iframe src="http://abc.example.com/demo/tugenhua0707/storage/data.html" id="iframe"/>

里面data.html 页面 使用八个window.name = “111”;来保存数据。

   今后大家接下去在app.html页面 如何来调用同域下的data.html下的window.name的数额,首先我们先要获取到那几个iframe,然后判定iframe是还是不是加载完,加载完后就收获这么些iframe中的window.name, 

App.html JS的代码如下:

JavaScript

function iframeIsLoad(iframe,callback){ if(iframe.attachEvent) {
iframe.attachEvent(‘onload’,function(){ callback & callback(); }); }else
{ iframe.onload = function(){ callback & callback(); } } } var iframe =
document.getElementById(“iframe”); // 同域下
iframeIsLoad(iframe,function(){ var data = iframe.contentWindow.name;
alert(data); });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function iframeIsLoad(iframe,callback){
    if(iframe.attachEvent) {
         iframe.attachEvent(‘onload’,function(){
          callback & callback();
         });
    }else {
        iframe.onload = function(){
         callback & callback();
        }
    }
}
var iframe = document.getElementById("iframe");
// 同域下
iframeIsLoad(iframe,function(){
    var data = iframe.contentWindow.name;
        alert(data);
});

2. 跨域下:

   以后我们接纳hosts文件来绑定2个IP 来演示下跨域的景色,在hosts文件绑定如下:

   127.0.0.1  abc.example.com  和 127.0.0.1 def.example.com

   大家今天在 abc.example.com 新建三个app.html页面 里面或然嵌套四个 def.example.com域下的 data.html页面,代码如下:

   App.html代码如下:

XHTML

<iframe
src=””
id=”iframe”/>

1
<iframe src="http://def.example.com/demo/tugenhua0707/storage/data.html" id="iframe"/>

比方大家依旧和地方的不二等秘书技取多少的话 鲜明报错跨域了,现在大家是行使window.name消除跨域下数据的传输,那么大家能够利用二个同域abc.example.com下的代办页面proxy.html来做管理,通过在def.example.com域下的data.html页面加载三个与abc.example.com同域下的proxy.html页面, 将该对象页面设置iframe的name属性,因为app.html 与 proxy.html是在同一个域下,所以大家能够收获到。

在app.html页面 JS代码如下:

JavaScript

function iframeIsLoad(iframe,callback){ if(iframe.attachEvent) {
iframe.attachEvent(‘onload’,function(){ callback & callback(); }); }else
{ iframe.onload = function(){ callback & callback(); } } } var iframe =
document.getElementById(“iframe”); var state = 0; // 跨域下
iframeIsLoad(iframe,function(){ if (state === 1) { var data =
iframe.contentWindow.name; // 读取数据 alert(data); //弹出111 } else if
(state === 0) { state = 1; iframe.contentWindow.location =
“”; //
设置的代理文件 } });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function iframeIsLoad(iframe,callback){
    if(iframe.attachEvent) {
        iframe.attachEvent(‘onload’,function(){
             callback & callback();
        });
    }else {
        iframe.onload = function(){
             callback & callback();
         }
     }
}      
var iframe = document.getElementById("iframe");
var state = 0;
// 跨域下
iframeIsLoad(iframe,function(){
   if (state === 1) {
        var data = iframe.contentWindow.name;    // 读取数据
        alert(data);    //弹出111
   } else if (state === 0) {
        state = 1;
        iframe.contentWindow.location = "http://abc.example.com/demo/tugenhua0707/storage/proxy.html";    // 设置的代理文件
   }  
});

当然如上:大家只要name数据现已获得了的话,以往不必要的话,大家能够销毁掉,清空等操作。

七:使用HTML5中postMessage 达成ajax中的POST跨域难题

浏览器帮衬程度:IE8+,firefox4+,chrome8+  opera10+

     1. 首先,要想接受从其余的窗口发过来的音信,就必得对窗口对象的message事件进行监听,如下代码:

          window.addEventListener(“message”, function(){},false);

     2. 帮助,须求运用window对象的postMessage方法向其他窗口发送信息,该措施定义如下所示:

         otherWindow.postMessage(message, targetOrigin);

该措施应用2个参数,第四个参数为所发送的音讯文本,但也得以是其余javascript对象,第三个参数是接受音讯的靶子窗口的url地址

(比方:http:127.0.0.1:8080/) , 不过大家也能够在url地址字符串中利用通配符”*”, 钦定全部的域下,不过大家依旧提出采纳一定的域名下,

otherWindow为要发送窗口对象的援用。

Demo演示:

     若是未来自家在hosts文件下 ,绑定2 个域名如下:

     127.0.0.1       abc.example.com

     127.0.0.1        longen.example.com

最近一经在abc.example.com域下有三个abc.html页面,在longen.example.com域下有def.html页面,今后自身是希望这2个分裂域名下的页面

能相互通信,abc.html代码如下:

XHTML

<form> <p> <label for=”message”
style=”color:red;font-size:24px;”>给iframe子窗口发七个消息:</label>
<input type=”text” name=”message” value=”send” id=”message” />
<input type=”submit” value=”submit” id=”submit”/> </p>
</form> <h4>目的iframe传来的音讯:</h4> <p
id=”test”>暂无新闻</p> <iframe id=”iframe”
src=””
style=”display:none”></iframe>

1
2
3
4
5
6
7
8
9
10
<form>  
      <p>  
        <label for="message" style="color:red;font-size:24px;">给iframe子窗口发一个信息:</label>  
        <input type="text" name="message" value="send" id="message" />  
        <input type="submit" value="submit" id="submit"/>  
      </p>  
</form>  
<h4>目标iframe传来的信息:</h4>  
<p id="test">暂无信息</p>  
<iframe id="iframe" src="http://longen.example.com/webSocket/def.html" style="display:none"></iframe>

JS代码如下:

JavaScript

var win = document.getElementById(“iframe”).contentWindow;
document.getElementById(“submit”).onclick = function(e){
e.preventDefault();
win.postMessage(document.getElementById(“message”).value,””);
} window.add伊夫ntListener(“message”,function(e){ e.preventDefault();
document.getElementById(“test”).innerHTML = “从” + e.origin +
“这里传过来的音讯:n” + e.data; },false);

1
2
3
4
5
6
7
8
9
10
var win = document.getElementById("iframe").contentWindow;    
document.getElementById("submit").onclick = function(e){
    e.preventDefault();
    win.postMessage(document.getElementById("message").value,"http://longen.example.com");
}  
 
window.addEventListener("message",function(e){
     e.preventDefault();
     document.getElementById("test").innerHTML = "从" + e.origin + "那里传过来的消息:n" + e.data;
},false);

Def.html代码如下:

HTML代码:

XHTML

<form> <p> <label
for=”message”>给父窗口abc.html发个音讯:</label> <input
type=”text” name=”message” value=”send” id=”message” /> <input
type=”submit” /> </p> </form> <p
id=”test2″>暂无消息。</p>

1
2
3
4
5
6
7
8
<form>  
      <p>  
        <label for="message">给父窗口abc.html发个信息:</label>  
        <input type="text" name="message" value="send" id="message" />  
        <input type="submit" />  
      </p>  
</form>  
<p id="test2">暂无信息。</p>

JS代码如下:

JavaScript

var parentwin = window.parent;
window.addEventListener(“message”,function(e){
document.getElementById(“test2”).innerHTML = “从父窗口传来的域”
+e.origin + “,和内容数据:” + e.data;
parentwin.postMessage(‘HI!你给我发了”‘+e.data+'”。’,””);
},false);

1
2
3
4
5
var parentwin = window.parent;
window.addEventListener("message",function(e){
       document.getElementById("test2").innerHTML = "从父窗口传来的域" +e.origin + ",和内容数据:" + e.data;  
       parentwin.postMessage(‘HI!你给我发了"’+e.data+’"。’,"http://abc.example.com");
},false);

当自身点击abc.html页面后,能够看来功能如下,从def.html再次回到内容了。如下:

银河国际网址手机版 6

大家供给了解如下几条新闻:

1. 因而对window对象的message事件实行监听,能够接收新闻。

2. 透过拜访message事件的origin属性,能够拿走音信的发送源。

3. 经过拜见message事件的data属性,能够得到音信内容。

4. 用到postMessage方法发送新闻。

5. 因此拜会message事件的source属性,可以取得新闻发送源的窗口对象(正确的说,应该是窗口的代理对象)。

有了上面包车型客车着力知识点,大家得以拉开为落到实处ajax POST跨域的主题材料。

2. 利用postMessage 知识点消除 ajax中POST跨域难题。

 原理:原理也异常的粗略,假若我们的域名abc.example.com下的abc.html页面须求发ajax供给(跨域,域名称为longen.example.com)下,那么大家照旧先跨页面文书档案的样式,和地点同样,我们得以明天longen.example.com下 创立一个页面,举例叫def.html. 那么大家后天仍然在 abc.html 页面嵌入八个遮蔽域iframe src路径指向longen.example.com域下def,html页面。进度或许和跨文书档案类似,

 只是今日在def.html页面中 在window.onmessage 事件内写ajax乞请就能够,如下代码:

abc.example.com下的abc.html页面如下:

html代码和上边一样,上边是JS代码:

JavaScript

var win = document.getElementById(“iframe”).contentWindow;
document.getElementById(“submit”).onclick = function(e){
e.preventDefault();
win.postMessage(document.getElementById(“message”).value,””);
} window.addEventListener(“message”,function(e){ e.preventDefault();
alert(typeof e.data) var json = JSON.parse(e.data); console.log(json);
alert(json.url) },false);

1
2
3
4
5
6
7
8
9
10
11
12
var win = document.getElementById("iframe").contentWindow;      
document.getElementById("submit").onclick = function(e){
      e.preventDefault();
      win.postMessage(document.getElementById("message").value,"http://longen.example.com/");
}    
window.addEventListener("message",function(e){
    e.preventDefault();
    alert(typeof e.data)
    var json = JSON.parse(e.data);
     console.log(json);
    alert(json.url)
},false);

def.html代码如下:

JS代码如下:

JavaScript

//获取跨域数据 window.onmessage = function(e){ $.ajax({ url:
”, type:’POST’,
dataType:’text’, //data: {msg:e.data}, success: function(res) { var
parentwin = window.parent;
parentwin.postMessage(res,” } });
};

1
2
3
4
5
6
7
8
9
10
11
12
13
//获取跨域数据  
window.onmessage = function(e){  
     $.ajax({
          url: ‘http://longen.example.com/webSocket/test.php’,
          type:’POST’,
          dataType:’text’,
          //data: {msg:e.data},
          success: function(res) {
               var parentwin = window.parent;  
               parentwin.postMessage(res,"http://abc.example.com");//跨域发送数据  
          }
      });
};

test.php代码如下:

PHP

<?php $data=array( url =>1, name =>’2′, ‘xx-xx’=>”xx” );
echo json_encode($data); ?>

1
2
3
4
5
6
7
8
<?php
    $data=array(  
     url =>1,
      name =>’2′,
      ‘xx-xx’=>"xx"
);
echo json_encode($data);
?>

如上落实格局 就可以完毕ajax post跨域了。

1 赞 8 收藏 1
评论

银河国际网址手机版 1

深入精晓 JSON

2017/03/29 · JavaScript
· 2 评论 ·
JSON

原稿出处:
Apriltail   

大家先来看八个JS海南中国广播集团大的JS对象类别化成JSON字符串的标题,请问,以下JS对象通过JSON.stringify后的字符串是怎么着的?先不用急着复制粘贴到调节台,先本身张开二个代码编辑器可能纸,写写看,写完再去留神相比较你的主宰台出口,固然有误记得看完全文并商议,哈哈。

JavaScript

var friend={ firstName: ‘Good’, ‘lastName’: ‘Man’, ‘address’: undefined,
‘phone’: [“1234567”,undefined], ‘fullName’: function(){ return
this.firstName + ‘ ‘ + this.lastName; } };
JSON.stringify(friend);//这一行再次回到什么呢?

1
2
3
4
5
6
7
8
9
10
11
var friend={  
    firstName: ‘Good’,
    ‘lastName’: ‘Man’,
    ‘address’: undefined,
    ‘phone’: ["1234567",undefined],
    ‘fullName’: function(){
        return this.firstName + ‘ ‘ + this.lastName;
    }
};
 
JSON.stringify(friend);//这一行返回什么呢?

其次个难点,假设自个儿想在最终JSON字符串将那几个’friend’的人名全体制革新为大写字母,相当于把”Good”产生”GOOD”,把”Man”变成”MAN”,那么能够如何是好?

依赖上述四个难点,我们再追本溯源问一下,JSON终归是怎么样事物?为何JSON就是便于数据调换?JSON和JS对象的界别?JS中JSON.parseJSON.stringify和不遍布的toJSON,这么些函数的参数和管理细节到底是哪些的?

应接步入此次“深挖JSON之旅”,下文将从以下几个地方去掌握JSON:

  • 首先是对“JSON是一种轻量的数据沟通格式”的敞亮;
  • 然后来看平常被混为一谈的JSON和JS对象的区分;
  • 最终大家再来看JS中那多少个JSON相关函数具体的推行细节。

可望全文能让如此前的自家一样对JSON管窥蠡测的亲能说清楚JSON是怎么样,也能耳濡目染应用JSON,不看调整台就了解JS对象类别化成JSON字符串后输出是甚。

一、JSON是一种格式,基于文本,优于轻量,用于沟通数据

若果没有去过JSON的合法介绍能够去一下这里,官方介绍第一、二段已经很明亮地表明了JSON是怎么着,小编将JSON是怎样提炼成以下多少个地点:

1. 一种多少格式

怎么样是格式?正是专门的学业你的多少要怎么表示,举个栗子,有私人民居房叫“二百六”,身体高度“160cm”,身体重量“60kg”,未来您要将以此人的那么些信息传给别人照旧别的什么事物,你有很四种摘取:

  • 姓名“二百六”,身高“160cm”,体重“60kg”
  • name="二百六"&height="160cm"&weight="60kg"
  • 二百六16060
  • {"name":"二百六","height":160,"weight":60}
  • … …

上述全部采用,传递的数据是同等的,但是你可以观察格局是足以有滋有味的,那就是种种分裂格式化后的数码,JSON是个中一种表示方法。

2. 基于文本的多寡格式

JSON是依照文本的数码格式,相对于依附二进制的数额,所以JSON在传递的时候是传递符合JSON这种格式(至于JSON的格式是怎么样大家第一局地加以)的字符串,大家常会称呼“JSON字符串”。

3. 轻量级的数码格式

在JSON以前,有叁个数量格式叫xml,以后依旧大规模在用,不过JSON越发轻量,如xml内需使用非常多标签,像上面的事例中,你可以明显看到xml格式的数目中标签小编占领了多数空中,而JSON比较轻量,即一律数量,以JSON的格式占领的带宽越来越小,那在有雅量数码央浼和传递的事态下是有刚烈优势的。

4. 被广泛地用于数据调换

轻量已经是三个用来数据交换的优势了,但更首要的JSON是便于阅读、编写和机器分析的,即这几个JSON对人和机械都是上下一心的,而且又轻,独立于言语(因为是基于文本的),所以JSON被周围用于数据交换。

在此以前端JS实行ajax的POST诉求为例,后端PHP管理伏乞为例:

  1. 前端构造二个JS对象,用于包装要传送的多少,然后将JS对象转化为JSON字符串,再发送请求到后端;
  2. 后端PHP接收到这一个JSON字符串,将JSON字符串转化为PHP对象,然后管理诉求。

银河国际网址手机版,能够见见,同样的数量在此处有3种分裂的表现方式,分别是后面一个的JS对象、传输的JSON字符串、后端的PHP对象,JS对象和PHP对象鲜明不是贰个东西,可是由于我们用的都以JSON来传递数据,大家都能精通这种多少格式,都能把JSON这种数据格式很轻巧地转发为和谐能领会的数据结构,那就有益啦,在其余各类语言景况中沟通数据都是如此。

二、JSON和JS对象时期的“八卦”

多多时候都听见“JSON是JS的一个子集”那句话,而且这句话笔者已经也直接那样以为,每一种符合JSON格式的字符串你解析成js都以足以的,直到后来察觉了一个奇奇异怪的东西…

标签:,

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章

网站地图xml地图