HTTP::GET,POSTメソッド
HTMLのformタグなどでよく使われるGET,POSTメソッドについてです。
・GET method
(クライアントからみてサーバから)データ検索結果をGETする時に
使います。
送るデータをURLの後ろに ? や & をつけて(クエリという)、送信します。
<form method="GET" action="http://hogehoge.com/"> 名前：<input type="text" name="NAME"> //名前をほげにしたとします。 年齢：<input type="text" name="age"> //20歳にしたとします。 <input type="hidden" name=p value=t> <input type="submit" value="送信"> </form>
のようなフォームがあった場合、
送信されるデータは、
http://hogehoge.com/name=ほげ&age=20&p=t
のようになるはずですが、実際は送信するデータにURLエンコードという符号化
処理が行われます。
・URLエンコードとは
URLに使ってはいけない文字を使うときに使います。
エンコード前 |
エンコード後 |
ほげ |
%82%d9%82%b0 |
hoge |
hoge |
文字コードによって、エンコード結果が異なるので
サーバに対応する文字コードを使用しましょう。
ex)
文字コード |
エンコード前 |
エンコード後 |
Shift-JIS |
ほげ |
%82%d9%82%b0 |
UTF-8 |
ほげ |
%e3%81%bb%e3%81%92 |
EUC-JP |
ほげ |
%a4%db%a4%b2 |
GETメソッドでは送るデータがURLになるため、
送信できるデータは数KBです。
したがって、クエリーを渡して結果を得る時例えば
検索結果を得るときなどに使うのが向いています。
・POSTメソッドとは
(クライアントからみてサーバに)POSTつまり投稿するメソッドです。
掲示板の書き込みやまとまったデータを送信する時につかいます。
Javascript::DOMを使って動的にiframeを作成
要素を使って動的にHTML文書に追加するには、
1.createElementメソッドを使って要素を生成
2.setAttribute()メソッドを使って属性を正しく設定
3.appendChild()メソッドを使って追加
createElementメソッド
書式
createElement(タグの名前)
戻り値:新たに作成したオブジェクト
引数:タグの名前
ex)
var a=createElement("img"); //imag要素を作成
var b=createElement("p"); //p要素を作成
setAttributeプロパティ
書式
setAttribute(属性名,属性値)
ex)
document.body.setAttribute("bgcolor","orange");
//ドキュメントのbody要素のbgcolor属性をorangeにする
getElementByIDメソッド
書式
戻り値:指定したIDを持つオブジェクト
引数:HTML文書内のID
ex)
var pbox=document.getElementByID("plabel");
//plabelというIDがついたオブジェクトがpboxに代入される。
appendChildメソッド
書式
appendChild(追加するオブジェクト)
引数:追加するオブジェクト
ex)
var imgob=createElement(img);
imgob.setAttribute("alt","画像");
imgob.setAttribute("src","test.img");
var pbox=document.getElementByID("plabel");
pbox.appendChiled(imgob);
//pboxというオブジェクトにimagobというオブジェクトを追加
Javascript::ウインドウの制御
JavascriptのWindow制御用メソッド
open()メソッド
書式
戻り値:新たに生成されたウインドウのオブジェクト
引数:open(
新たにつくるウインドウのURL,
ウインドウの名前,
ウインドウのサイズとGUI部品,
同名のウインドウが存在の時の動作
)
第3引数は、色々と指定できます。詳細はお勉強サイトにて。
第4引数は論理値(true or false)で指定します。
デフォルトはfalse。
close()メソッド
書式
ウインドウオブジェクト.close();
上記のように書くだけでOK。
javascript::配列
・ジャバスクリプトでは配列はオブジェクトである。
typeof演算子で配列を調べると結果は,objectになる。
つまり、配列はオブジェクトであるのでプロパティやメソッドを持つ。
以下、配列の基本的な使い方。
・配列の生成方法
書式
1. 配列名=new array(要素数);
2. 配列名=new array(要素1,要素2,・・・);
3. 配列名={要素1,要素2,・・・};※2より1のほうが優先され、要素がひとつなら
要素数の長さという意味になる。
var x=new array(); var x=new array(10,20,30,"配列"); //要素名を指定できる var x=new array(10); //1個の数値を指定。 var x={"東京都""神奈川県""埼玉県"}; //こういう形でも要素を指定できる。
xという配列を生成する場合、new演算子とarrayクラスのコンストラクタを使い
生成する配列名=new array(要素名);
とすれば配列が生成できる。
・配列要素へのアクセス
xという配列の場合、 a=x[0]; //aにx[0]の値を代入 x[2]="愛知県" //xの要素2に愛知県という文字列を代入 x[i]=t; //要素に変数を使用しても良い。
配列の先頭要素は,C言語などと同じく0から始まる。
・配列要素の長さ
lengthプロパティ
書式 配列名.length
lengthプロパティは配列の要素の数を返します。
var x=new array(3); alert(x.length); //結果:3 for(i=0;i<x.length;i++){ alert(x[i]); } //結果:102030
配列の要素を全部調査するときなどは、lengthプロパティを使う。
・配列要素の追加
var x=new array(3); x[5]=10; //値をいきなり代入してもよい。
配列要素は固定されないため、要素番号が飛んでもOK。
・配列のメソッド
join()
書式 配列名.join(区切り文字)区切り文字を省略した場合は、,(カンマ)で
配列の値を区切ります。
var x={'お','は','よ','う'}; //要素をお は よ うで指定 a=x.join(); alert(a); //結果:お,は,よ,う
javascriptで外部サイトのHTMLを取得するには、
XMLHttpRequestオブジェクトを使用するとできます。
XMLって名前がついてますけど、XMLじゃなくても大丈夫。(任意のテキストを受信することができる)
以下が手順。
1.XMLHttpRequestをnew演算子をつかってオブジェクトを生成
(IE用とFirefox用で処理分岐)
2.XMLHttpRequestのopen()メソッドを使って、
サーバのURLや通信方法、同期非同期などを設定
3.非同期通信の場合、onreadystatechange属性を使って
サーバの応答状態を調べる
4.XMLHttpRequestのsend()メソッドを使って、
open()メソッドに設定したサーバのURLに対して
通信する。
5.readystate属性を使ってサーバからデータを受信できたか調べる
6.サーバからデータを受信できたら、responseText属性から
文字列を取得できます。
・new演算子を使ってXMLHttpRequestオフジェクトを生成 var request=new XMLRequest();
・IE6以前とその他のブラウザに応じて処理分岐
function createhttprequest(){
var request=null;
if("XMLHttpRequest" in window){
request= new XMLHttpRequest();
}
else if("ActiveXObject" in window){
try{
request=new ActiveXobject("Msxml2.XMLHTTP");
}catch(e){
try{
request=new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
}
}
}
return request;
}IE6以前まではXMLHttpRequestオブジェクトはサポートされていないため、
サポートされていなかった場合、IE6以前用にActiveXオブジェクトを生成します。
・open()メソッド
第一引数は、GETやPOSTなどのHTTPリクエストメソッドの文字列
第二引数は、通信するサーバのURL
第三引数は、trueで非同期,falseで同期通信を設定
第四と第五引数は、user名とpasswordで省略可。
ex)
open("GET",'http://d.hatena.ne.jp/pepo0105/',true);
・onreadystatechange属性を使ってサーバの応答状態を調べる ex)request.onreadystatechange=sorceget; ※生成したXMLHttpRequestオブジェクト.onreadystatechange=関数名の()なし; のように記述
同期通信の場合、サーバから応答がないとクライアント側が
ビジーになってしますためonreadystatechange属性を使って
サーバの応答状態を調べます。
サーバから応答が合った場合onreadystatechange属性で設定した
関数が実行されます。
・readystateプロパティ 0:初期化されてない 1:open()メソッド成功 2:リクエストに成功 3:HTTPヘッダを取得 4:全て完了した
・statusプロパティ HTTP応答ヘッダを取得できます。 200:正常に取得
readystateプロパティが4で
かつ
statusプロパティが200
なら取得したデータを使うことができます。
・send()メソッド void send(in DOMString data); POSTメソッドでデータを送る場合は、send()メソッドの引数に データを指定する。GETを使う場合や何もデータを送らなくてはいい場合 send(null)をnullを指定する。
サンプルコード
<?xml version="1.0">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>javascriptでHTMLのソースを取得</title>
<script language="javascript" type="text/javascript">
function createhttprequest(){
var request=null;
if("XMLHttpRequest" in window){
request= new XMLHttpRequest();
}
else if("ActiveXObject" in window){
try{
request=new ActiveXobject("Msxml2.XMLHTTP");
}catch(e){
try{
request=new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
}
}
}
return request;
}
var request;
function requestsorce(url){
request=createhttprequest();
request.open("GET",url,true);
request.onreadystatechange=sorceget;
request.send(null);
}
function sorceget(){
if (request.readyState == 4 && request.status == 200){
document.form1.sorce.value=request.responseText;
}
else{
}
}
</script>
</head>
<body>
テキストボックスにurlを入力してソース取得ボタンを押してください。
<form name="form1">
<input type="text" name="urlbox" size="40">
<input type="button" value="ソース取得" onclick="requestsorce(document.form1.urlbox.value)">
<textarea name="sorce" rows="120" cols="100">
ここにソースを表示
</textarea>
</form>
</body>
</html>
javascriptでHTMLのソースを取得1
必要に迫られて外部サイトのhtmlのソースを取得するプログラムを書かなければいけな
くったので、
手抜きでjavascriptでできないかと知らべてみたら、最近流行の「Ajax」で簡単に実現
できるらしい。Ajaxの根幹技術であるXMLHttpRequestを使うとできます。
下のALL Aboutのサイトで
( # XMLHttpRequestは、セキュリティを考慮して、リクエストを送信できるのは同一ドメイン内に制限されています。もし、別ドメインとのやりとりが必要ならサーバー側で処理して受け取るか、旧来のダイナミックロードな技を使う必要があります。)
とあり教えてgoo!なんかでも別のドメインとは通信できないとかいてあったが、なぜか別のドメインでもできるのですがなぜでしょう？
Ajaxはじめの一歩 XMLHttpRequest
http://allabout.co.jp/internet/javascript/closeup/CU20050515A/index.htm
ウィリアムのいたずらの開発日記
http://blog.goo.ne.jp/xmldtp/e/625be225495dcb649161d9a3c09d6816
