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>
