Kumara-hand Tibetan Dictionary

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>

【About this】 This is enhanced tool of "English Tibetan Dictionary Online" in tumblr.com. + THL's Phonetics

view-source: iframe Hand operation Tool

Blow site was closed on about 2020/02/01, so this function was stopped. -- I'm shocked !

htmlソースをJavaScriptで取得

javascriptで外部サイトのHTMLを取得するには、