今回は、Ajax クロスドメインの問題を解決するための JSONP (コード付き) を紹介します。JSONP が Ajax クロスドメインの問題を解決するために使用できる 注意事項 について、実際のケースを見てみましょう。
JSONとJSONP
JSONPとJSONは似ていますが、それらの間には何か関係がありますか？
JSON (JavaScript Object Notation) は軽量のデータ交換形式です。誰もが JSON に精通しているはずです。あまり詳しくない友人は、json.org にアクセスして、JSON について学ぶことができます。これはシンプルで簡単です。
JSONPとは、JSON with Paddingの略称です。これは、サーバー側でスクリプト タグを統合してクライアントに返すことを可能にする非公式のプロトコルで、JavaScript コールバックの形式でクロスドメイン アクセスを可能にします (これは単なる JSONP の実装です)。
JSONP は JSON+Padding と同じです (ここでの Padding はパディングとして理解します)。まず以下の小さな例を見て、それから詳しく紹介しましょう。
同一生成元ポリシー
なぜこのようなエラーが発生するのでしょうか?これは、JavaScript をサポートするすべてのブラウザが同一生成元ポリシーを使用するためです。 Baidu の説明を見てください:
同一生成元ポリシー。Netscape によって提案された有名なセキュリティ ポリシーです。現在、JavaScript をサポートするすべてのブラウザがこの戦略を使用しています。いわゆる同一オリジンとは、ドメイン名、プロトコル、ポートが同じであることを意味します。 Baidu と Google のページがブラウザの 2 つのタブ ページで開かれている場合、Baidu ブラウザがスクリプトを実行すると、そのスクリプトがどのページに属するか、つまり、Baidu と同じ起源を持つスクリプトかどうかがチェックされます。実行されました。
これがデータが取得できない原因なので、どうすればクロスドメイン問題を解決できるのでしょうか？そうです、これで本題に入り、JSONP とは何かを理解することができました。
クロスドメインの簡単な原理
定義を見ただけではよくわからないので、まずは手動で簡単でわかりやすいテストをしてみましょう。新しい asp.net Web プログラムを作成し、sample.html Web ページと test.js ファイルを追加します。コードは次のとおりです:
sample.html コード:
<!DOCTYPE html PUBLIC "-//WC//DTD XHTML . Transitional//EN" "http://www.w.org/TR/xhtml/DTD/xhtml-transitional.dtd">
<html xmlns="http://www.w.org//xhtml" >
<head>
<title>test</title>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
</body>
</html>
ログイン後にコピー
test.js コード:
alert("success");ログイン後にコピー
sample.html を開くと、「成功」などのメッセージ ボックスが表示されますが、これには何の意味もないように見えます。さて、ここで、非同種環境をシミュレートします。Visual Studio を使用して新しい Web プログラム (ここではプログラム A と呼びます) を作成しましたよね。次に、新しい Visual Studio を開いて、新しい Web プログラム (プログラム B) を作成します。 ). )、以前の test.js ファイルをプログラム A から削除し、プログラム B にコピーします。両方のプログラムが実行されると、Visual Studio は組み込みサーバーを起動します。プログラム A は localhost:20001、プログラム B は localhost:20002 であると仮定します (ただし、ドメイン名は同じですが、ポートは同じです)。数値が異なるため、不均一になります）。
それでは、test.jsファイルがプログラムBにあり、URLがlocalhost:20002となるので、次にsample.htmlのコードを変更しましょう。
sample.html コードの一部:
<script type="text/javascript" src="http://localhost:20002/test.js"></script>
ログイン後にコピー
localhost:20001/sample.html を再度更新すると、以前と同様に「成功」ダイアログ ボックスが表示されます。同じオリジンからのものではない、localhost:20002/test.js のいわゆるリモート サービスに正常にアクセスされました。この時点で、誰もがクロスドメイン アクセスの原則を大まかに理解しているはずです。
<script> タグの src 属性は同一生成元ポリシーの制限を受けないため、サーバー上の任意のスクリプトを取得して実行できます。 </p>
<p style="text-align: left;"><span style="background-color: #808080">JSONP実装モード--CallBack</span></p>
<p style="text-align: left;"> 小さな例でクロスドメインの原理を説明しましたが、JSONPの定義で言及されているJavaScriptコールバックの形式を見てみましょう。次に、コードを変更し、JSONP の JavaScript コールバック フォームを実装する方法を説明します。 </p>
<p style="text-align: left;">プログラムAのサンプルコードの一部:</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> <script type="text/javascript">
//回调函数
function callback(data) {
alert(data.message);
}
</script>
<script type="text/javascript" src="http://localhost:20002/test.js"></script>
ログイン後にコピー
プログラムBのtest.jsのコード:
//コールバック関数を呼び出し、説明としてjsonデータとして渡してコールバックを完了します
callback({message:"success"});ログイン後にコピー
这其实就是JSONP的简单实现模式，或者说是JSONP的原型：创建一个回调函数，然后在远程服务上调用这个函数并且将JSON 数据形式作为参数传递，完成回调。
将JSON数据填充进回调函数，这就是JSONP的JSON+Padding的含义吧。
一般情况下，我们希望这个script标签能够动态的调用，而不是像上面因为固定在html里面所以没等页面显示就执行了，很不灵活。我们可以通过javascript动态的创建script标签，这样我们就可以灵活调用远程服务了。
程序A中sample的部分代码：
<script type="text/javascript">
function callback(data) {
alert(data.message);
}
//添加<script>标签的方法
function addScriptTag(src){
var script = document.createElement('script');
script.setAttribute("type","text/javascript");
script.src = src;
document.body.appendChild(script);
}
window.onload = function(){
addScriptTag("http://localhost:/test.js");
}
</script>ログイン後にコピー
程序B的test.js代码不变，我们再执行下程序，是不是和原来的一样呢。如果我们再想调用一个远程服务的话，只要添加addScriptTag方法，传入远程服务的src值就可以了。这里说明下为什么要将addScriptTag方法放入到window.onload的方法里，原因是addScriptTag方法中有句document.body.appendChild(script);，这个script标签是被添加到body里的，由于我们写的javascript代码是在head标签中，document.body还没有初始化完毕呢，所以我们要通过window.onload方法先初始化页面，这样才不会出错。
上面的例子是最简单的JSONP的实现模型，不过它还算不上一个真正的JSONP服务。我们来看一下真正的JSONP服务是怎么样的，比如Google的ajax搜索接口：http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=?&callback=?
q=?这个问号是表示你要搜索的内容，最重要的是第二个callback=?这个是正如其名表示回调函数的名称，也就是将你自己在客户端定义的回调函数的函数名传送给服务端，服务端则会返回以你定义的回调函数名的方法，将获取的json数据传入这个方法完成回调。有点罗嗦了，还是看看实现代码吧：
<script type="text/javascript">
//添加<script>标签的方法
function addScriptTag(src){
var script = document.createElement('script');
script.setAttribute("type","text/javascript");
script.src = src;
document.body.appendChild(script);
}
window.onload = function(){
//搜索apple，将自定义的回调函数名result传入callback参数中
addScriptTag("http://ajax.googleapis.com/ajax/services/search/web?v=.&q=apple&callback=result");
}
//自定义的回调函数result
function result(data) {
//我们就简单的获取apple搜索结果的第一条记录中url数据
alert(data.responseData.results[].unescapedUrl);
}
</script>ログイン後にコピー
像这样的JSONP服务还有很多(以下信息来自使用 JSONP 实现跨域通信，第 1 部分: 结合 JSONP 和 jQuery 快速构建强大的 mashup)：
接下来我们自己来创建一个简单的远程服务，实现和上面一样的JSONP服务。还是利用Web程序A和程序B来做演示，这次我们在程序B上创建一个MyService.ashx文件。
程序B的MyService.ashx代码：
public class MyService : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
//获取回调函数名
string callback = context.Request.QueryString["callback"];
//json数据
string json = "{\"name\":\"chopper\",\"sex\":\"man\"}";
context.Response.ContentType = "application/json";
//输出：回调函数名(json数据)
context.Response.Write(callback + "(" + json + ")");
}
public bool IsReusable
{
get
{
return false;
}
}
}ログイン後にコピー
程序A的sample代码中的调用：
<script type="text/javascript"> function addScriptTag(src){
var script = document.createElement('script');
script.setAttribute("type","text/javascript");
script.src = src;
document.body.appendChild(script);
}
window.onload = function(){
//调用远程服务 addScriptTag("http://localhost:/MyService.ashx?callback=person");
}
//回调函数person function person(data) {
alert(data.name + " is a " + data.sex);
}
</script> ログイン後にコピー
这就完成了一个最基本的JSONP服务调用了，是不是很简单，下面我们来了解下JQuery是如何调用JSONP的。
jQuery对JSONP的实现
jQuery框架也当然支持JSONP，可以使用$.getJSON(url,[data],[callback])方法(详细可以参考http://api.jquery.com/jQuery.getJSON/)。那我们就来修改下程序A的代码，改用jQuery的getJSON方法来实现(下面的例子没用用到向服务传参，所以只写了getJSON(url,[callback]))：
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript">
$.getJSON("http://localhost:20002/MyService.ashx?callback=?",
function(data){ alert(data.name + " is a a" + data.sex); });
</script>ログイン後にコピー
结果是一样的，要注意的是在url的后面必须添加一个callback参数，这样getJSON方法才会知道是用JSONP方式去访问服务，callback后面的那个问号是内部自动生成的一个回调函数名。这个函数名大家可以debug一下看看，比如jQuery17207481773362960666_1332575486681。
当然，加入说我们想指定自己的回调函数名，或者说服务上规定了固定回调函数名该怎么办呢？我们可以使用$.ajax方法来实现(参数较多，详细可以参考http://api.jquery.com/jQuery.ajax)。先来看看如何实现吧：
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$.ajax({ url:"http://localhost:20002/MyService.ashx?callback=?",
dataType:"jsonp", jsonpCallback:"person",
success:function(data){
alert(data.name + " is a a" + data.sex); } });
</script>ログイン後にコピー
没错，jsonpCallback就是可以指定我们自己的回调方法名person，远程服务接受callback参数的值就不再是自动生成的回调名，而是person。dataType是指定按照JSOPN方式访问远程服务。
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
AJAX二级联动有哪些实现方法
php+jquery传递json数据实现方法
以上がJSONP は Ajax クロスドメイン問題を解決します (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
