読者です 読者をやめる 読者になる 読者になる

水菜巻のメモ的ななにか。

主にLinuxやAndroid、Web関連について書いています。自作アプリや趣味のことも書くかもしれません。The雑食ブログ。

ajaxで更新Ping通知できるか試してみた結果

更新Ping ajax PHP はてなブログ

はてなブログで更新Pingを送信したら彼女ができました ~手動Ping実装法~ - 水菜巻のメモ的ななにか。

前回の投稿でPHPでの更新Ping送信は上手くいきました。

しかし前回の実験で送信先Pingサーバがあまり多すぎると、送り手側でInternalServerError500になりました。

おそらく処理時間が長すぎてタイムアウトになってしまっているのだと思います。

確かにレスポンスは3秒以上かかるし、もうちょい高速な処理ができないものかでしょうか。

一つの案として、ajaxによる非同期通信で順次レスポンス結果を表示させるというのがあります。

ajaxならばjavascriptに組み込むだけですし、クライアントサイドなのでPHPと比べてめちゃくちゃレスポンス速くなるはずなので、やってみる価値はありそうです。

ajaxとは?

Ajax(エイジャックス[1][2]、アジャックス[3]、アヤックス[要出典])は、ウェブブラウザ内で非同期通信とインターフェイスの構築などを行う技術の総称[4]。XMLHttpRequest(HTTP通信を行うためのJavaScript組み込みクラス)による非同期通信を利用し、通信結果に応じてダイナミックHTMLで動的にページの一部を書き換えるというアプローチを取る[5]。
Ajax - Wikipedia

簡単に言ってしまえば、PHPやCGIなどのWebアプリケーションみたくデータ送信~結果表示のようにページ読み込みと同時にレスポンスを待つ必要がなく、独立して処理が行われるので、シームレスな通信を行うことができるということです。

イメージ的にはWebコンテンツの入力フォームからページロード無しにデータを送受信できる感じです。

コード

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="utf-8" />
		<title>Sample</title>
		<script type="text/javascript" charset="utf-8" src="jquery-1.11.1.min.js"></script>
		<script type="text/javascript">

window.onload = function(){
	var ping_server = "http://ping.fc2.com";
	var blog_name = "Test";
	var blog_url = "http://example.com";
	var xmlDoc = '<?xml version="1.0" encoding="UTF-8"?>';
	xmlDoc += '<methodCall>';
	xmlDoc += '<methodName>weblogUpdates.ping</methodName>';
	xmlDoc += '<params>';
	xmlDoc += '<param><value>' + blog_name + '</value></param>';
	xmlDoc += '<param><value>' + blog_url + '</value></param>';
	xmlDoc += '</params>';
	xmlDoc += '</methodCall>';
	$.ajax({
		type: "POST",
		url: ping_server,
		headers:{
			"Content-Type": "application/xml",
			"Content-Length": xmlDoc.length
		},
		
		dataType: "xml",
		processData: false,
		data: xmlDoc,
		success: function(xml){
			$("#res").html(xml);
		}
	});
};
		</script>
	</head>
	<body>
		<div id="res">
		</div>
	</body>
</html>

結果

"XMLHttpRequest cannot load http://***.com/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access."というエラーを吐いて、更新Pingは送信できませんでした。

なぜだめだったのか

Google先生で色々調べたところ、クロスドメイン問題という壁にぶち当たります。
おそらく原因はクロスドメイン間での通信制限にあると思われます。

クロスドメイン問題とは

f:id:miz7maki:20150304234322p:plain

  • ドメインAに置かれたjavascriptでドメインAに対して処理実行 → ○
  • ドメインAに置かれたjavascriptでドメインBに対して処理実行 → ×

基本的にはAサーバにあるjavascriptはBサーバにアクセスができないということです。
他のサーバに置いてあるjavascriptから自分のサーバにアクセスされたり、改造されたスクリプトで不正アクセスされるのは困りますよね?

クロスサイトスクリプティング - Wikipedia

PHPはサーバ側で実行されその結果をWebサイト訪問者に表示するのに対して、javascriptはクライアント側(Webサイト訪問者のブラウザ)で実行、結果を表示する仕組みになっています。

なので、セキュリティ面からしてもクロスドメインアクセスはあまりしないほうが良さそうです。
ただ、Amazonや楽天みたいにAPIが公開されていて使っていいよってものは別ですが。

PHP,CGIが無難!

ということで、個人的に更新Ping送信に関してはPHPやCGIで実装するのが無難ですかね!

確かにajaxでもJSONPにすればクロスドメインを回避できるらしいのですが、JSONPでhttpヘッダとかxml詰め込んでやる方法がちょっとよくわからないので、今回はこれで閉めることにします!

もしJSONPやそのほかの方法を知っている方は是非教えてください!

それでは!ヾ( ´ー`)ノ