javascript Ajax-スクロール値によるページ読み込み-
XMLHttpRequestオブジェクトのプロパティ、メソッド、イベント全部調べる
javascript
XMLHttpRequestオブジェクトってどんなメソッドとかプロパティ持っているのかって思ったのでちょっと調べてみた。
利用可能なプロパティ
| readyState | Number | XHR通信の状態を取得 |
| status | Number | HTTPステータスを取得 |
| statusText | String | HTTPステータスをテキストで取得 |
| responseText | String | レスポンスボディの内容をStringで取得 |
| responseXML | Document | レスポンスボディの内容をDocumentで取得 |
| responseType | String | レスポンスボディのデータ型を指定する |
| response | * | レスポンスボディの内容を任意のデータ型で取得 |
| upload | #1 | XMLHttpRequestUploadオブジェクトを取得する |
| timeout | Number | タイムアウトエラーが発生するまでの時間を設定 |
| withCredentials | Boolean | Cookieなどの認証情報を送信するか？ |
1 XMLHttpRequestUpload
利用可能なメソッド
| open() | 「HTTPメソッド」を指定する「アクセス先URL」を指定する |
| overrideMimeType() | 「MIME Type」のオーバーライドを設定する |
| send() | 「送信データ」を指定する「XHR通信」を開始する |
| abort() | 「XHR通信」を中止する |
| setRequestHeader() | リクエストヘッダを設定する |
| getResponseHeader() | レスポンスヘッダの情報を1つ取得する |
| getAllResponseHeaders() | レスポンスヘッダの情報をまとめて取得 |
利用可能なイベント
| onreadystatechange | Event | XHR通信の状態が変化するたびに実行される |
| onloadstart | ProgressEvent | XHR通信を開始したときに実行される |
| onprogress | ProgressEvent | 受信中に繰り返し実行される |
| onloadend | ProgressEvent | XHR通信が完了したときに実行される（失敗成功に関係なく） |
| onload | ProgressEvent | XHR送信が成功したときに実行される（成功時のみ） |
| onerror | ProgressEvent | XHR送信が失敗したときに実行される |
| onabort | ProgressEvent | XHR通信を中止すると実行される |
| ontimeout | ProgressEvent | タイムアウトエラー発生時に実行される |
こちらはAjaxによるスクロールするとtxtファイルが読み込まれるコード
[javascript]
<script type="text/javascript">
var readingpart = 0;
window.addEventListener('load',
function(event){
var elem = document.getElementById('text');
elem.addEventListener('scroll',scrollText,false);
loadText();
},false);
function loadText(){
var req = new XMLHttpRequest();
req.open('GET','part' + (readingpart + 1) + '.txt');
req.onreadystatechange = function(event){
if(req.readyState == 4){
var text = document.getElementById('text');
if(req.status == 200){
text.innerHTML += req.responseText;
readingpart++;
}
}
};
req.send();
}
function scrollText(event){
var text = event.currentTarget;
var output = document.getElementById('output');
var ss = text.scrollHeight - text.scrollTop;
output.innerHTML =
'H' + text.clientHeight +
' SH:' + text.scrollHeight + ' ST:' + text.scrollTop +
' SS:' + ss;
if(ss <= text.clientHeight){
loadText();
}
};
</script>
[/javascript]
html
[html]
<div id="wrapper">
<h1>テキスト読み込み</h1>
<div id="text"></div>
<div id="output"></div>
</div>
[/html]