Ajax の概要_html/css_WEB-ITnose-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

Ajax の概要_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:53 AM

Ajax についてはよくご存知だと思いますが、それが何であるかについて本当に話したいですか?完全な定義を与えている人は多くないと思われます。

W3C による Ajax の具体的な定義は次のとおりです:

AJAX = 非同期 JavaScript および XML (非同期 JavaScript および XML)。

つまり、AJAX はサーバーとデータを交換し、ページ全体をリロードせずに Web ページの一部を更新する技術です。

AJAX は、高速で動的な Web ページを作成するためのテクノロジーです。

AJAX を使用すると、バックグラウンドでサーバーと少量のデータを交換することで、Web ページを非同期的に更新できます。これは、ページ全体を再読み込みしなくても、Web ページの一部を更新できることを意味します。

従来の Web ページ (AJAX を使用しない) では、コンテンツを更新する必要がある場合、Web ページ全体をリロードする必要があります。

もちろん、Ajax を学習する前に、次の知識の基本を理解しておく必要があります:

HTML /

すべての最新のブラウザは XMLHttpRequest オブジェクトをサポートしています (IE5 と IE6 は ActiveXObject を使用します)。最新のブラウザ (IE7 以降、Firefox、Chrome、Safari、Opera) にはすべて XMLHttpRequest オブジェクトが組み込まれています。

XMLHttpRequest は、バックグラウンドでサーバーとデータを交換するために使用されます。これは、ページ全体を再読み込みしなくても、Web ページの一部を更新できることを意味します。

XMLHttpRequest を作成するための具体的なコード

は次のとおりです:

//为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject var xmlhttp;if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari    xmlhttp = new XMLHttpRequest();}else {// code for IE6, IE5  老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}

ログイン後にコピー

サーバーとデータを交換するための XMLHttpRequest オブジェクトを導入する前に、その後の開発を容易にするために、まず get メソッドと post メソッドの長所と短所を簡単に理解します。より適切なリクエスト方法を選択してください。

POST と比較して、GET はより簡単かつ高速で、ほとんどの場合に機能します。

ただし、次の場合は POST リクエストを使用してください: キャッシュされたファイルが使用できない (サーバー上のファイルやデータベースを更新する)

大量のデータをサーバーに送信する (POST にはデータサイズ制限がない)

不明な文字を含むファイルの送信ユーザーが入力する場合、POST は GET よりも安定していて信頼性があります。

XMLHttpRequest は、主に open メソッドと send メソッドを通じてサーバーとデータを交換します。 open メソッドで get メソッドが使用されている場合は、send メソッドが使用されます。パラメータを渡す必要はありません。 post メソッドが使用される場合、querystring のような文字列が send メソッドに渡されます。

以下は、いくつかの主要なメソッドの簡単な紹介です:

Method

Description

open(method,url,async)

リクエストのタイプ、URL、およびリクエストを非同期的に処理するかどうかを指定します。。 async: true (非同期) または false (同期) setRequestHeader(header,value)

method: リクエストのタイプ; GET または POST

url: サーバー上のファイルの場所

send(string)

リクエストを送信するサーバーに。

string: POST リクエストのみ

HTTP ヘッダーをリクエストに追加します。

header: ヘッダーの名前を指定します

value: ヘッダーの値を指定します

事实上，open方法中的async参数如果设计为false的话，那么发送的请求则跟传统的方式没有区别，也就是说必须等待服务器端数据回来之后才能接着进行下步操作。javaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢，应用程序会挂起或停止。所以我们不推荐使用 async=false。

当您使用 async=false 时，请不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可：

xmlhttp.open("GET", "test1.txt", false);xmlhttp.send();document.getElementById("myDiv").innerHTML = xmlhttp.responseText;

ログイン後にコピー

当使用 async=true 时，请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数：

xmlhttp.onreadystatechange = function () {    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {        document.getElementById("myDiv").innerHTML = xmlhttp.responseText;    }}xmlhttp.open("GET", "test1.txt", true);xmlhttp.send();

ログイン後にコピー

大家注意当使用async=true 时,它的返回值当中有两个重要的属性，那便是responseText 和responseXML 。其中responseText 获得字符串形式的响应数据而responseXML 获得 XML 形式的响应数据。如果来自服务器的响应并非 XML，请使用 responseText 属性。如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，请使用 responseXML 属性。

在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。

当 readyState 等于 4 且状态为 200 时，表示响应已就绪

当请求被发送到服务器时，我们需要执行一些基于响应的任务。

每当 readyState 改变时，就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息。

下面是 XMLHttpRequest 对象的三个重要的属性：

属性描述

onreadystatechange

存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。

readyState

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

0: 请求未初始化

1: 服务器连接已建立

2: 请求已接收

3: 请求处理中

4: 请求已完成，且响应已就绪

status

200: "OK"

404: 未找到页面

下面以一个简单的demo温习一下上述介绍的基础知识

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <title></title>    <script type="text/javascript">        var xmlhttp;        function loadXMLDoc(url) {            xmlhttp = null;            if (window.XMLHttpRequest) {// code for Firefox, Opera, IE7, etc.                xmlhttp = new XMLHttpRequest();            }            else if (window.ActiveXObject) {// code for IE6, IE5                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");            }            if (xmlhttp != null) {                xmlhttp.onreadystatechange = state_Change;                xmlhttp.open("GET", url, true);                xmlhttp.send(null);            }            else {                alert("Your browser does not support XMLHTTP.");            }        }        function state_Change() {            if (xmlhttp.readyState == 4) {// 4 = "loaded"                if (xmlhttp.status == 200) {// 200 = "OK"                    document.getElementById('T1').innerHTML = xmlhttp.responseText;                }                else {                    alert("Problem retrieving data:" + xmlhttp.statusText);                }            }        }    </script></head><body onload="loadXMLDoc('example/ajax/test_xmlhttp.txt')">    <div id="T1" style="border: 1px solid black; height: 40px; width: 300px; padding: 5px">    </div>    <br />    <button onclick="loadXMLDoc('example/ajax/test_xmlhttp2.txt')">        Click</button></body></html>

ログイン後にコピー

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。