1 jsonp
原理就是在前端定义一个接收数据的方法 , 把方法名拼在连接的后面 , 然后通过 script 标签的 src 就可以了,其它看代码:
连接其它是服务器的,然后服务器通过传过来的参数拿到相应的数据,,服务器提供动态生成脚本并在脚本是写上数据和传过来的方法名,,,调用 起来就可以了
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
<head>
<title></title>
<script type=
"text/javascript"
>
// 得到航班信息查询结果后的回调函数
var
flightHandler =
function
(data){
alert(
'你查询的航班结果是:票价 '
+ data.price +
' 元,'
+
'余票 '
+ data.tickets +
' 张。'
);
};
// 提供jsonp服务的url地址(不管是什么类型的地址,最终生成的返回值都是一段javascript代码)
// 创建script标签,设置其属性
var
script = document.createElement(
'script'
);
script.setAttribute(
'src'
, url);
// 把script标签加入head,此时调用开始
document.getElementsByTagName(
'head'
)[0].appendChild(script);
</script>
</head>
<body>
</body>
</html>
|
然后服务器生成的代码大概是这样
1
2
3
4
5
|
flightHandler({
"code"
:
"CA1998"
,
"price"
: 1780,
"tickets"
: 5
});
|
直接用 jquery 也可以实现
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
|
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
<head>
<title>Untitled Page</title>
<script type=
"text/javascript"
src=jquery.min.js
"></script>
<script type="
text/javascript
">
jQuery(document).ready(function(){
$.ajax({
type: "
get
",
async: false,
url: "
http:
//flightQuery.com/jsonp/flightResult.aspx?code=CA1998",
dataType: "jsonp
",
jsonp: "
callback
",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)
jsonpCallback:"
flightHandler
",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"
?",jQuery会自动为你处理数据
success:
function
(json){
alert(
'您查询到航班信息:票价: '
+ json.price +
' 元,余票: '
+ json.tickets +
' 张。'
);
},
error:
function
(){
alert(
'fail'
);
}
});
});
</script>
</head>
<body>
</body>
</html>
|
2 postMessage
window.postMessage概述
1.html5最常用的API之一,实现两个不同域窗口对象之间的数据通信。
2.在发送数据窗口执行:otherWindow.postMessage(msg,origin)
- otherWindow:表示接受数据的窗口的window对象,包括iframe的contentWindwohe和通过window.open打开的新窗口。
- msg表示要发送的数据,包扩字符串和对象(ie9以下不支持,可以利用字符串和json互换)。
- origin表示接收的域名。
3.在接受的窗口监听window的message事件,回掉函数参数接受一个事件对象event,包括的属性有:
- data:接受的数据
- origin:发送端的域
- source:发送端的DOMWindow对象
# 利用window.postMessage在框架之间发送数据
1.在父框架页面index.html发送obj对象给远程服务器的wozien.com/test/b.html,该页面是通过iframe加载的,如下
- <!DOCTYPE html>
- <html>
- <head>
- <title>window.postMessage</title>
- </head>
- <body>
- <iframe id="proxy" src="http://wozien.com/test/b.html" onload = "postMsg()" style="display: none" ></iframe>
- <script type="text/javascript">
- var obj = {
- msg: 'this is come from client message!'
- }
- function postMsg (){
- var iframe = document.getElementById('proxy');
- var win = iframe.contentWindow;
- win.postMessage(obj,'http://wozien.com');
- }
- </script>
- </body>
- </html>
- <!DOCTYPE html>
- <html>
- <head>
- <title></title>
- <script type="text/javascript">
- window.onmessage = function(e){
- if(e.origin !== 'http://localhost') return;
- console.log(e.origin+' '+e.data.msg);
- }
- </script>
- </head>
- <body>
- <p>this is my server</p>
- </body>
- </html>
localhoat this is come from client message