Ajaxを利用した詳細な分析

今回は、Ajax の使用に関する詳細な分析をお届けします。Ajax を使用する際の 注意事項 は何ですか? 実際の事例を見てみましょう。

Ajax入門

Ajax(Asynchronous JavaScript And Xmlの略)と考えられています。現在、ブラウザが現在のページを更新せずにサーバーと通信できるようにする技術は、Ajax と呼ばれています。

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

非同期とは、送信者がデータを送信した後、受信者が応答を返すのを待たずに、次のデータ パケットを送信することを意味します。

通常、Web ページを更新せずにサーバーと通信する方法:

• Flash フレーム

• フレームセット: Web ページがフレームのセットを使用して構築されている場合、全体に影響を与えることなく、フレームの 1 つだけを更新できます。 page

• XMLHttpRequest: このオブジェクトは、Web ページがサーバーと通信できるようにする JavaScript の拡張機能です。 Ajax アプリケーションの作成に最適です。実際、Ajax は通常、XMLHttpRequest (XHR) オブジェクトと同義とみなされます

ajax基本的な使い方

Ajax は私たちの開発で使用する必要があるテクノロジーであり、ajax は非同期の JavaScript と XML、しかし現在では、データのやり取りを完了するために json を使用します。Ajax の役割は 1 つだけで、データの送信とデータの受信がその中核となる唯一の機能です。

ajaxの実装はXMLHttpRequestに依存しており、その基本的な使い方は以下の通りです:

var xhr;
window.XMLHttpRequest?xhr = new XMLHttpRequest():xhr = new ActiveXObject("Microsoft.XMLHTTP");
xhr.open("get","demo!register.action?name=zt&age=23",true);
xhr.send(null);
xhr.onreadystatechange = function(){
　　if(xhr.readyState==4&&xhr.status==200){
 　　alert(JSON.parse(xhr.responseText));
　　}
}

ajaxの役割はデータの送信と受信です: 1. XMLHttpRequestオブジェクトを取得します

2.データの送信

3. サーバーから返されたデータを受信して​​処理します

データの非同期リクエストを実装するための上記の手順に基づいて、最新のブラウザーでは、最初に xhr オブジェクトをインスタンス化を通じて直接取得できます。 var xhr = new XMLHttpRequest(); IE5 および IE6 では、ActiveXObject を使用して xhr オブジェクトを取得する必要があります: var xhr = new ActiveXObject("Microsoft.XMLHTTP")。

この時点で、xhr オブジェクトを取得しました。次のステップは、データを送信するメソッドです。xhr.open() メソッドは 5 つのパラメーターを受け取ることができます。最初の 3 つ:

xhr.open(arg1,arg2,arg3)

arg1 は、データをリクエストするメソッドが通常 get または post であることを示します

arg2 は、リクエストされたサーバーのアドレスを示します

arg3 は、このリクエストが同期か非同期かを示します ajax の優れた機能は非同期であるため、一般的に非同期メソッドを使用します。 3 つのパラメーターは true に設定されます (true は非同期リクエストを作成することを意味し、false は同期リクエストを作成することを意味します)

xhr.open() メソッドは、open を呼び出した後はリクエストを準備するだけであり、通信しません。この関数は後でサーバーとの通信を開始し、send()

関数

のパラメータがリクエストボディとしてサーバーに送信されます。 open() 関数でリクエスト モードを get として指定する場合、通常は send() を xhr.send(null) に設定します。リクエスト本文を通じてデータを送信したい場合は、open( のリクエスト モードを設定する必要があります。 ) 関数を送信すると同時に、送信する必要のあるデータを send() 関数のパラメーターとして使用します: xhr.send(param)。send() 関数を呼び出した後、サーバーとの通信が開始されます。

xhr のすべての設定は send() 関数の前に設定する必要があります:

 xhr.open(...);
 xhr.setRequestHeader(...);
 xhr.overrideMimeType(...);
 xhr.onreadystatechange = function(){...};
 xhr.send(...);

ただし、xhr.onreadystatechange はイベントであるため、send() の後に実行することもできます。 xhr は send() 関数の前に置かれます。

send() の後、xhr.readyState と xhr.status を通じてこのリクエストのステータスを監視できます。xhr.readyState==4&&xhr.status==200 が満たされた場合、リクエストは成功です。成功しました。xhr.responseText を通じてサーバーから返されたデータを取得できます。xhr.responseText は文字列であることに注意してください。

ajax共通API

