2008年2月6日水曜日

XHTML+AJAX メモ

XHTML
タグはオプションも含め全部小文字。閉じタグは省略できない。
<ul>
<li>123    ←ダメ
<LI>456</LI> ←ダメ
<li>789</li> ←正しい
</ul>
空要素タグ(閉じタグのないもの)は" />"で閉じる。
<br /><meta ~ />など。
オプションは値を省略できない。
<option value="1" selected>1</option>
こう書いてたのを
<option value="1" selected="selected">1</option>
くらい?
あと、html内にjavascriptを埋め込む場合
<script type="text/javascript" language="javascript">
//<![CDATA[

//]]>
</script>
のようにCDATAセクションにする。(<,>,&などをエンティティにしなくていいように)

↓XHTML雛形
<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=shift_jis" />
<title></title>
</head>
<body>

</body>
</html>

DOM扱う時・・・というか、AJAXやろうと思うとprototype.jsが便利すぎです。
多分、prototype指向に慣れるのに多少時間がかかるかも?

なれるとすごい便利ですよ。javascriptの組み込みオブジェクト拡張できるし。
参考になりそうなのおいておきますね。

http://codezine.jp/a/article/aid/222.aspx
http://blog.hawklab.jp/index.php?tag=prototype.js&blogid=1
http://web.paulownia.jp/script/index.html

AJAXやるのに大事なの忘れてた
XMLだけでやってもいいけど、サーバと通信する場合には、JSON記法を理解していると楽できます。
レスポンス受ける側でeval("(" + response.responseText + ")")してやるだけでいいので。

http://ja.wikipedia.org/wiki/JavaScript_Object_Notation
http://www.openspc2.org/JavaScript/Ajax/Ajax_study/chapter03/006/

IE Developer Toolbar
http://www.microsoft.com/downloads/details.aspx?FamilyID=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en

DOMツリー見えたり、エレメントのアウトライン取れたりするので、動的にHTML書き換えたりとか、描画がおかしいときとかの原因特定が一気に早くなります。

Firefoxなら
Web Developer
http://www.infoaxia.com/tools/webdeveloper/
ついでに、非同期通信の確認用にパケットキャプチャ(EtherealとかWireshark)立ち上げるのが面倒なら、
Live HTTP Headers
http://livehttpheaders.mozdev.org/installation.html

0 件のコメント:

コメントを投稿