Ajaxの使い方簡単チュートリアル

非同期対話と同期対話

• Ajax に関して言えば、非同期送信と同期送信について話さなければなりません。

• 非同期は通信方法です。送信者がデータを送信した後、受信者が応答を返すのを待たずに、次のデータ パケットを送信します。

• 同期とは、送信者がデータを送信し、受信者が応答を返すのを待ってから次のデータ パケットを送信する通信方法を指します。

• は次のように理解することもできます:

• 非同期送信: ただ渡してください。私は自分の仕事をしに行きます。送信が完了したら知らせてください。

• 同期送信: あなたは今送信中ですが、他のことをする前に送信が完了するのを見守りたいと思います。

Ajax とは何ですか?

• Ajaxは(Asynchronous JavaScript and Xml)の略称と考えられます。

• さて、現在のページを更新せずにブラウザがサーバーと通信できるようにする技術は Ajax と呼ばれます。

Ajax の仕組み。

• Ajax の中核は JavaScript オブジェクト XmlHttpRequest です。このオブジェクトは、Internet Explorer 5 で初めて導入されました。これは、非同期要求をサポートするテクノロジです。つまり、XmlHttpRequest を使用すると、JavaScript を使用してサーバーにリクエストを送信し、ユーザーをブロックせずに応答を処理できるようになります。

• Ajax は非同期対話プロセスを使用します。 Ajax はユーザーとサーバーの間に仲介者を導入することで、ネットワーク相互接続プロセスにおける処理待ち処理待ちの欠点を解消します。

• ユーザーのブラウザは、タスクを実行するときに Ajax エンジンを読み込みます。 Ajax エンジンは JavaScript 言語で記述されており、通常は非表示のフレームワークに隠されています。ユーザー インターフェイスとサーバー間の対話をコンパイルする役割を果たします。

• Ajax エンジンを使用すると、ユーザーとアプリケーション ソフトウェア間の対話プロセスを、ユーザーとネットワーク サーバー間の通信とは独立して非同期で進めることができます。現在、HTTP ユーザー アクションを生成する代わりに、JavaScript を使用して Ajax エンジンを呼び出すことができ、ページ全体をリロードすることなく、メモリ内データの編集、ページ ナビゲーション、およびデータ検証を Ajax によって実行できるようになりました。

• Ajax を使用すると、JSP、開発者、エンドユーザーに目に見える便利さをもたらします。

Ajax に含まれるテクノロジー:

• Ajax は、実際には、JavaScript、XHtml、CSS、Dom、Xml、XmlHttpRequest テクノロジーを含む複数のテクノロジーの組み合わせです。 。

• サーバー側言語: サーバーには、特定の情報をブラウザーに送信する機能が必要です。 Ajax はサーバーサイド言語とは何の関係もありません。

• Xml (Extensible Markup Language) は、データを記述するための形式です。 AJAX プログラムでは、サーバーとクライアント間で情報を渡すために何らかの形式が必要ですが、XML はオプションの 1 つです。

• XHTML (拡張ハイパーテキスト マークアップ言語、拡張ハイパーメディア マークアップ言語を使用) および CSS (Cascading Style Sheet、カスケード スタイル シート) の標準化されたレンダリング。
  

• DOM (Document Object Model、Document Object Model) は、動的な表示とインタラクションを実現します。
  

• 非同期データ読み取りには、XMLHTTP コンポーネント XMLHttpRequest オブジェクトを使用します。
  

• JavaScript を使用してすべてのデータをバインドして処理します。
  

Ajax の欠陥:

• Ajax は完璧なテクノロジーではなく、欠陥があります:

• AJAX は Javascript と AJAX エンジンを広範囲に使用しており、これはブラウザのサポートに依存します。これは、IE5.0 以降、Mozilla1.0、NetScape7 以降でのみサポートされています。Mozilla は AJAX もサポートしていますが、XMLHttpRequest は別の方法で提供されます。したがって、AJAX を使用するプログラムは、さまざまなブラウザとの互換性をテストする必要があります。
  

• AJAX はページコンテンツを更新するときにページ全体を更新しないため、一部のユーザーは現在のデータが古いのか更新されたのか混乱することがあります。そのためには、わかりやすい場所で「データが更新された」ことをユーザーに通知する必要があります。
  

• ストリーミング メディアのサポートは、FLASH や Java アプレットほど優れていません。
  

