jQuery dan Ajax dan serialization_jquery

Mengenai AJAX

Apa yang dipanggil Ajax, nama penuhnya ialah Asynchronous JavaScript dan XML. (Iaitu, JS dan XML tak segerak)

Ringkasnya, ini bermakna menghantar dan mendapatkan data tanpa memuat semula halaman, dan kemudian mengemas kini halaman.

Kelebihan Ajax

•Tiada sokongan pemalam diperlukan
•Pengalaman pengguna yang sangat baik
•Tingkatkan prestasi aplikasi web
•Kurangkan beban pada pelayan dan lebar jalur

Kelemahan Ajax

•Keserasian penyemak imbas tidak mencukupi
• Memecahkan kefungsian biasa butang hadapan dan belakang penyemak imbas
•Sokongan yang tidak mencukupi untuk enjin carian
•Kurang pembangunan dan alat penyahpepijat

Nah, ini semua adalah kekurangan dari beberapa tahun yang lalu. Teknologi sedang berkembang pesat, dan kekurangan ini secara beransur-ansur akan diperbaiki Sekurang-kurangnya tidak sukar untuk menyahpepijat Ajax sekarang.

Inti Ajax ialah objek XMLHttpRequest, yang merupakan kunci kepada pelaksanaan Ajax.

Saya tidak akan menyebut contoh tradisional untuk melaksanakan Ajax. Ia sangat menyakitkan sehingga saya tidak mengingatinya dengan banyak di Internet.

Mengenai Ajax dalam jQuery

Kaedah $.ajax() ialah kaedah Ajax yang merangkumi js paling asli.

load(), $.get(), $.post() dirangkumkan $.ajax()

$.getScript() dan $.getJSON() ialah enkapsulasi selanjutnya.

•kaedah muat() •Kegunaan: Muatkan kod HTML jauh dan masukkan ke dalam DOM Ia biasanya digunakan untuk mendapatkan fail data statik Strukturnya ialah: load(url [,data] [,panggilan balik]). •url ialah alamat yang diminta
•data adalah pilihan dan merupakan objek parameter yang dihantar ke pelayan
•panggilan balik ialah fungsi panggil balik, yang dipanggil sama ada permintaan berjaya atau gagal
•Anda juga boleh menambah penapis pada alamat semasa memuatkan halaman

$("#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对象
});
}); 

• Kaedah $.get() •Jelas sekali kaedah panggilan adalah berbeza, jadi fungsi ini ialah fungsi global jQuery. Kaedah dan load() sebelumnya semuanya beroperasi pada objek jQuery
•Kaedah $.get() menggunakan kaedah GET untuk membuat permintaan tak segerak Strukturnya ialah: $.get(url [,data] [,panggilan balik] [,type]) •Tiga parameter pertama tidak akan disebut cuma bezanya panggil balik hanya dipanggil jika permintaan berjaya
•Parameter jenis ialah format kandungan yang dikembalikan oleh pelayan, termasuk xml, html, skrip, json, teks dan _default
•Contoh

$("#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种
}
)
}) 

•Kaedah $.post() •Ia memainkan cara yang sama seperti kaedah get, tetapi satu ialah kaedah get dan satu lagi ialah kaedah post.
•Kaedah $.getScript() •Kadangkala tidak perlu mendapatkan semua skrip apabila halaman dimuatkan buat kali pertama, jadi jQuery menyediakan kaedah getScript untuk memuatkan fail js secara terus.
•Contoh

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

• Kaedah $.getJSON() • Digunakan untuk memuatkan fail JSON, penggunaannya adalah sama seperti di atas, kecuali data json dikembalikan

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

Sebenarnya, kembangkan JSONP untuk akses merentas domain

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

//JSONP ialah protokol tidak rasmi, yang menggunakan gabungan teg json dan 855348821b2e8f2cc4b633bf98f064df ia digunakan terutamanya untuk aplikasi web merentas domain

•Kaedah $.ajax() •Kaedah ini ialah pelaksanaan Ajax tahap terendah bagi jQuery, jadi ia secara semula jadi lebih berkuasa dan kompleks.

Walaupun ia hanya mempunyai satu parameter, objek parameter ini mengandungi banyak atribut, tetapi semuanya adalah pilihan. Semua atribut disenaraikan di bawah: • url: Alamat halaman semasa lalai, anda juga boleh menulis alamat yang diminta secara manual

•jenis: Lalai ialah GET, anda juga boleh menulis POST
•masa tamat: Tetapkan tamat masa permintaan (milisaat)
•data: menghantar data
•dataType: Jenis data yang dijangka akan dikembalikan oleh pelayan.
•beforeSend: Fungsi dipanggil sebelum menghantar Jika fungsi mengembalikan palsu, permintaan ajax akan dibatalkan.

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

•selesai: Dipanggil selepas permintaan selesai, tanpa mengira kejayaan atau kegagalan.

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

•kejayaan: fungsi panggil balik selepas permintaan berjaya

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

•ralat: Fungsi dipanggil apabila permintaan gagal

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

•global: Lalai adalah benar. Menunjukkan sama ada untuk mencetuskan acara Ajax global.
•Serialize elements •serialize() method •Ia boleh mensiri kandungan elemen DOM ke dalam rentetan

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

•kaedah serializeArray() •Ia boleh mensiri kandungan elemen DOM ke dalam format JSON
•Kaedah $.param() •Ini ialah teras kaedah bersiri, digunakan untuk mensiri tatasusunan atau objek mengikut pasangan nilai kunci

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

•Acara global Ajax dalam jQuery •kaedah ajaxStart(): dicetuskan apabila permintaan Ajax bermula
•kaedah ajaxStop(): dicetuskan apabila permintaan Ajax tamat

<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);
}