ホームページ > 記事 > ウェブフロントエンド > ajaxの基本
ajaxの基本
- 巴扎黑オリジナル
- 2016-11-25 14:45:471194ブラウズ
1つ。 ajax は非同期 JavaScript および XML です。高速で動的な Web ページを作成するために使用されるテクノロジーです。バックグラウンドでサーバーと少量のデータをやり取りすることで、Webページを非同期に更新できるため、Webページを再読み込みせずに部分読み込みを行うことができます。
2つ。オブジェクトの作成。 XMLHttpRequest は ajax の基礎です。
1. 作成構文: new XMLHttpRequest();
2. 古いバージョンの作成: new ActiveXObject("Microsoft.XMLHTTP")。サーバーリクエスト。
open(method,url,async).
メソッド: リクエストの種類: GET または POST を表します
url: サーバー上のファイルの場所。
async: true (非同期リクエスト) または false (同期リクエスト)。
send(string).
リクエストをサーバーに送信します。
文字列: POST リクエストにのみ使用されます。送信するパラメータを表します
4つ。サーバーの応答。
responseText(): 応答データを文字列形式で取得します。非 XML リクエストの場合は、responseText 属性を使用します。
responseXML(): 対応するデータを XML 形式で取得します。
5つ。 onreadystatechange イベント。
応答ベースのタスクを実行するために使用されます。
onreadystatechange: ストレージ関数。この関数は、readyState 属性が変更されるたびに呼び出されます。
readyState: XMLHttpRequest のステータスを表します。 0から4に変化します。 3: リクエストは処理中です
4: リクエストは完了し、レスポンスの準備が整いました。
ステータス: 200: ‘OK’ 404: ページが見つかりません。
例:
<html><!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for 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","文件的地址",true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改内容</button>
</body>
</html>
対応するコンテンツを取得するには、ファイルのアドレスを追加する必要があります。