Jsonpとajaxの1回のspike
2754 ワード
問題の開始:
このような需要があって、1つの静的な空間、中にはhtmlのようなウェブサイトが入っています.今、このサイトに活力を加えなければなりません.別のサイトからデータを入手して表示し、リアルタイムでデータを更新します.このもう一つのサイトはphp定で、兄はソースコードを持っていて、いくつかのインタフェースやページを修正して提供することができます.
2つのシナリオがあります
1.php局にphpスクリプトを書き、htmlページをレンダリングし、ajaxポーリングでリアルタイムでデータを更新(近)します.その後、静的ページサイトでhtmlを変更し、iframeを使用して埋め込みます.
2.jsonp、静的ページajaxポーリングを使用してjsonデータを取得し、自分のページを更新し、phpサイトにurlインタフェースを提供します.
最後に私に第2のスキームを使用させたのは,リアルタイムで更新されたデータの削除が増加し,生成されたページの高さが不定であり,iframe埋め込みで問題をもたらした高さがhtmlページでは制御しにくく,美しくないためである.
jsonpの簡単な紹介:
ブラウザはセキュリティの制限のため、ajaxドメイン間リクエストが失敗することを知っています.しかし、ブラウザがjsスクリプトを導入すると、ドメイン間でjsデータまたはオブジェクトを取得できます.例えば
この簡単な原理で、もし私たちがこのjsを取得するためにタイミングを決める必要があるならば.javascriptコードで反応
ajaxに対して、jQueryはそれに対してとても良いfacadeのパッケージがあって、$.ajaxはdataTypeモードがjsonpとjsonpのコールバック方法の設定をサポートしており、便利に使用できます.次に例を示します.
Php端:fuck.jsonp.php
静的ページコード端:index.html
そしてこの原理によって、問題は解決しました!:^)
このような需要があって、1つの静的な空間、中にはhtmlのようなウェブサイトが入っています.今、このサイトに活力を加えなければなりません.別のサイトからデータを入手して表示し、リアルタイムでデータを更新します.このもう一つのサイトはphp定で、兄はソースコードを持っていて、いくつかのインタフェースやページを修正して提供することができます.
2つのシナリオがあります
1.php局にphpスクリプトを書き、htmlページをレンダリングし、ajaxポーリングでリアルタイムでデータを更新(近)します.その後、静的ページサイトでhtmlを変更し、iframeを使用して埋め込みます.
2.jsonp、静的ページajaxポーリングを使用してjsonデータを取得し、自分のページを更新し、phpサイトにurlインタフェースを提供します.
最後に私に第2のスキームを使用させたのは,リアルタイムで更新されたデータの削除が増加し,生成されたページの高さが不定であり,iframe埋め込みで問題をもたらした高さがhtmlページでは制御しにくく,美しくないためである.
jsonpの簡単な紹介:
ブラウザはセキュリティの制限のため、ajaxドメイン間リクエストが失敗することを知っています.しかし、ブラウザがjsスクリプトを導入すると、ドメイン間でjsデータまたはオブジェクトを取得できます.例えば
この簡単な原理で、もし私たちがこのjsを取得するためにタイミングを決める必要があるならば.javascriptコードで反応
// script
var scriptElt = document.getElementByTagName("script")[1];//
if(scriptElt !== null){
scriptElt.parentNode.removeChild(scriptTag );
}
// script
document.write("<script type='text/javascript' src='http://www.xzf.com/hello.js'></script>");
ajaxに対して、jQueryはそれに対してとても良いfacadeのパッケージがあって、$.ajaxはdataTypeモードがjsonpとjsonpのコールバック方法の設定をサポートしており、便利に使用できます.次に例を示します.
Php端:fuck.jsonp.php
<?php
echo "callback({\"content\":\"xzf is a handsome boy!\"});";静的ページコード端:index.html
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title> Jsonp</title>
<script type="text/javascript" charset="utf-8" src="jquery.js"></script>
</head>
<body>
<p>Hello ， ！</p>
</body>
<script type="text/javascript" charset="utf-8">
var handler = (function($){
var $p = $("p");
return {
loadRemoteContent : function(){
$.ajax({
url : "http://xzf.com/fuck.jsonp.php",
type : "get",
dataType : "jsonp",
processData : false,
jsonp = "callback"
});
},
renderContent : function(data){
$p.html(data.content);
}
}
}(jQuery));
setTimeOut(handler.loadRemoteContent,5000);
// ， ， !
function callback(data){
handler.renderContent(data);
}
</script>
</html>そしてこの原理によって、問題は解決しました!:^)