AJAXのクイックラーニング

AJAXのクイックラーニング
Asynchronous Javascript And XML、略称AJAX、非同期のJSとXML、それは新しい技術ではありませんて、ただ古い技術のJSは新しい使い方を採用します
前提:
html、css、javaScript、json
同期要求と非同期要求
要求を同期します.ブラウザが要求した後、サーバが要求を返すまで待たなければなりません.ブラウザの他の操作はできません.
非同期リクエスト、ブラウザが応答を返す前にブラウザの他の操作も可能
同期リクエストにより、ページ全体がリフレッシュされます.
非同期リクエスト、ローカルリフレッシュ
AJAXの対象
XMLHttpRequestオブジェクトは、非同期リクエストを送信するために使用されます.もちろん、同期リクエストを送信することもできます.
AJAXコード作成の手順

XMLHttpRequestオブジェクトを作成する

登録コールバック関数

サービス側との接続を確立する

サーバへのリクエストの送信

リクエストをサーバに送信する必要がある場合は、XMLHttpRequestオブジェクトのopen()メソッドとsend()メソッドを使用します.

xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();

方法
説明
open(method, url,async)
リクエストのタイプ、URL、およびリクエストを非同期で処理するかどうかを指定します.
method:要求のタイプGETまたはPOST
url:ファイルがサーバの場所
async:true(非同期)false(同期)
send(string)
要求をサーバに送信
string:POST要求のみ
setRequestHeader(header,value)
要求にHTTPヘッダを追加
header:ヘッダの名前を指定
value:ヘッダの値を指定

送信データ

var xmlhttp;

function ajax_demo(){
  //    
  if(window.XMLHttpRequest){
    xmlhttp = new XMLHttpRequest();
  }
  else{
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP")
  }
  //      
  xmlhttp.onreadystatechange = function(){
    
	}
  //    
  xmlhttp.open("POST|GET","  URL",true|false);
  //    
  xmlhttp.send();
}

サーバ応答:サーバからの応答を取得するには、XMLHttpRequestオブジェクトのresponseTextまたはresponseXMLプロパティを使用します.
ツールバーの
説明
responseText
文字列形式の応答データを取得します.
responseXML
XML形式の応答データを取得します.

onreadystatechangeイベント
リクエストがサーバに送信されると、応答ベースのタスクを実行する必要があります.readyStateが変更されるたびにonreadystatechangeイベントがトリガーされます.readyStateプロパティには、XMLHttpRequestのステータス情報が格納されます.
ツールバーの
説明
onreadystatechange
readyStateプロパティが変更されるたびに呼び出される関数(または関数名)が格納されます.
readyState
XMLHttpRequestのステータスが保存されています.0から4まで変化します.
0:要求未初期化1:サーバ接続確立2:要求受信3:要求処理中4:要求完了、応答完了
status
200:「OK」404:ページが見つかりません
onreadystatechangeイベントでは、サーバが処理の準備ができているときに実行するタスクを規定します.
readyStateが4に等しく、ステータスが200の場合、応答が完了したことを示します.

xmlhttp.onreadystatechange = function()
{
  if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
    document.getElementById().innerHTML.responseText;
	}
}

Callback関数の使用
callback関数は、パラメータ形式で別の関数に渡される関数です.
Webサイトに複数のAJAXタスクがある場合は、XMLHttpRequestオブジェクトを作成するための標準的な関数を作成し、AJAXタスクごとに呼び出す必要があります.
この関数呼び出しには、URLとonreadystatechangeイベントが発生したときに実行されるタスク(呼び出しごとに異なる場合があります):

function myFunction()
{
loadXMLDoc("ajax_info.txt",function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  });
}