Jadual Kandungan
jQuery ajax() fungsi ialah tahap abstraksi paling rendah
jQuery 支持跨域 JSONP
停止浏览器缓存 XHR 请求
Rumah Tutorial CMS WordTekan Panduan Ringkas jQuery: Meneroka jQuery dan Ajax

Panduan Ringkas jQuery: Meneroka jQuery dan Ajax

Sep 02, 2023 pm 09:05 PM

jQuery 简化指南:探索 jQuery 和 Ajax

jQuery ajax() fungsi ialah tahap abstraksi paling rendah

Fungsi ajax() jQuery ialah tahap abstraksi terendah yang tersedia untuk XMLHttpRequest (aka AJAX). Semua fungsi AJAX jQuery lain (seperti load()) menggunakan fungsi ajax(). Menggunakan fungsi ajax() menyediakan fungsi yang paling berkuasa untuk XMLHttpRequests. jQuery juga menyediakan abstraksi peringkat tinggi lain untuk melaksanakan jenis XMLHttpRequests yang sangat khusus. Fungsi ini pada asasnya adalah pintasan kepada kaedah ajax(). ajax() 函数是可用于 XMLHttpRequest(又名 AJAX)的最低抽象级别。所有其他 jQuery AJAX 函数(例如 load())都利用 ajax() 函数。使用 ajax() 函数为 XMLHttpRequests 提供了最强大的功能。 jQuery 还提供了其他更高级别的抽象来执行非常特定类型的 XMLHttpRequests。这些函数本质上是 ajax() 方法的快捷方式。

这些快捷方法是:

  • 加载()
  • <code>get()
  • <code>getJSON()
  • <code>getScript()
  • <code>post()

需要注意的是,虽然快捷方式有时很好,但它们都在幕后使用 ajax() 。而且,当您需要 jQuery 在 AJAX 方面提供的所有功能和自定义功能时,您应该使用 ajax() 方法。

注意:默认情况下,ajax()load() AJAX 函数均使用 GET HTTP 协议。


jQuery 支持跨域 JSONP

带有填充的 JSON (JSONP) 是一种技术,允许 HTTP 请求(返回 JSON)的发送者为使用 JSON 对象作为函数参数进行调用的函数提供名称。该技术不使用 XHR。它使用脚本元素,因此可以将数据从任何站点拉入任何站点。目的是为了规避XMLHttpRequest的同源策略限制。

使用 <code>getJSON() jQuery 函数,当 URL 中添加 JSONP 回调函数时,您可以从另一个域加载 JSON 数据。作为示例,以下是使用 Flickr API 的 URL 请求的样子。

<span class="sgc-100">http://api.flickr.com/services/feeds/photos_public.gne?tags=resig&tagmode=all&format=json&jsoncallback</span>=?

? 值用作快捷方式,告诉 jQuery 调用作为 <code>getJSON() 函数的参数传递的函数。如果您不想使用此快捷方式,可以将 ? 替换为另一个函数的名称。

下面,我使用 Flickr JSONP API 拉入一个网页,其中包含带有“resig”标签的最新照片。请注意,我使用的是 ? 快捷方式,因此 jQuery 将简单地调用我提供的 <code>getJSON() 函数的回调函数。传递给回调函数的参数是请求的JSON数据。

<!DOCTYPE html>
<html lang="en">
<body>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>  (function($){      
      $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=resig&amp;tagmode=all&amp;format=json&amp;jsoncallback=?",
          // Using ? just means call the callback function provided
          function (data) { // Data is the JSON object from Flickr    
              $.each(data.items, function (i, item) { $('<img />').attr("src", item.media.m).appendTo('body'); if (i == 30) return false; });
          });
  })(jQuery); </script>
</body>
</html>
Salin selepas log masuk

注意:请确保检查您所使用的服务的 API 以便正确使用回调。例如,Flickr 使用名称 jsoncallback=?,而 Yahoo!和 Digg 使用名称 callback=?


停止浏览器缓存 XHR 请求

执行 XHR 请求时,Internet Explorer 将缓存响应。如果响应包含具有较长保质期的静态内容,则缓存可能是一件好事。但是,如果请求的内容是动态的并且可能随时发生变化,您将需要确保浏览器不会缓存该请求。一种可能的解决方案是将唯一的查询字符串值附加到 URL 的末尾。这将确保浏览器对于每个请求请求唯一的 URL。

// Add unique query string at end of the URL
url: 'some?nocache='+(newDate()).getTime()
Salin selepas log masuk

另一个解决方案(更多的是全局解决方案)是默认设置所有 AJAX 请求以包含我们刚才讨论的无缓存逻辑。为此,请使用 ajaxSetup 函数全局关闭缓存。

$.ajaxSetup({
            cache: false // True by default. False means caching is off.
});
Salin selepas log masuk