Ajax のコア XMLHttpRequest オブジェクト:

• XMLHttpRequest は、このオブジェクトを通じて、デスクトップ アプリケーションと同様にサーバーとのみデータを交換できます。毎回インターフェイスを更新する必要がなく、データ処理作業を毎回サーバーに引き渡す必要がなくなり、サーバーの負荷が軽減されるだけでなく、応答速度が向上し、ユーザーの待ち時間が短縮されます。時間。

  
  

• XMLHttpRequest は、IE5 で ActiveX コンポーネントとして最初に実装されました。 W3C 標準ではありません。

  
  

XMLHttpRequestオブジェクトの作成(非標準のため実装方法が統一されていません):
Internet ExplorerはXMLHttpRequestをActiveXオブジェクトとして実装します。

• 
  

他のブラウザ (Firefox、Safari、Opera...) は、ネイティブ JavaScript オブジェクトとして実装します。

• 
  

さまざまなブラウザーでの XMLHttpRequest の実装には互換性があるため、インスタンスの作成に使用されたメソッドに関係なく、同じ方法で XMLHttpRequest インスタンスのプロパティとメソッドにアクセスできます。 rytion初期化コードは次のとおりです。

• rreee
  

  xmlhttprequestオブジェクトメソッド：
bort（）：現在のリクエストを停止します。

getAllResponseHeader(): HTTP リクエストのすべての応答ヘッダーをキーと値のペアとして返します。

• getResponseHeader("headerLabel"): 指定されたヘッダーの文字列値を返します。

• open("method","url"): サーバーへの呼び出しを作成します。メソッドのパラメーターは GET または POST です。 url パラメータには、相対 URL または絶対 URL を指定できます。このメソッドには 3 つのオプションのパラメーターも含まれています。

• send(content): リクエストをサーバーに送信します。

• setRequestHeader("label","value"): 指定されたヘッダーを指定された値に設定します。 open() メソッドは、ヘッダーを設定する前に呼び出す必要があります。

• XMLHttpRequest オブジェクトのプロパティ:

