記事あなたは、原則として詳細JSONPを理解するように、
私たちは、JSONPの生成方法についてお話しましょう：
実際には、インターネットがJSONPについて説明するためにたくさん持っているが、ステレオタイプ、およびそれが助けかどうかを確認するために、この問題を説明するための独自の方法で、解釈が困難話すに新しい多くの人々のため、霧。
1は、よく知られた問題で、一般的なファイルの問題にアクセスせずにAjaxを直接クロスドメインリクエストは、静的ページ、動的なWebページ、Webサービス、WCF限り、クロスドメインリクエストですどんなには、許可されます。
2、しかし、我々はまた、クロスドメインの影響は、Webページ（それだけではなく上のJSファイルを呼び出すかどうかではないことが判明し、我々はまた、タグの「SRC」属性を持っている人は、このような<\スクリプト>などのクロスドメインの能力を持っていることがわかりました、<\ IMG>、<\ IFRAME>）。
あなたは純粋なウェブ終了したい場合は、現在の段階で判断できるように、ドメイン間でデータにアクセスするだけで可能です、それはリモートサーバー上で試してみることです3は、（ActiveXコントロール、プロキシサーバーをHTML5でのWebSocketなどではないと、将来が所属します） JSファイルには、データ形式、クライアントの呼び出しに、さらなる処理のためにロードされました。
4、それは我々はすでにまた、ネイティブJSONサポートをJSであっても良く、複雑なデータの純粋な文字JSONデータ形式簡潔な説明と呼ばれるものが存在しているはずが起こるので、クライアント側でのデータ処理のこの形式は、ほぼ任意であるとして。
動的クロスドメイン・サーバ（一般的にJSONサフィックス）で生成されたJSファイル形式を呼び出すために、まったく同じようスクリプトを呼び出すことにより、このようなソリューションは、出てくる準備ができてWebクライアントとサーバーが動的にJSONを生成するために、なぜ、それは明らかである5、文書は、目的は、クライアントのニーズにデータをロードすることです。
6、JSONファイルの成功に呼び出した後、クライアント、彼らが必要とするも、得られたデータは、残りの部分は、彼らのニーズに従って処理し、リモートデータ収集のこの方法は非常にAJAXのように、実際に見えることを示しています同じではありません。
7は、クライアントデータの利用を容易にするために、徐々に、それはそれを呼び出すJSONP非公式トランスポートプロトコルを形成し、プロトコルのポイントは、サーバはその後、ときにデータを返すユーザーがサーバーへのコールバックパラメータを渡すことができるようにすることですクライアントは自由に自動的に返されたデータを処理するために、その機能をカスタマイズすることができるようにJSONデータをラップするためのパラメータとしてコールバック関数名。
あなたは、コールバックのために、いくつかのあいまいなパラメータを使用する方法なら、私たちは、後に説明する具体的な例を持っています。
JSONPクライアント固有の実装
それらが同じである舞台裏で行われる作業のにかかわらず、jQueryのイェジンハオの、ExtJSに言及する価値、又は他の支持JSONPフレームワーク、私はクライアントのJSONPを達成するためのステップバイステップを説明しましょう：
1、我々はクロスドメインファイルjsのコードは（もちろん、Webスクリプトのセキュリティポリシーを意味する）場合でも、ということを知って、ウェブページも無条件に実行することができます。
リモートサーバーremoteserver.comのルートにありますが、以下のようにファイルのコードがあるremote.js：
alert('我是远程文件');
そこローカルサーバーの下localserver.com jsonp.html次のようにページのコードは次のとおりです。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://remoteserver.com/remote.js"></script>
</head>
<body>
</body>
</html>
確かに、ページには、クロスドメインの呼び出しの成功を示す、プロンプトウィンドウをポップアップ表示されます。
2.今、私たちは関数を定義して、リモートremote.js jsonp.htmlページで、着信データに呼び出します。
jsonp.htmlページのコードは次のとおりです。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
var localHandler = function(data){
alert('我是本地函数，可以被跨域的remote.js文件调用，远程js带来的数据是：' + data.result);
};
</script>
<script type="text/javascript" src="http://remoteserver.com/remote.js"></script>
</head>
<body>
</body>
</html>
remote.jsドキュメントのコードは次のとおりです。
localHandler({"result":"我是远程js带来的数据"});
結果の表示を実行した後、ページが正常にウィンドウを促し、地元の機能は、クロスドメインのリモートjsの呼び出しが成功であり、また、リモートのjsから受信したデータをもたらします表示されます。
非常に満足して、私はリモートのJSはそれの名前は何地元のノウハウを呼び出す必要があり機能してみましょうか、どのようにデータへのクロスドメインのリモートアクセスの目的は、基本的に達成し、それが問題ですか？結局のところ、サービスは、クライアントの多くに直面している、そしてこれらは彼らの地元の機能は同じああではありません仕えるJSONPのですか？私たちは、その後、見下します。
呼び出し側が、私はいくつかのコールのjsコードXXX機能が欲しい」サーバーを伝えるために、過去にパラメータを渡すことができるように3、スマート開発者が簡単にあなたに、限り、JSスクリプトサーバが動的に唱えライン上に生成されていて、考えることができますサーバがクライアントのニーズに合わせてjsのスクリプトを生成し、に対応することができるように、「私に戻ります。
コードjsonp.htmlのページを見てください：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
// 得到航班信息查询结果后的回调函数
var flightHandler = function(data){
alert('你查询的航班结果是：票价 ' + data.price + ' 元，' + '余票 ' + data.tickets + ' 张。');
};
// 提供jsonp服务的url地址（不管是什么类型的地址，最终生成的返回值都是一段javascript代码）
var url = "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998&callback=flightHandler";
// 创建script标签，设置其属性
var script = document.createElement('script');
script.setAttribute('src', url);
// 把script标签加入head，此时调用开始
document.getElementsByTagName('head')[0].appendChild(script);
</script>
</head>
<body>
</body>
</html>
このコードの変更が比較的大きくない、もはや遠隔JSは死んファイルが、動的なクエリをコーディングし、これはコア部分のどのようなJSONPクライアントの実装であると、この場合、焦点はそれを行う方法である直接書き込むJSONPを呼び出すことです全体のプロセス。
ので、この関数を渡してくださいクエリの結果、私たちは、私は、時間情報を確認するためにサーバーに伝えたい渡されたコードパラメータによって呼び出されるURLは、CA1998便で見て、コールバックパラメータがflightHandlerと呼ばれる私の地元のコールバック関数にサーバーに指示しますコール。
OK、サーバは、これはjsonp.htmlにこのコードしばらくflightResult.aspxページ生成と呼ばれ、非常に賢いです
（文字列の連結をされ、ここでサービスを実装するプレゼンテーションの最後、および最終的な分析では、言語の選択、ではありません）：
flightHandler({
"code": "CA1998",
"price": 1780,
"tickets": 5
});
ここまで4、私はあなたが正しい、JSONPクライアント実装の原理を理解することができたことを信じますか？残りは、複数の繰り返しの呼び出しを可能にする、ユーザインターフェイスと対話するためには、どのようにコードのパッケージについてです
JSONPコールを達成するためにどのようにjQueryの？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<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>
それは不思議ではないですか？なぜ、この時間は、私がflightHandlerこの関数を書いていませんか？そして驚くべきことに成功した操作！
これは、AjaxのJSONP形式を扱うとき（JSONPのjqueryのもアヤックスに含まれますが、実際には、彼らは本当に同じものの子ではないが、）、、jQueryのjQueryのにクレジットで自動コールバックし、取り出したデータの生成を助けます成功のために呼び出すためのプロパティ・メソッド、それはので、それを冷却していませんか？
サプリメント
ここでは類似点と相違点AJAXとJSONPのためのいくつかの追加の説明を行うには：
この2つの技術上の。1、およびJSONPのアヤックスは、あまりにも、オブジェクトのように「見える」と呼ばれ、要求URLで、サーバは、データを返す処理し、そのためのjQuery JSONPフレームとみなされている。内線アヤックスパッケージの一の形態。
2、しかし、AJAXとJSONP実際に何か異なる性質。コアが動的JSONPを添加しながら、AJAXは、XmlHttpRequestのことで、このページ上の非中核コンテンツを取得することです