现在,为了用单独的 XHR 请求覆盖此全局设置,您只需在使用 ajax() 函数时更改缓存选项即可。下面是使用 ajax()

#🎜🎜#Pintasan ini ialah: #🎜🎜#
  • Muat()
  • <code>get()
  • <code>getJSON()
  • <code>getScript()
  • <code>post()
#🎜🎜#Adalah penting untuk ambil perhatian bahawa walaupun pintasan kadangkala bagus, semuanya menggunakan ajax() di belakang tabir. Dan, apabila anda memerlukan semua ciri dan penyesuaian yang ditawarkan oleh jQuery dari segi AJAX, anda harus menggunakan kaedah ajax(). #🎜🎜# #🎜🎜#Nota: Secara lalai, kedua-dua fungsi AJAX ajax() dan load() menggunakan GET protokol HTTP. #🎜🎜#
#🎜🎜#jQuery menyokong JSONP merentas domain#🎜🎜# #🎜🎜#JSON with padding (JSONP) ialah teknologi yang membenarkan penghantar permintaan HTTP (yang mengembalikan JSON) untuk memberikan nama untuk fungsi yang dipanggil dengan objek JSON sebagai parameter fungsi. Teknologi ini tidak menggunakan XHR. Ia menggunakan elemen skrip supaya data boleh ditarik dari mana-mana tapak ke mana-mana tapak. Tujuannya adalah untuk memintas sekatan dasar asal yang sama XMLHttpRequest. #🎜🎜# #🎜🎜#Menggunakan fungsi jQuery <code>getJSON(), anda boleh memuatkan data JSON daripada domain lain apabila menambahkan fungsi panggil balik JSONP pada URL. Sebagai contoh, berikut ialah rupa permintaan URL menggunakan API Flickr. #🎜🎜# #🎜🎜#<span class="sgc-100">http://api.flickr.com/services/feeds/photos_public.gne?tags=resig&tagmode=all&format=json&jsoncallback</span> =?< /p> #🎜🎜#Nilai ? digunakan sebagai pintasan untuk memberitahu jQuery supaya memanggil fungsi yang diluluskan sebagai argumen kepada fungsi <code>getJSON(). Jika anda tidak mahu menggunakan pintasan ini, anda boleh menggantikan ? dengan nama fungsi lain. #🎜🎜# #🎜🎜# Di bawah, saya menggunakan API JSONP Flickr untuk memasukkan halaman web yang mengandungi foto terbaharu yang ditandakan dengan "resign". Ambil perhatian bahawa saya menggunakan pintasan ?, jadi jQuery hanya akan memanggil fungsi panggil balik fungsi <code>getJSON() yang saya sediakan. Parameter yang dihantar kepada fungsi panggil balik ialah data JSON yang diminta. #🎜🎜#
$.ajaxSetup ({   
    cache: false // True by default. False means caching is off.   
});       
jQuery.ajax({ cache: true, url: 'some', type: 'POST' } );
Salin selepas log masuk
#🎜🎜#Nota: Sila pastikan anda menyemak API perkhidmatan yang anda gunakan untuk menggunakan panggilan balik dengan betul. Contohnya, Flickr menggunakan nama jsoncallback=?, manakala Yahoo! dan Digg menggunakan nama callback=?. #🎜🎜#
#🎜🎜#Hentikan pelayar menyimpan cache permintaan XHR#🎜🎜# #🎜🎜#Apabila melaksanakan permintaan XHR, Internet Explorer akan cache respons. Caching boleh menjadi perkara yang baik jika respons mengandungi kandungan statik dengan jangka hayat yang panjang. Walau bagaimanapun, jika kandungan permintaan adalah dinamik dan mungkin berubah pada bila-bila masa, anda perlu memastikan bahawa penyemak imbas tidak menyimpan cache permintaan tersebut. Satu penyelesaian yang mungkin adalah untuk menambahkan nilai rentetan pertanyaan yang unik pada penghujung URL. Ini akan memastikan bahawa penyemak imbas meminta URL unik untuk setiap permintaan. #🎜🎜# rrreee #🎜🎜#Penyelesaian lain (lebih daripada penyelesaian global) ialah menetapkan semua permintaan AJAX secara lalai untuk memasukkan logik tanpa cache yang baru kita bincangkan. Untuk melakukan ini, matikan caching secara global menggunakan fungsi ajaxSetup. #🎜🎜# rrreee #🎜🎜#Kini, untuk mengatasi tetapan global ini dengan permintaan XHR individu, anda hanya boleh menukar pilihan cache apabila menggunakan fungsi ajax(). Di bawah ialah contoh kod yang melaksanakan permintaan XHR menggunakan fungsi ajax(), yang mengatasi tetapan global dan menyimpan cache permintaan itu. #🎜🎜# rrreee#🎜🎜#

