AJAX文法

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
  • URL:サーバ上のファイルの場所
  • 非同期:真(非同期)またはfalse(同期)します
送信(文字列

サーバに要求を送信します。

  • 文字列:POSTのみを要求

GETやPOST?

POSTと比較して、簡単かつ迅速に取得し、ほとんどのケースで使用することができます。

ただし、次の場合には、POSTリクエストを使用してください:

  • キャッシュファイルを使用します(ファイルをやサーバ上のデータベースを更新)することはできません
  • サーバーへ(POSTデータの量を制限していない)、大量のデータを送信します
  • ユーザー入力を送信することは未知の文字が含まれている場合、POSTは、より安定してGETよりも信頼性が高いです

URL - サーバー上のファイル

open()メソッド  のurl  パラメータは、ファイルサーバーのアドレスです。

xmlhttp.open( "GET"、 "ajax_test.html"、真の);

ファイルには、(サーバー上でタスクを実行することができ、戻り応答、前)の.aspや.phpのような.TXTおよび.xml、またはサーバーのスクリプトファイルとしてファイルの任意のタイプとすることができます。

  • 非同期 - TrueまたはFalse?

    JavaScriptとXML(非同期JavaScriptとXML)非同期AJAX手段。

    AJAX XMLHttpRequestオブジェクトを使用する場合、次に、非同期パラメータopen()メソッドは、真でなければなりません。

    xmlhttp.open( "GET"、 "ajax_test.html"、真の);

    Web開発者のために、非同期の要求は大きな前進である送ります。サーバーによって実行される多くのタスクは非常に時間がかかります。AJAXの前に、アプリケーションがハングアップしたり、停止する原因となり、発生します。

    AJAXは、JavaScriptにより、サーバからの応答を待たずに、しかし:

  • サーバーの応答を待っている間に他のスクリプトを実行します
  • 応答は、応答を処理する準備ができている場合には
 

サーバーの応答

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>

 

发布了100 篇原创文章 · 获赞 18 · 访问量 3万+

おすすめ

転載: blog.csdn.net/sereasuesue/article/details/100653229