ハセテツラボ » Ajax http://tt-house.com 生涯一開発屋 Wed, 08 Sep 2010 23:42:04 +0000 ja hourly 1 http://wordpress.org/?v=3.0.1 jQueryを使ってjsonpでやりとりする http://tt-house.com/2009/02/jqueryjsonp.html http://tt-house.com/2009/02/jqueryjsonp.html#comments Thu, 19 Feb 2009 09:27:55 +0000 http://www.tt-house.com//wp/?p=87

クライアント側のソース。今回のjQueryは1.3.1を利用しています。

$.ajax({
  url: ‘http://hogehoge.com/api/,
  dataType: ‘jsonp’,
  success: function(data)
  {
    成功時のコールバック関数
  }
});

hogehoge.com/api/に目的のAPIが置いてある前提です。そこにアクセスします。で、サーバ側のアクセスログを観ていると、実際にアクセスしてくるURIは

http://hogehoge.com/api/?callback=jsonp1235002429334&_=1235002440850

となっています。jQueryが付与しているんですかね。これは、結果は「jsonp1235002429334」というコールバック関数に渡してね、という意味合いのようです。クライアント側でコールバック関数の名前を指定していないのにちゃんと成功時のコールバック関数が呼ばれるのは、jQueryがこっそりと処理してくれていたからのようです。

で、サーバ側のレスポンスは

jsonp1235002429334({“address”:”東京都足立区大谷田”});

でOK。これは例として、郵便番号を投げると該当住所を返すapiです。値はクライアント側コールバック関数のdataに格納されます。住所にアクセスしたい場合は

data.address

で「東京都足立区大谷田」が返ってきます。jsonpを利用することでクロスドメインが可能になります。これで郵便番号から住所に変換、メールアドレスの正規表現チェック、等々の共通処理は一元管理できます。マスタが一箇所で済むのはメンテナンスも楽になります。

ただ、インターネット上に公開されているので、どこからアクセスがあるかわかりません。ホストで絞る、等の制限は必要かもしれませんね。

]]> http://tt-house.com/2009/02/jqueryjsonp.html/feed 0 はじめてのAjax http://tt-house.com/2006/03/ajax.html http://tt-house.com/2006/03/ajax.html#comments Wed, 08 Mar 2006 19:01:34 +0000 http://www.tt-house.com//wp/?p=15

<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html;charset=Shift_JIS” />
<title>ajax-test</title>
<script language=”javascript”>
function ReadAtom(data,fileName,async)
{
var httpobj = new ActiveXObject(“Msxml2.XMLHTTP”);
httpobj.open(‘GET’,fileName,async);

httpobj.onreadystatechange = function()
{
if (httpobj.readyState==4)
{
document.getElementById(‘hoge’).innerHTML = httpobj.responseText;
}
}

httpobj.send(data);
}
</script>
</head>
<body>
<form>
<input type=”button” id=”btnGet” name=”btnGet” value=”read atom” onclick=”ReadAtom(”,’./atom.xml’,true)”>
</form>
<hr />
<div id=”hoge”></div>
</body>
</html>

以外とこれだけで通信自体はできてしまう。XMLパーサをMSXMLに固定していたり、エラー処理がはいっていなかったりと問題はあるが、通信だけならコレで十分かと。

あ、同一ディレクトリにatom.xmlというファイルが必要です。

Ajaxって、DynamicHTMLと混同している人多いですよね。あくまでコレは非同期でJavaScriptを使ってXML通信をする技術でしょう。まぁXMLじゃなくてもテキストでも流れてくれるんですけどね。

ちなみにドメイン超えはできないらしいです。

]]> http://tt-house.com/2006/03/ajax.html/feed 0