AJAX - XMLHttpRequestのオブジェクトを作成します
バックグラウンドでサーバーとデータを交換するためのXMLHttpRequest。この手段は、ことのページの特定の部分のために、ページ全体をリロードせずに更新します。
XMLHttpRequestオブジェクトを作成します。
すべての最新ブラウザ(IE7 +、Firefoxの、クロム、SafariやOperaは)ビルトインされているXMLHttpRequestオブジェクト。
XMLHttpRequestオブジェクトの構文を作成します。
variable=new XMLHttpRequest();
古いバージョンのInternet Explorer(IE5やIE6)ActiveXオブジェクトを使用しました:
variable=new ActiveXObject("Microsoft.XMLHTTP");
IE5やIE6を含むすべての近代的なブラウザに対応するためには、ブラウザがXMLHttpRequestのオブジェクトをサポートしているかどうか確認してください。サポートされている場合、XMLHttpRequestのオブジェクトが作成されます。ない場合は、ActiveXObjectのを作成します。
XMLHttpRequestオブジェクトとデータを交換するためのサーバー。
サーバーにリクエストを送ります
サーバーにリクエストを送信するには、我々はのXMLHttpRequestオブジェクトのopen()とsend()メソッドを使用します。
xmlhttp.open( "GET"、 "ajax_info.txt"、真の);
xmlhttp.send();
方法 | 説明 |
---|---|
オープン(メソッド、URL、非同期) | タイプは、リクエストを指定したURL、および非同期リクエスト処理するかどうか。
|
送信(文字列) | サーバに要求を送信します。
|
GETやPOST?POSTと比較して、簡単かつ迅速に取得し、ほとんどのケースで使用することができます。 ただし、次の場合には、POSTリクエストを使用してください:
|
URL - サーバー上のファイルopen()メソッド のurl パラメータは、ファイルサーバーのアドレスです。 xmlhttp.open( "GET"、 "ajax_test.html"、真の); ファイルには、(サーバー上でタスクを実行することができ、戻り応答、前)の.aspや.phpのような.TXTおよび.xml、またはサーバーのスクリプトファイルとしてファイルの任意のタイプとすることができます。 |
|
サーバーの応答
XMLHttpRequestオブジェクトのサーバー、使用またはのresponseXML responseTextプロパティからの応答を取得します。
プロパティ | 説明 |
---|---|
responseText | 如果来自服务器的响应并非 XML,请使用 responseText 属性。获得字符串形式的响应数据。document.getElementById("myDiv").innerHTML=xmlhttp.responseText; |
responseXML | 如果来自服务器的响应是 XML,而且需要作为 XML 对象进行解析,请使用 responseXML 属性: |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
<button type="button" οnclick="loadXMLDoc()">修改内容</button>
</body>
</html>