Atas ialah kandungan terperinci Panduan Ringkas jQuery: Meneroka jQuery dan Ajax. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Arahan sembang dan cara menggunakannya
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Adakah WordPress mudah untuk pemula? Adakah WordPress mudah untuk pemula? Apr 03, 2025 am 12:02 AM

WordPress mudah untuk pemula bermula. 1. Selepas log masuk ke latar belakang, antara muka pengguna adalah intuitif dan papan pemuka mudah menyediakan semua pautan fungsi yang diperlukan. 2. Operasi asas termasuk mencipta dan mengedit kandungan. Editor WYSIWYG memudahkan penciptaan kandungan. 3. Pemula boleh mengembangkan fungsi laman web melalui pemalam dan tema, dan lengkung pembelajaran wujud tetapi boleh dikuasai melalui amalan.

Bolehkah saya belajar WordPress dalam 3 hari? Bolehkah saya belajar WordPress dalam 3 hari? Apr 09, 2025 am 12:16 AM

Boleh belajar WordPress dalam masa tiga hari. 1. Menguasai pengetahuan asas, seperti tema, pemalam, dan lain-lain. 2. Memahami fungsi teras, termasuk prinsip pemasangan dan kerja. 3. Belajar penggunaan asas dan lanjutan melalui contoh. 4. Memahami teknik debugging dan cadangan pengoptimuman prestasi.

Apa yang baik untuk WordPress? Apa yang baik untuk WordPress? Apr 07, 2025 am 12:06 AM

WordpressisgoodforvirtualyWebprojectduetoitsversatilityasacms.itexcelsin: 1) keramahan pengguna, membolehkan mudah

Sekiranya saya menggunakan Wix atau WordPress? Sekiranya saya menggunakan Wix atau WordPress? Apr 06, 2025 am 12:11 AM

Wix sesuai untuk pengguna yang tidak mempunyai pengalaman pengaturcaraan, dan WordPress sesuai untuk pengguna yang mahukan lebih banyak keupayaan kawalan dan pengembangan. 1) Wix menyediakan editor drag-and-drop dan templat yang kaya, menjadikannya mudah untuk membina sebuah laman web dengan cepat. 2) Sebagai CMS sumber terbuka, WordPress mempunyai ekosistem komuniti dan plug-in yang besar, menyokong penyesuaian dan pengembangan yang mendalam.

Berapakah kos WordPress? Berapakah kos WordPress? Apr 05, 2025 am 12:13 AM

WordPress sendiri adalah percuma, tetapi kos tambahan untuk digunakan: 1. WordPress.com menawarkan pakej dari percuma hingga dibayar, dengan harga dari beberapa dolar sebulan hingga berpuluh -puluh dolar; 2. WordPress.org memerlukan membeli nama domain (10-20 dolar AS setahun) dan perkhidmatan hosting (5-50 dolar AS sebulan); 3. Kebanyakan pemalam dan tema adalah percuma, dan harga berbayar adalah antara berpuluh-puluh dan beratus-ratus dolar; Dengan memilih perkhidmatan hosting yang betul, menggunakan plug-in dan tema yang munasabah, dan mengekalkan dan mengoptimumkan secara teratur, kos WordPress dapat dikawal dan dioptimumkan dengan berkesan.

Mengapa ada yang menggunakan WordPress? Mengapa ada yang menggunakan WordPress? Apr 02, 2025 pm 02:57 PM

Orang memilih untuk menggunakan WordPress kerana kuasa dan fleksibiliti. 1) WordPress adalah CMS sumber terbuka dengan kemudahan penggunaan dan skalabiliti yang kuat, sesuai untuk pelbagai keperluan laman web. 2) Ia mempunyai tema dan plugin yang kaya, ekosistem yang besar dan sokongan komuniti yang kuat. 3) Prinsip kerja WordPress adalah berdasarkan tema, pemalam dan fungsi teras, dan menggunakan PHP dan MySQL untuk memproses data, dan menyokong pengoptimuman prestasi.

Adakah WordPress CMS? Adakah WordPress CMS? Apr 08, 2025 am 12:02 AM

WordPress adalah sistem pengurusan kandungan (CMS). Ia menyediakan pengurusan kandungan, pengurusan pengguna, tema dan keupayaan pemalam untuk menyokong penciptaan dan pengurusan kandungan laman web. Prinsip kerja termasuk pengurusan pangkalan data, sistem templat dan seni bina pemalam, sesuai untuk pelbagai keperluan dari blog ke laman web korporat.

Adakah WordPress masih percuma? Adakah WordPress masih percuma? Apr 04, 2025 am 12:06 AM

Versi teras WordPress adalah percuma, tetapi yuran lain mungkin ditanggung semasa penggunaan. 1. Nama domain dan perkhidmatan hosting memerlukan pembayaran. 2. Tema lanjutan dan pemalam boleh dikenakan. 3. Perkhidmatan profesional dan ciri -ciri canggih boleh dikenakan.

See all articles