Ajaxの概要と実装

今回は、Ajaxの概要と実装についてお届けします。Ajaxの概要と実装の注意点とは何ですか?実際の事例を見てみましょう。

Ajax は Asynchronous JavaScript XML の略称であり、新しい技術ではなく、既存の技術を総合的に活用したものです。この記事では、Ajaxの概要と具体的な実装方法について詳しく紹介します。困っている友達は見てみてください。お役に立てれば幸いです

1. ajax の概要

1. Ajax は、JavaScript XML の略語である Asynchronous ([ə'sɪŋkrənəs)] ではありません。新しいテクノロジーですが、現代的なテクノロジーの総合的な活用。このテクノロジーは、ページを更新せずにサーバーに追加データを要求できるため、ユーザー エクスペリエンスが向上します

2. Ajax テクノロジーの中核は、Microsoft によって初めて導入された機能である XMLHttpRequest オブジェクト (略して XHR) です。 XHR が登場する前は、Ajax スタイルの通信を実現するには、主に隠しフレームまたはインライン フレームを使用するいくつかのハックを使用する必要がありました。

3. XHR は、サーバーにリクエストを送信し、サーバーの応答を解析するためのスムーズなインターフェイスを提供します。サーバーからより多くの情報を非同期的に取得できるということは、ユーザーがクリックした後、ページを更新せずに新しいデータを取得できることを意味します。つまり、ページの更新を使用してサーバーからデータを取得できますが、必ずしも XML データであるとは限りません

2. 操作: ネイティブ Ajax および jQuery にカプセル化された ajax

1. ネイティブ Ajax:

ajax関数: リクエストを送信する (set request setRequest) レスポンスを受信する (getResponse)

A. Ajax ネイティブの方法でリクエストを送信する:

Ajax の最も重要で固定された部分は http リクエストです。

1) 接続を確立します: (IE7 以降のバージョンは XMLHttpRequest をサポートします)

var xhr = new XMLHttpRequest() //非同期リクエスト オブジェクトを作成します

2) リクエストの取得: 形式は次のとおりです。 be ( url?name1=value1&name2=value2)var xhr = new XMLHttpRequest(); //创建异步请求对象

2)Get请求：格式必须是（url?name1=value1&name2=value2）

xhr.open("get","01-register.php?name="+name);//初始化异步get请求
xhr.send(null); //与服务器建立连接

3)Post请求

xhr.open('post','01-XMLHTTPRequest-test.php');//请求报文行
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); /*post请求设置请求头*/
xhr.send('name=rose&age=20'); //请求报文体

4)get和post请求的区别：

★get不需要设置请求头，而post需要设置请求头

★get的数据传递通过url进行，而post的数据在send方法中传递

B、ajax原生方式接收响应：

/*监听服务器的响应*/
xhr.onreadystatechange=function(){
/*判断当前的响应是否成功 1.服务器做出了响应 2.响应的结果是正确的*/
 if(xhr.status==200 && xhr.readyState==4){
 var result=xhr.responseText;
 console.log(result); //输出从服务器中获取到的数据
 //接下来就可以对数据进行相应的处理了
 }
 };

C、处理响应数据：

 /*监听*/
 xhr.onreadystatechange=function(){
 if(xhr.status==200 && xhr.readyState==4){ /*判断状态*/
 var result;
 /*获取响应报文中的Content-Type*/
 var ct=xhr.getResponseHeader("Content-Type");
 /*判断Content-Type,进行数据的解析*/
 if(ct.indexOf("xml") != -1){
 result=xhr.responseXML;
 }
 else if(ct.indexOf("json") !=-1){
 result=JSON.parse(xhr.responseText);
 }
 else{
 result=xhr.responseText;
 }
 /*调用回调函数--委托--代理*/
 success && success(result);
 }
 };

 jQuery中封装的ajax

 $.ajax({
 type: 请求方式(get/post),
 url: "register.php",
 data: 发送请求数据,
 beforeSend:function(){返回false可以取消本次ajax请求},
 success:function(result){ 成功响应后调用 },
 error:function(err){ 错误响应时调用 },
 complete:function(){ 响应完成时调用(包括成功和失败) }
 });

jQuery中提供了专门的方法来序列化表单：

 $('form').serialize():   //序列化表单(即格式化key=val & key=val);rrreee

3)投稿リクエスト

rrreee4) get と post リクエストの違い:

★Get はリクエスト ヘッダーの設定が必要ありませんが、post はリクエスト ヘッダーの設定が必要です

★get のデータは URL を通じて渡されますが、post のデータは send メソッドで渡されますB、応答を受け取るための ajax ネイティブな方法:

rrreee

C. 応答データの処理:

rrreee jQueryrrreeejQuery でカプセル化された ajax は、フォームをシリアル化するための特別なメソッドを提供します: サーバーの応答ステータスを監視する必要があります。サーバーから取得したデータをそれに応じて処理します。 2) readystate: 応答ステータス、XMLHTTP リクエストの現在のステータスを返します(0) 未初期化 この記事の事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、 の他の関連記事に注目してください。 PHPの中国語サイトです！ 推奨読書:

$(' form').serialize(): / /フォームをシリアル化します (つまり、key=val & key=val 形式);3. 応答	1) onreadystatechange はJavaScript イベントの 1 つで、XMLHttpRequest のステータスを監視するために使用されます
	readyState state
ステータスの説明
🎜 このフェーズでは、XMLHttpRequest オブジェクトが作成されているかどうかを確認し、初期化を解除するために open() メソッドを呼び出す準備をします。値 0 は、オブジェクトがすでに存在していることを示します。それ以外の場合、ブラウザはオブジェクトが存在しないというエラーを報告します。 🎜🎜🎜🎜🎜🎜(1) ロード🎜🎜🎜🎜 この段階では、XMLHttpRequest オブジェクトが初期化されます。つまり、open() メソッドが呼び出され、オブジェクトのステータスがパラメーター (メソッド、URL、真実）。そして、send() メソッドを呼び出して、サーバーへのリクエストの送信を開始します。値 1 は、リクエストがサーバーに送信されていることを示します。 🎜🎜🎜🎜🎜🎜(2) 読み込み完了🎜	このステージはサーバーからの応答データを受信します。ただし、取得されるのはサーバー応答の元のデータのみであり、クライアントで直接使用することはできません。値 2 は、すべての応答データが受信されたことを示します。そして、データ分析の次の段階に備えることができます。
(3) インタラクション	この段階では、受信したサーバー側の応答データを解析します。つまり、サーバー側の応答ヘッダーによって返された MIME タイプに従って、データは、クライアントで呼び出せるように、responseBody、responseText、または responseXML 属性を介してアクセスできる形式に変換されます。ステータス 3 は、データが解析中であることを示します。
(4) 完了	この段階では、すべてのデータがクライアントが使用できる形式に解析され、解析が完了したことを確認します。値 4 は、データ解析が完了し、XMLHttpRequest オブジェクトの対応する属性を通じてデータを取得できることを示します。 、詳しくはお問い合わせください—ネットワーク伝送プロトコル (http プロトコル) をご覧ください

Ajaxログイン機能の実装

非同期読み込みのAjax実装

以上がAjaxの概要と実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。