jQueryとAjaxとserialization_jquery

AJAX について

いわゆる Ajax で、正式名は Asynchronous JavaScript and XML です。 (つまり、非同期の JS と XML)

簡単に言うと、ページを更新せずにデータを送受信し、ページを更新することを意味します。

Ajax の利点

•プラグインのサポートは必要ありません
•優れたユーザーエクスペリエンス
•Web アプリケーションのパフォーマンスを向上させます
•サーバーと帯域幅の負担を軽減

Ajax の欠点

•ブラウザの互換性が不十分
• ブラウザの「進む」ボタンと「戻る」ボタンの通常の機能を無効にします
•検索エンジンのサポートが不十分
•開発およびデバッグツールの欠如

まあ、これらはすべて数年前の欠点でした。テクノロジーは急速に発展しており、これらの欠点は徐々に補われるでしょう。少なくとも、現在では Ajax をデバッグするのは難しくありません。

Ajax の中核は XMLHttpRequest オブジェクトであり、これが Ajax 実装の鍵となります。

Ajax の実装例については、あまりにも面倒なので、インターネットで何度も調べました。

jQuery の Ajax について

$.ajax() メソッドは、最もオリジナルな js をカプセル化する Ajax メソッドです。

load()、$.get()、$.post() は $.ajax() でカプセル化されます

$.getScript() と $.getJSON() はさらにカプセル化されています。

•load() メソッド •用途: リモート HTML コードをロードし、DOM に挿入します。構造は、load(url [,data] [,callback]) です。 •url はリクエストされたアドレスです
•dataはオプションであり、サーバーに送信されるパラメータオブジェクトです
•callback はコールバック関数であり、リクエストが成功したか失敗したかに関係なく呼び出されます
•ページをロードするときにアドレスにフィルタを追加することもできます

$("#resDiv").load("test.html .myClass");//这个div里只载入test.html页面里面 样式为myClass 的元素


//举一个完整的例子
$(function(){
$("#resDiv").load("text.php",{name:"troy",textInfo:"hello"},function(responseText,textStatus,XMLHttpRequest){
//responseText：请求返回的内容
//textStatus： 请求状态：success、error、notmodiffied、timeout 4种 
//XMLHttpRequest: XMLHttpRequest对象
});
}); 

•$.get()メソッド•当然呼び出し方法が違うので、この関数はjQueryのグローバル関数です。前のメソッドとload()はすべてjQueryオブジェクトで動作します
• $.get() メソッドは、GET メソッドを使用して非同期リクエストを作成します。構造は次のとおりです。 $.get(url [,data] [,callback] [,type]) •最初の 3 つのパラメータについては説明しません。唯一の違いは、リクエストが成功した場合にのみコールバックが呼び出されることです
•type パラメータは、xml、html、script、json、text、_default
など、サーバーから返されるコンテンツの形式です。 •例

$("#send").click(function()
$.get("get1.php"
,{
username:$("#username").val(),
content:$("#content").val()
}
,function(data,textStatus){
//data: 返回的内容，可以是XML文档、JSON文件、HTML片段
//textStatus: 请求状态：success、error、notmodiffied、timeout 4种
}
)
}) 

•$.post() メソッド•get メソッドと同じように動作しますが、1 つは get メソッド、もう 1 つは post メソッドです。
•$.getScript() メソッド •最初にページを読み込むときにすべてのスクリプトを取得する必要がない場合があるため、jQuery では js ファイルを直接読み込むための getScript メソッドが提供されています。
•例

$('#send').click(function(){
$.getScript('test.js',function(){
//do something 这个时候脚本已经加载了，不需要再对js文件进行处理
});
}); 

• $.getJSON() メソッド • JSON ファイルをロードするために使用されます。JSON データが返されることを除いて、使用法は上記と同じです

$('#send').click(function(){
$.getJSON("myurl",function(data){
var html="";
$.each(data,function(commentIndex，comment){
html+=commentIndex+":"+comment['username']+";";
})
alert(html);
})
});
//注意一下ecch这种玩法，同样是个全局函数。他的回调函数中，第一个参数为成员的索引，第二个为变量和内容 