　　上面的请求过程是一个最基本的请求过程xhr对象还有几个经常使用的方法分别为xhr.abort()、xhr.setRequestHeader()、xhr.overrideMimeType()。

　　xhr.abort()：终止一个请求，直接调用即可不需要设置参数

xhr.abort()

　　xhr.setRequestHeader()：设置发送的请求头：

xhr.setRequestHeader("Content-Type","application/json; charset=utf-8")

　　第一个参数表示要设置的header，第二个参数表示要设置的header的值。xhr.setRequestHeader()必须在xhr.open()和xhr.send()之间，否则会抛出异常，同时xhr.setRequestHeader()的第一个参数是对大小写不敏感的只要我们字母写的对就能够设置成功，但是出于易读性我们要设置为正确的格式。

　　xhr.overrideMimeType()：重写响应头的Content-Type：

xhr.overrideMimeType('text/plain; charset=utf-8')

 　　xhr.overrideMimeType()同样要设置在xhr.send()之前。

JSON.parse()和JSON.stringify()使用

　　JSON.parse()用来将一个对象转换为字符串，JSON.stringify()用来将一个字符串转换为对象。在利用ajax进行数据交互的过程中返回的数据多数的时候是一个JSON格式的字符串，如果服务器给我们返回了数据此时我们就需要利用JSON.parse()来解析返回的数据（xhr.responseText即为服务器返回的数据）：

xhr.onreadystatechange = function(){
　　if(xhr.readyState==4&&xhr.status==200){
 var data = JSON.parse(xhr.responseText);
　　}
}

 　　在使用post方式发送数据的过程中，如果不是文件上传一般情况下传输的也是一个JSON数据，要想能够成功的发送到后台就需要用JSON.stringify()来将JSON对象来转换为一个字符串，同时Content-Type要设置为application/json：

var sendData = {name:"zt",age:23};
...
xhr.setRequestHeader("Content-Type","application/json; charset=utf-8");
xhr.send(JSON.stringify(sendData));

　　另外利用JSON.parse()和JSON.stringify()可以实现一个对象的深拷贝功能：

var sendData = {name:"zt",age:23};
var copyData = JSON.parse(JSON.stringify(sendData));

$.ajax基本使用

 　　为了方便使用JQ为我们封装好了一个ajax来方便我们的使用：

$.ajax({
 type:"post",//请求方式
 url:"url",//请求地址
 data:"...",//发送至服务端的数据
 contentType:"...",//设置发送数据的类型如果data是一个json字符串这里要设置为application/json
 success:function(data){...},//请求成功的回调函数data可看做是服务器返回的数据
 error:function(){...}//请求失败的回调函数
 });

　　或者：

$.ajax({
 type:"post",
 url:"url",
 data:"...",
 contentType:"...",
 })
 .done(function(data){...})
 .fail(function(){...});

　　回调函数中的data即为服务器返回的数据的一个代理，直接使用即可。

　　为了简化我们的开发JQ提供了一些全局设置函数包括$.ajaxSetup()、$.()ajaxStart()、$().ajaxStop()、$().ajaxComplete()、$().ajaxError()、$().ajaxSuccess()、$().ajaxSend()。

　　$.ajaxSetup()用来设置基本的参数例如：

$.ajaxSetup({
 type:"post",
 contentType:"application/json; charset=utf-8"
 });

　　我们在使用$.ajax时可以直接这样设置：

 $.ajax({
 url:"",
 success:function(){...},
 error:function(){...}
 })

　　最终等价于：

 $.ajax({
 type:"post",
 contentType:"application/json; charset=utf-8",
 url:"",
 success:function(){...},
 error:function(){...}
 })

　　$().ajaxStart()、$().ajaxStop()、$().ajaxComplete()、$().ajaxError()、$().ajaxSuccess()、$().ajaxSend()都是用来设置一些全局回调函数的。例如我们在提交数据时为了防止多次提交我们需要在发送请求时产生一个loading遮罩在数据发送完成后取消遮罩，如果在每一次ajax请求时我们都设置一次就会很麻烦，此时我们就可以用全局回调函数来简化我们的操作：

　　利用全局事件在请求开始时产生一个遮罩在请求完成时取消遮罩：

$(document).ajaxStart(function(){
 loadingMask.show();
 });
 $(document).ajaxComplete(function(){
 loadingMask.hide();
 });

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

Ajax请求与Filter解析

ajax的参数过长无法提交如何处理

以上がAjaxを利用した詳細な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。