• • onreadystatechange：状态改变的事件触发器。

  • readyState：对象状态：

  • 0=未初始化

  • 1=读取中

  • 2=已读取

  • 3=交互中

  • 4=完成

  • responseText：服务器进程返回数据的文本版本。

  • responseXML：服务器进程返回数据的 兼容DOM的Xml文档对象。

  • status：服务器返回的状态码，如404=“文件未找到”，200=“成功”。

  • statusText：服务器返回的状态文本信息。

  发送请求的属性和方法(重要)，使用以下3个关键部分:

  • openreadystatechange事件处理函数。

  • 该事件处理函数由服务器触发，而不是用户。

  • 在Ajax执行过程中，服务器会通知客户端当前的通信状态。这依靠更新 XMLHttpRequest 对象的 readyState 来实现。改变 readyState 属性是服务器对客户端连接操作的一种方式。

  • 每次 readyState 属性的改变都会触发 readystatechange事件，这个是核心。
    

  • open(method, url, asynch)方法。

  • XMLHttpRequest 对象的 open 方法允许程序员用一个Ajax调用向服务器发送请求。
    

  • method：请求类型，类似 “GET”或”POST”的字符串。若只想从服务器检索一个文件，而不需要发送任何数据，使用GET(可以在GET请求里通过附加在URL上的查询字符串来发送数据，不过数据大小限制为2000个字符)。若需要向服务器发送数据，用POST。
    

  • 在某些情况下，有些浏览器会把多个XMLHttpRequest请求的结果缓存在同一个URL。如果对每个请求的响应不同，这就会带来不好的结果。把当前时间戳追加到URL的最后，就能确保URL的惟一性，从而避免浏览器缓存结果。

    var url = "GetAndPostExample?timeStamp=" + new Date().getTime();

  • url：路径字符串，指向你所请求的服务器上的那个文件。可以是绝对路径或相对路径。
    

  • asynch：表示请求是否要异步传输，默认值为true(异步)。指定true，在读取后面的脚本之前，不需要等待服务器的相应。指定false，当脚本处理过程经过这点时，会停下来，一直等到Ajax请求执行完毕再继续执行。

  • send(data)方法。

  • open 方法定义了 Ajax 请求的一些细节。send 方法可为已经待命的请求发送指令。
    

  • data：将要传递给服务器的字符串。
    

  • 若选用的是 GET 请求，则不会发送任何数据， 给 send 方法传递 null 即可：request.send(null);
    

  • 当向send()方法提供参数时，要确保open()中指定的方法是POST，如果没有数据作为请求体的一部分发送，则使用null.
    

  • 完整的 Ajax 的 GET 请求示例：

    //创建Ajax引擎
    var xmlHttpReq = createXmlHttpRequest();  
                    xmlHttpReq.onreadystatechange=function(){  
                        if(xmlHttpReq.readyState==4){  
                            if(xmlHttpReq.status==200){  
                                document.getElementById("info").innerHTML=xmlHttpReq.responseText;  
                            }  
                        }  
                    }  
    
    xmlHttpReq.open("post","/webLogic/test_test.do",true);

  • setRequestHeader(header,value)：
    

  • 当浏览器向服务器请求页面时，它会伴随这个请求发送一组首部信息。这些首部信息是一系列描述请求的元数据(metadata)。首部信息用来声明一个请求是 GET 还是 POST。
    

  • Ajax 请求中，发送首部信息的工作可以由 setRequestHeader完成。
    

  • 参数header： 首部的名字; 参数value：首部的值。
    

  • 如果用 POST 请求向服务器发送数据，需要将 “Content-type” 的首部设置为 “application/x-www-form-urlencoded”.它会告知服务器正在发送数据，并且数据已经符合URL编码了。
    

  • 该方法必须在open()之后才能调用.
    

  • 完整的 Ajax 的 POST 请求示例：

    var xmlHttpReq = createXmlHttpRequest();
    				xmlHttpReq.onreadystatechange=function(){
    					if(xmlHttpReq.readyState==4){
    						if(xmlHttpReq.status==200){
    							document.getElementById("info").innerHTML=xmlHttpReq.responseText;
    						}
    					}
    				}
    				
    				xmlHttpReq.open("post","/webLogic/test_test.do",true);
    				xmlHttpReq.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    				xmlHttpReq.send("username="+"德玛"+"&pwd="+"123");

  接受--方法和属性介绍：

  • 用 XMLHttpRequest 的方法可向服务器发送请求。在 Ajax 处理过程中，XMLHttpRequest 的如下属性可被服务器更改：
    

  • 如果服务器返回的是 XML， 那么数据将储存在 responseXML 属性中。
    

  • 只用服务器发送了带有正确首部信息的数据时， responseXML 属性才是可用的。 MIME 类型必须为 text/xml。
    

  • XMLHttpRequest 的 responseText 属性包含了从服务器发送的数据。它是一个HTML,XML或普通文本，这取决于服务器发送的内容。
    

  • 当 readyState 属性值变成 4 时, responseText 属性才可用，表明 Ajax 请求已经结束。

    if(xmlHttpReq.readyState==4){
    						if(xmlHttpReq.status==200){
    							document.getElementById("info").innerHTML=xmlHttpReq.responseText;
    						}
    					}

  • 服务器发送的每一个响应也都带有首部信息。三位数的状态码是服务器发送的响应中最重要的首部信息，并且属于超文本传输协议中的一部分。
    

  • 常用状态码及其含义：
    

  • 在 XMLHttpRequest 对象中，服务器发送的状态码都保存在 status 属性里。通过把这个值和 200 或 304 比较，可以确保服务器是否已发送了一个成功的响应
    

  • 404 没找到页面(not found)
    

  • 403 禁止访问(forbidden)
    

  • 500 内部服务器出错(internal service error)
    

  • 200 一切正常(ok)
    

  • 304 没有被修改(not modified)(服务器返回304状态，表示源文件没有被修改 )
    

  • readyState 属性表示Ajax请求的当前状态。它的值用数字代表。
    

  • 每次 readyState 值的改变，都会触发 readystatechange 事件。如果把 onreadystatechange 事件处理函数赋给一个函数，那么每次 readyState 值的改变都会引发该函数的执行。
    

  • readyState 值的变化会因浏览器的不同而有所差异。但是，当请求结束的时候，每个浏览器都会把 readyState 的值统一设为 4
    

  • 0 代表未初始化。 还没有调用 open 方法
    

  • 1 代表正在加载。 open 方法已被调用，但 send 方法还没有被调用
    

  • 2 代表已加载完毕。send 已被调用。请求已经开始
    

  • 3 代表交互中。服务器正在发送响应
    

  • 4 代表完成。响应发送完毕
    

  • readyState
    

  • status
    

  • responseText
    

  • responseXML
    

  Ajax的具体使用：

  • AJAX实质上也是遵循Request/Server模式，所以这个框架基本的流程是：
    

  • responseText：将传回的信息当字符串使用；
    

  • responseXML：将传回的信息当XML文档使用，可以用DOM处理。

    function processResponse(){
       if(XMLHttpReq.readyState==4){ //判断对象状态 4代表完成
               if(XMLHttpReq.status==200){ //信息已经成功返回，开始处理信息
                      document.getElementById("chatArea").value=XMLHttpReq.responseText;
              }
       }
          }

  • 响应需要做什么：

  • 处理响应处理函数都应该做什么。
    　　首先，它要检查XMLHttpRequest对象的readyState值，判断请求目前的状态。参照前文的属性表可以知道，readyState值为4的时候，代表服务器已经传回所有的信息，可以开始处理信息并更新页面内容了。如下：
    if (http_request.readyState == 4) {
    // 信息已经返回，可以开始处理
    } else {
    // 信息还没有返回，等待
    }
    　　服务器返回信息后，还需要判断返回的HTTP状态码，确定返回的页面没有错误。所有的状态码都可以在W3C的官方网站上查到。其中，200代表页面正常。
    if (http_request.status == 200) {
    // 页面正常，可以开始处理信息
    } else {
    // 页面有问题
    }
    

  • 向服务器发出HTTP请求了。这一步调用XMLHttpRequest对象的open和send方法。 http_request.open('GET', 'http://www.example.org/some.file', true);
    http_request.send(null)
    

  • 按照顺序，open调用完毕之后要调用send方法。send的参数如果是以Post方式发出的话，可以是任何想传给服务器的内容。
    

  • 注意:如果要传文件或者Post内容给服务器，必须先调用setRequestHeader方法，修改MIME类别。如下：
    

  • http_request.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);
    这时资料则以查询字符串的形式列出，作为send的参数，例如：
    name=value&anothername=othervalue&so=on

    //发送请求
    function sendRequest(){
    //获取文本框的值
    var chatMsg=input.value;
    var url="chatServlet.do?charMsg="+chatMsg;
    //建立对服务器的调用
    XMLHttpReq.open("POST",url,true);
    //设置MiME类别,如果用 POST 请求向服务器发送数据，
    //需要将"Content-type" 的首部设置为 "application/x-www-form-urlencoded".
    //它会告知服务器正在发送数据，并且数据已经符合URL编码了。
    XMLHttpReq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    //状态改变的事件触发器,客户端的状态改变会触发readystatechange事件,
    //onreadystatechange会调用相应的事件处理函数
    XMLHttpReq.onreadystatechange=processResponse;
    //发送数据
    XMLHttpReq.send(null);
    }

  • 对象初始化

    function   createXmlHttpRequest(){
       var xmlHttp;
       try{    //Firefox, Opera 8.0+, Safari
               xmlHttp=new XMLHttpRequest();
        }catch (e){
               try{    //Internet Explorer
                      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
                }catch (e){
                      try{
                              xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                      }catch (e){}  
               }
        }
       return xmlHttp;
     }

  • 发送请求
    

  • 服务器接收
    

  • 服务器响应
    

  • 客户端接收，返回两种格式：
    

  • 修改客户端页面内容。
    

  • 只不过这个过程是异步的。
    

  • 完整的如下：

    var xmlHttpReq = createXmlHttpRequest();
    				xmlHttpReq.onreadystatechange=function(){
    					//为4表示请求和响应结束
    					if(xmlHttpReq.readyState==4){
    						//200表示响应成功
    						if(xmlHttpReq.status==200){
    							//在div上添加action返回的值
    							document.getElementById("info").innerHTML=xmlHttpReq.responseText;
    						}
    					}
    				}
    				//这是get方式发送数据，中文记得在接受时进行编码
    				xmlHttpReq.open("post","/webLogic/test_test.do?username=aaa",true);
    				//post请求时一定要加这个请求头
    //				xmlHttpReq.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    //				xmlHttpReq.send("username="+"德玛"+"&pwd="+"123");//这是post请求的发送数据方法
    				//get方式send(null)，写了也没用
    				xmlHttpReq.send(null);

以上がAjaxの使い方簡単チュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。