1. Ajaxの原理
Ajax の正式名は、「Async JavaScript and XML」です。
Webページを更新せずに非同期に更新するためのJS+XMLデータオブジェクトで、ページ全体を更新せずにWebコンテンツの一部を更新できる技術です。簡単に言えば、XMLHttpRequest オブジェクトを通じてサーバーに非同期リクエストを送信します。サーバーからデータを取得し、JavaScript で dom 要素を操作してページを更新します。
第二に、Ajax の原理の実現
1. xhr 非同期オブジェクトをインスタンス化します。 var xhr=new XMLHttpRequest()
2. リクエスト接続を確立します。 xhr.open('get','url address',true) //リクエスト タイプ get、post パス: URL アドレス true: 非同期リクエスト、false : 同期リクエスト
3. 送信リクエスト xhr.send()
4. 送信成功かどうか xhr.onreadystatechange=function(){if(xhr.readyState==4){ //送信成功か: http request status: 0 ,1 ,2,3,4
if(xhr.status==200) //サーバー応答ステータス: 200<=xhr.status<300||xhr.status=304 は成功を意味します
{ //リクエストが成功した後の処理: 応答の内容 //console.log(xhr.responseText); } else { //リクエストが失敗した場合の対処方法: ステータスを表示します // console.log(xhr.status); }
}}
3、onreadystatechange イベント
HTTPリクエストステータスコード：5状態readyState値
0初期状態（ajaxオブジェクト作成完了）
1接続済み（openメソッドが正しく実行された）
2送信完了（送信実行完了）
3 完全なヘッダー URL を受信+get
4 完全な本文投稿を受信
0 1 2 3 4 ステータス、成功または失敗によって完了がトリガーされます。 4
サーバーは http 応答コードを返します。
200<=xhr.status<300||xhr.status=304 は成功を意味します。
if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304)
成功ステータス コード:
200 - サーバーはページを正常に返しました。
304 - 変更されていません。
失敗ステータス コード:
404 - 要求されたページは存在しません。
503 - サーバーは一時的に利用できません。
500 - 内部サーバー エラーです。