jQueryのajax処理にて、クロスドメインのデータ取得時に起こるエラーについて

Question

表題の件についてご教授頂ければと思います。下記詳細になります。

クロスドメインのデータ取得時のエラー

Ajax処理

$.ajax({
	type: 'GET',
	url: 'http://awasete.com/showjson.phtml?u=http%3A%2F%2Fd.hatena.ne.jp%2FHexa%2F',
	dataType: 'jsonp',
	jsonpCallback: 'awasete_yomitai',
})
...

リクエスト

http://awasete.com/showjson.phtml
?u=http%3A%2F%2Fd.hatena.ne.jp%2FHexa%2F
&callback=awasete_yomitai
&_=1446106743870

⇛意図的にtimeoutを起こす。

レスポンス

Method:    GET
Satus:     200
Type:      script
Initiator: jquery.js:8698

• リクエストタイプはスクリプト
• タイムアウトが生じていても、scriptのため、200で返ってくる

結果、下記エラーがコンソールに出る。

Uncaught TypeError: 
awasete_yomitai is not a function
(anonymous function) @ showjson.phtml?u=http%3A%2F%2Fd.hatena.ne.jp%2FHexa%2F&callback=awasete_yomitai&_=1445955902222:1

• このエラーが出ないようにするにはどうしたら良いか。
• そもそも出るものなのか。

---

参考：同一ドメイン時のエラーの場合

Ajax処理

$.ajax({
	type: 'GET',
	url: 'json/data.json',
	dataType: 'jsonp',
	jsonpCallback: 'cb'
})
...

リクエスト

http://***.com/json/data.json?callback=cb&_=1446107613641

同様に、意図的にtimeoutを起こす。

レスポンス

Method:    GET
Satus:     (canceled)
Type:      xhr
Initiator: jquery1.11.3.js:9663

• httpリクエストでエラーになる。
• 当然コンソールにはエラーは出ない。

---

以上になります。
どうぞよろしくお願い致します。

Answer 1

window.awasete_yomitaiに関数を定義していますか？していないのであれば、下記のように確認してください。

window.awasete_yomitai= function(){
  console.log(arguments);
}

jsonpの場合、リクエストが完了した時点で、jsonpで指定されている関数名が実行されるので、グローバルスコープであるwindowにその関数が定義されていない場合、関数名 is not a functionとなるはずです。
jsonpではエラーを捕捉できません。代わりにタイムアウト時間を設定してください。

$.ajax({
    type: 'GET',
    url: 'json/data.json',
    dataType: 'jsonp',
    jsonpCallback: 'cb',
    timeout: 500,
})

確実に補足したい場合、jsonなど、200以外を補足する、普通のajaxを利用して下さい。

参考

jquery - JSONP request error handling - Stack Overflow

Comments

[ikki57]

@horse_n_deerさん

返信遅くなり申し訳ありません。
ご回答ありがとうございます。

> `window.awasete_yomitai`に関数を定義していますか？
定義していませんでした。
テストにて、`window.awasete_yomitai` に関数を定義することで、本件のエラーは吐かれなくなりました。

### テスト1
下記のように、Ajax処理の前に初期設定（とでも言えばいいのでしょうか）を記述する。

```js
window.awasete_yomitai= function(){};

$.ajax({
type: 'GET',
url: 'http://awasete.com/showjson.phtml?u=http%3A%2F%2Fd.hatena.ne.jp%2FHexa%2F',
dataType: 'jsonp',
jsonpCallback: 'awasete_yomitai',
...
});
```

### テスト2
下記のようにエラー時のみ、window.awasete_yomitai を定義する

```js
$y1.ajax ({
type: "GET",
url: 'http://awasete.com/showjson.phtml?u=http%3A%2F%2Fd.hatena.ne.jp%2FHexa%2F',
dataType: "jsonp",
jsonpCallback: "awasete_yomitai",
timeout: 100,
success: function (data, statusText, jqXHR) {
console.info('Ajax success');
// do something
},
error: function (jqXHR, statusText, error) {
console.warn('Ajax error --> ', error);

if (statusText === "timeout") {
console.log('--- something went wrong (handle it) ---')
window.awasete_yomitai = function() {
// do nothing in particular
// windowオブジェクトに特に処理を行わない関数を突っ込むだけ
};
}
}
});
};
```

> jsonpではエラーを捕捉できません。代わりにタイムアウト時間を設定してください。
ご教授ありがとうございます。
http://stackoverflow.com/questions/19035557/jsonp-request-error-handling
こちらに記載されている、
>> error
>>
>> A function to be called if the request fails (...) Note: This handler is not called for cross-domain script and cross-domain JSONP requests. This is an Ajax Event.
> Because of that, you're forced to find workaround. You can specify timeout to trigger an error callback. It means that within specified time frame the request should be successfully completed. Otherwise, assume it has failed:
↑ここの部分ですね。
「Ajaxのerror functionは、Ajaxのリクエストの失敗に紐づくものであり、クロスドメインのリクエストによって呼び出されない」
jsonpのリクエストはxhrではなくscriptであり（ただの外部scriptの取得であり）、リクエストの返却は基本200 OKで返される、ということかと。（認識が誤っていたら申し訳ありません）

> 確実に補足したい場合、jsonなど、200以外を補足する、普通のajaxを利用して下さい。
ありがとうございます。
そうですね、通常のajaxでしたらhttpリクエストなので、ステータスが返却されるので、それにより補足できますね。
今回はクロスドメインでのリクエストであり、リクエスト先がjsonpで設定されていたのでjsonpで行った、という背景になります。

無事解決でしました。
この度はご教授頂きありがとうございました。

[ikki57]

コメントにはマークダウンが反映されないようで見辛くて申し訳ありません。