jQueryとAjaxとserialization_jquery-jsチュートリアル-php.cn

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&#63;tags=car&tagmode=any&format=json&jsoncall back=&#63;"
,function(data){
//某些操作
}
)
})

ログイン後にコピー

//JSONP は、json タグと

人気のチュートリアル

詳細>