Penjelasan terperinci tentang jQuery Ajax
Penjelasan terperinci tentang jQuery Ajax
jQuery menyediakan beberapa fungsi untuk menghantar permintaan Ajax Inti dan paling kompleks ialah jQuery.ajax( options ), semuanya fungsi Ajax yang lain adalah panggilan yang dipermudahkan. Kita boleh menggunakan hasil ini apabila kita ingin mengawal sepenuhnya Ajax, jika tidak, lebih mudah untuk menggunakan kaedah yang dipermudahkan seperti mendapatkan, menghantar, memuatkan, dll. Jadi jQuery.ajax( pilihan ) The kaedah diperkenalkan terakhir. Mari kita perkenalkan kaedah muat yang paling mudah dahulu:
1. >Pemulangan: set pembalut jQueryPenerangan: Kaedah
muat boleh memuatkan kod fail HTML jauh dan memasukkannya ke dalam DOM.
Kaedah GET digunakan secara lalai, dan kaedah Post digunakan jika parameter data diluluskan.
- Menukar secara automatik kepada kaedah POST apabila menghantar parameter tambahan. Dalam jQuery 1.2, anda boleh menentukan pemilih untuk menapis dokumen HTML yang dimuatkan, dan hanya kod HTML yang ditapis akan dimasukkan ke dalam DOM. Sintaks adalah seperti "url #some > selector", dan pemilih lalai ialah "body>*". :
Ia digunakan terutamanya untuk mengembalikan antara muka Ajax HTML secara langsung
load ialah kaedah set pembalut jQuery yang perlu dipanggil pada set pembalut jQuery dan akan memuatkan HTML yang dikembalikan ke dalam objek. Walaupun fungsi panggil balik ditetapkan, ia masih akan dimuatkan
Walau bagaimanapun, tidak dapat dinafikan bahawa antara muka beban direka dengan bijak dan mudah untuk digunakan 🎜>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Ajax - Load</title>
<script type="text/javascript" src="../scripts/jquery-1.3.2-vsdoc2.js"></script>
<script type="text/javascript">
$(function()
{
$("#btnAjaxGet").click(function(event)
{
//发送Get请求
$("#divResult").load("../data/AjaxGetMethod.aspx?param=btnAjaxGet_click" + "×tamp=" + (new Date()).getTime());
});
$("#btnAjaxPost").click(function(event)
{
//发送Post请求
$("#divResult").load("../data/AjaxGetMethod.aspx", { "param": "btnAjaxPost_click" });
});
$("#btnAjaxCallBack").click(function(event)
{
//发送Post请求, 返回后执行回调函数.
$("#divResult").load("../data/AjaxGetMethod.aspx", { "param": "btnAjaxCallBack_click" }, function(responseText, textStatus, XMLHttpRequest)
{
responseText = " Add in the CallBack Function! <br/>" + responseText
$("#divResult").html(responseText); //或者: $(this).html(responseText);
});
});
$("#btnAjaxFiltHtml").click(function(event)
{
//发送Get请求, 从结果中过滤掉 "鞍山" 这一项
$("#divResult").load("../data/AjaxGetCityInfo.aspx?resultType=html" + "×tamp=" + (new Date()).getTime() + " ul>li:not(:contains('鞍山'))");
});
})
</script>
</head>
<body>
<button id="btnAjaxGet">使用Load执行Get请求</button><br />
<button id="btnAjaxPost">使用Load执行Post请求</button><br />
<button id="btnAjaxCallBack">使用带有回调函数的Load方法</button><br />
<button id="btnAjaxFiltHtml">使用selector过滤返回的HTML内容</button>
<br />
<div id="divResult"></div>
</body>
</html> Contoh di atas menunjukkan cara Gunakan kaedah Muat Petua: Kita mesti sentiasa memberi perhatian kepada cache penyemak imbas Apabila menggunakan kaedah GET, tambah parameter cap waktu (Tarikh bersih ()).getTime() untuk memastikan URL dihantar setiap kali Berbeza, anda boleh mengelakkan cache penyemak imbas
Petua: Apabila ruang ditambah selepas parameter url, seperti " ", ralat "simbol yang tidak dikenali" akan muncul, tetapi permintaan masih boleh dihantar seperti biasa tetapi HTML tidak boleh dimuatkan ke dalam DOM >2.jQuery.get( url, [data], [panggilan balik], [type] )Pemulangan: XMLHttpRequest
Penerangan:
Muatkan maklumat melalui permintaan HTTP GET jauh . Ini ialah fungsi permintaan GET yang mudah untuk menggantikan kompleks $.ajax. Fungsi panggil balik boleh dipanggil apabila permintaan berjaya. Jika anda perlu melaksanakan fungsi pada ralat, gunakan $.ajax.
Penjelasan:
Fungsi ini menghantar permintaan Dapatkan, dan parameter boleh disambung terus dalam url, seperti:
$.get("../data/AjaxGetMethod.aspx?param=btnAjaxGet_click"); atau melalui parameter data Pas:
$.get("../data/AjaxGetMethod.aspx", { "param": "btnAjaxGet2_click" }); Kedua-dua kaedah mempunyai kesan yang sama, parameter data akan ditambah secara automatik pada URL yang diminta
function (data, textStatus) {
// data could be xmlDoc, jsonObj, html, text, etc...
this; // the options for this ajax request
}di mana data berada data yang dikembalikan, testStatus mewakili kod status, yang mungkin nilai berikut:"timeout","error","notmodified","success","parsererror"Ini dalam fungsi panggil balik adalah untuk mendapatkan rujukan kepada objek pilihan Untuk pelbagai arahan tentang pilihan, sila lihat :
http://docs.jquery.com/Ajax/jQuery.ajax#options
Parameter jenis merujuk kepada jenis data data, yang mungkin nilai berikut:
"xml", "html", "script", "json", "jsonp", "text ".
default kepada "html".
kaedah jQuery.getJSON( url, [data], [panggilan balik] ) adalah bersamaan dengan jQuery.get(url, [data] ,[panggilan balik ], "json")
3. jQuery.getJSON( url, [data], [panggilan balik] )
Pemulangan: XMLHttpRequest
bersamaan dengan: jQuery.get(url, [data],[panggilan balik], "json")
Penerangan:
Muat data JSON melalui permintaan HTTP GET.
Dalam jQuery 1.2, anda boleh memuatkan data JSON daripada domain lain dengan menggunakan fungsi panggil balik dalam bentuk JSONP, seperti "myurl?callback=?". jQuery secara automatik akan menggantikan ? dengan nama fungsi yang betul untuk melaksanakan fungsi panggil balik.
Nota: Kod selepas baris ini akan dilaksanakan sebelum fungsi panggil balik ini dilaksanakan.
Penjelasan:
Fungsi getJSON hanya menetapkan parameter jenis fungsi get kepada "JSON". Data yang diperolehi dalam fungsi panggil balik telah dihuraikan mengikut Format JSON Objeknya ialah:
$.getJSON("../data/AjaxGetCityInfo.aspx", { "resultType": "json" }, function(data, textStatus)
{
alert(data.length);
alert(data[0].CityName);
});Rentetan yang dikembalikan oleh pelayan adalah seperti berikut:
[{""pkid"":""0997"",""ProvinceId" ":"" XJ"",""CityName"":""Akesu"",""CityNameEn"":""Akesu"",""PostCod"":""843000"",""isHotCity"": palsu},
{""pkid"":""0412"",""ProvinceId"":""LN"",""CityName"":""Anshan""," "CityNameEn"" :""Anshan"",""PostCode"":""114000"",""isHotCity"":false}]
Dalam contoh, saya mengembalikan tatasusunan. Gunakan data. panjang untuk mendapatkan tatasusunan. Bilangan elemen, data[0] mengakses elemen pertama, data[0].CityName mengakses atribut CityName bagi elemen pertama.
4.jQuery .getScript( url, [panggilan balik] )
Pemulangan: XMLHttpRequest
Bersamaan dengan: jQuery.get(url, null, [panggilan balik] , "skrip")
Penerangan:
Muat dan laksanakan fail JavaScript melalui permintaan HTTP GET.
Sebelum jQuery 1.2, getScript hanya boleh memanggil fail JS dalam domain yang sama. Dalam 1.2, anda boleh memanggil fail JavaScript merentas domain. Nota: Safari 2 atau lebih awal tidak boleh melaksanakan skrip secara serentak dalam skop global. Jika anda menambah skrip melalui getScript, sila tambahkan fungsi kelewatan.
Penjelasan:
Apabila saya menggunakan perpustakaan kelas dojo pada masa lalu, fail lalai rasmi tidak menyokong domain silang, yang akhirnya menyebabkan saya berhenti menggunakan dojo (walaupun saya menemui versi merentas domain di Internet, tetapi rasanya tidak sempurna). Jadi saya amat mengambil berat tentang teras fungsi ini, saya telah melakukan penyelidikan tentang pelaksanaan dan penggunaan
Pertama-tama fahami pelaksanaan dalaman jQuery fungsi ini, masih menggunakan fungsi get. . Semua fungsi jQuery Ajax termasuk get finally use jQuery.ajax(), getScript Parameter jenis dengan nilai "skrip" dihantar, dan akhirnya permintaan dengan skrip jenis diproses seperti berikut dalam fungsi Ajax:
var head = document.getElementsByTagName("head")[0];
var script = document.createElement("script");
script.src = s.url;Kod di atas secara dinamik mencipta blok pernyataan skrip, dan Tambahnya pada kepala:
head.appendChild(script);
Selepas skrip dimuatkan, padamkannya dari kepala:
// Handle Script loading
if ( !jsonp ) {
var done = false;
// Attach handlers for all browsers
script.onload = script.onreadystatechange = function(){
if ( !done && (!this.readyState ||
this.readyState == "loaded" || this.readyState == "complete") ) {
done = true;
success();
complete();
// Handle memory leak in IE
script.onload = script.onreadystatechange = null;
head.removeChild( script );
}
};
} Fungsi ini diuji terutamanya untuk akses merentas domain dan pelbagai fungsi Pelayar:
| IE6 | FireFox | Nota | <🎜>Bukan silang -rujukan domain js<🎜><🎜><🎜><🎜> | Lulus | Oleh | kedua-dua data dan textStatus dalam fungsi panggil balik tersedia | < /tr>||||||||
| Rujukan merentas domain js | Lulus | Lulus | < td width="193" valign="top" style="word-break: break-all;">data dan textStatus dalam fungsi panggil balik kedua-duanya tidak dijemur
Berikut ialah pernyataan ujian utama, yang juga digunakan untuk menunjukkan cara menggunakan fungsi getScript:
$("#btnAjaxGetScript").click(function(event)
{
$.getScript("../scripts/getScript.js", function(data, textStatus)
{
alert(data);
alert(textStatus);
alert(this.url);
});
});
$("#btnAjaxGetScriptCross").click(function(event)
{
$.getScript("http://resource.elong.com/getScript.js", function(data, textStatus)
{
alert(data);
alert(textStatus);
alert(this.url);
});
});5. jQuery.post( url, [data], [ panggil balik], [taip ] )
Pemulangan: XMLHttpRequest
Penerangan:
Muat maklumat melalui permintaan HTTP POST jauh.
Ini ialah fungsi permintaan POST yang mudah untuk menggantikan kompleks $.ajax. Fungsi panggil balik boleh dipanggil apabila permintaan berjaya. Jika anda perlu melaksanakan fungsi pada ralat, gunakan $.ajax.
Penjelasan:
Penggunaan khusus adalah sama seperti get, kecuali kaedah penyerahan ditukar daripada "GET" kepada "POST".
6. jQuery.ajax( pilihan )
Pemulangan: XMLHttpRequest
Penerangan:
Muatkan data jauh melalui permintaan HTTP.
Pelaksanaan AJAX peringkat rendah jQuery. Untuk pelaksanaan peringkat tinggi yang ringkas dan mudah digunakan, lihat $.get, $.post, dsb.
$.ajax() mengembalikan objek XMLHttpRequest yang diciptanya. Dalam kebanyakan kes, anda tidak perlu memanipulasi objek ini secara langsung, tetapi dalam kes khas ia boleh digunakan untuk menamatkan permintaan secara manual.
$.ajax() hanya mempunyai satu parameter: kekunci parameter/objek nilai, termasuk setiap konfigurasi dan maklumat fungsi panggil balik. Lihat pilihan parameter terperinci di bawah.
Nota: Jika anda menentukan pilihan dataType, sila pastikan pelayan mengembalikan maklumat MIME yang betul (cth. xml mengembalikan "teks/xml"). Jenis MIME yang salah boleh menyebabkan ralat yang tidak dapat diramalkan. Lihat Menentukan Jenis Data untuk Permintaan AJAX.
Nota: Jika dataType ditetapkan kepada "skrip", maka semua permintaan POST jauh (bukan di bawah nama domain yang sama) akan ditukar kepada permintaan GET. (Oleh kerana teg skrip DOM akan digunakan untuk memuatkan)
Dalam jQuery 1.2, anda boleh memuatkan data JSON merentas domain dan anda perlu menetapkan jenis data kepada JSONP apabila menggunakannya. Apabila memanggil fungsi menggunakan borang JSONP, seperti "myurl?callback=?"jQuery akan secara automatik menggantikan ? Apabila jenis data ditetapkan kepada "jsonp", jQuery akan memanggil fungsi panggil balik secara automatik.
Penjelasan:
Ini adalah fungsi teras Ajax dalam jQuery Semua fungsi di atas yang menghantar permintaan Ajax akhirnya akan memanggil fungsi ini . Menggunakan parameter ini boleh mengawal sepenuhnya permintaan ajax Objek ini dalam fungsi panggil balik Ajax juga merupakan objek pilihan
Oleh kerana fungsi get dan post yang dipermudahkan paling biasa digunakan, parameter pilihan ialah. tidak digunakan di sini. Diterangkan secara terperinci.
![Projek hadapan-Shangyou [amalan komprehensif teknologi HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Kursus front-end berasaskan sifar [pembelajaran lanjutan Vue dan aplikasi praktikal]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutorial bahagian hadapan WEB [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Aplikasi praktikal Apipost [api, antara muka, ujian automatik, olok-olok]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