ところで、クロスドメイン アクセス用に JSONP を拡張します

$("#send").click(function(){
$.getJSON("http://www.某网站.com/services/getMyCmpJson?tags=car&tagmode=any&format=json&jsoncall back=?"
,function(data){
//某些操作
}
)
})

//JSONP は、json タグと <script> タグの組み合わせを使用する非公式プロトコルで、主にクロスドメイン Web アプリケーションに使用されます。 </script>

•$.ajax() メソッド•このメソッドは、jQuery の最低レベルの Ajax 実装であるため、当然より強力で複雑です。

このパラメータ オブジェクトにはパラメータが 1 つしかありませんが、多くの属性が含まれていますが、それらはすべてオプションです。すべての属性は以下にリストされています: • url: デフォルトの現在のページのアドレス。要求されたアドレスを手動で書き込むこともできます

•type: デフォルトは GET ですが、POST と書くこともできます

•timeout: リクエストのタイムアウト (ミリ秒) を設定します
•data: 送信データ
•dataType: サーバーから返されることが予想されるデータ型。
•beforeSend: 送信前に呼び出される関数。関数が false を返した場合、ajax リクエストはキャンセルされます。

function(XMLHttpRequest){//XMLHttpRequest是唯一的参数
this;//调用本次Ajax请求时传递的options参数
} 

•complete: 成功または失敗に関係なく、リクエストが完了した後に呼び出されます。

function(XMLHttpRequest，textStatus){//textStatus描述成功请求类型
this;//调用本次Ajax请求时传递的options参数
}

•success: リクエストが成功した後のコールバック関数

function(data,textStatus){//data为成功返回的数据
this;//调用本次Ajax请求时传递的options参数
}

•error: リクエストが失敗したときに呼び出される関数

function(XMLHttpRequest，textStatus,errorThrown){
// textStatus为错误信息，errorThrown为捕获的错误对象，通常只有其中一个包含信息
this;//调用本次Ajax请求时传递的options参数
} 

•グローバル: デフォルトは true です。グローバル Ajax イベントをトリガーするかどうかを示します。

•要素のシリアル化 •serialize()メソッド •DOM要素の内容を文字列
にシリアル化できます。

//不仅可以序列化整个表单，也可以序列化单个元素，并且都是自动编码过的
$.post("myurl",$("#form1").serialize(),function(data,textStatus){
$("#resText").html(data);
})

•serializeArray() メソッド•DOM 要素のコンテンツを JSON 形式にシリアル化できます

•$.param()メソッド •これはserializeメソッドの中核であり、キーと値のペアに従って配列またはオブジェクトをシリアル化するために使用されます

var obj={a:1,b:2,c:3};
var k=$.param(obj);//输出为a=1&b=2&c=3 

•jQuery の Ajax グローバル イベント •ajaxStart() メソッド: Ajax リクエストの開始時にトリガーされます

•ajaxStop() メソッド: Ajax リクエストが終了するとトリガーされます

<div id="loading">加载中...</div>
$("#loading").ajaxStart(function(){
$(this).show();//ajax开始请求就显示加载中
});
$("#loading").ajaxStop(function(){
$(this).hide();//ajax开始结束就隐藏加载中
}); 

•ajaxComplete():当Ajax请求完成就触发
•ajaxError():当Ajax请求发生就触发,捕捉到的错误可以作为最后一个参数传递
•ajaxSend():当Ajax请求发送前就触发
•ajaxSuccess():当Ajax请求成功就触发
•如果想使某个Ajax请求不受全局事件的影响，可以在$.ajax中将global属性设置为false，这个在前面已经讲过了。当然也可以在ajax请求前：

$.ajaxPrefilter(function(options){//每次发送前请求
options.global=true;
})

好吧，写完了。最后顺带提一下，setTimeout("doMethod()",4000);为4s后执行doMethod这个函数。

//一个简单的定时发送功能
function updateMsg(){
$.post("myurl",{time:timestamp},function(xml){
//do something
});
setTimeout("updateMsg()",4000);
}