jQuery ajax - kaedah ajax()

Panduan Rujukan Ajax jQuery

Contoh

Melangkungi sebahagian teks melalui AJAX:

Kod jQuery:}

$(document).ready(function(){
  $("#b01").click(function(){
  htmlobj=$.ajax({url:"/jquery/test1.txt",async:false});
  $("#myDiv").html(htmlobj.responseText);
  });
});

Kod HTML:

<div id="myDiv"><h2>Ubah teks ini dengan AJAX</h2></div>
<button id="b01" type="button">Ubah Kandungan</button>

Cuba sendiri

Definisi dan penggunaan

Metode ajax() mengambil data jauh melalui permintaan HTTP.

Ini adalah penukaran AJAX bawah tingkatan jQuery. Penukaran tingkatan tinggi yang mudah digunakan lihat $.get, $.post, dll. Fungsi $.ajax() mengembalikan Objek XMLHttpRequest yang diciptakan.

Paling sederhana, $.ajax() boleh digunakan tanpa sebarang parameter.

Perhatian:Semua opsi boleh ditetapkan secara global melalui fungsi $.ajaxSetup().

Syarat

jQuery.ajax([settings])
Parameter Deskripsi
settings

Pilihan. Koleksi pasangan kunci nilai untuk konfigurasi permintaan Ajax.

Boleh ditetapkan nilai laku mana-mana opsi melalui $.ajaxSetup().

Parameter

options

Tipe: Object

Pilihan. Pengaturan permintaan AJAX. Semua opsi adalah pilihan.

async

Jenis: Boolean

Nilai laku: true. Dalam pengaturan laku laku, semua permintaan adalah permintaan bersamaan. Jika memerlukan permintaan bersamaan, sila tetapkan opsi ini false.

Perhatian, permintaan bersamaan akan mengunci pelayar, operasi lain pengguna mesti menunggu permintaan selesai sebelum dapat dijalankan.

beforeSend(XHR)

Jenis: Fungsi

Sebelum menghantar permintaan, boleh mengubah fungsi Objek XMLHttpRequest, seperti menambahkan pengecasan HTTP sendiri.

Objek XMLHttpRequest adalah parameter tunggal.

Ini adalah peristiwa Ajax. Jika kembalian false boleh menghapus permintaan Ajax ini.

cache

Jenis: Boolean

Nilai Laku: true, dataType adalah script dan jsonp maka nilai laku adalah false. Menetapkan nilai laku false akan mengabaikan pengasingan halaman ini.

Fungsi Baru jQuery 1.2.

complete(XHR, TS)

Jenis: Fungsi

Fungsi balikan setelah permintaan selesai (di panggil setelah permintaan sukses atau gagal).

Parameter: objek XMLHttpRequest dan string yang mendeskripsikan tipe permintaan.

Ini adalah peristiwa Ajax.

contentType

Jenis: String

Nilai default: "application/x-www-form-urlencoded". Jenis pengkodean konten saat mengirim informasi ke server.

Nilai default cocok untuk sebagian besar situasi. Jika Anda mengekspresikan content-type yang jelas kepada $.ajax(), maka pasti akan dikirim ke server (meskipun tidak ada data yang akan dikirim).

context

Tipe: Object

Objek ini digunakan untuk menetapkan konteks fungsi balikan Ajax yang berhubungan. Artinya, membuat this di dalam fungsi balikan menunjuk ke objek ini (jika parameter ini tidak disetel, maka this akan menunjuk ke parameter options yang dipanggil AJAX ini). Misalnya, menetapkan elemen DOM sebagai parameter konteks, seperti halnya menetapkan konteks fungsi balikan success untuk elemen DOM ini.

seperti ini:

$.ajax({ url: "test.html", context: document.body, success: function(){
        $(this).addClass("done");
      });
data

Jenis: String

Data yang dikirim ke server. akan diubah ke format string permintaan otomatis. Dalam permintaan GET, akan diTambahkan ke URL. Lihat penjelasan opsi processData untuk melarang pengubahan otomatis ini. Harus berformat Key/Value. Jika berupa array, jQuery akan otomatis menyesuaikan nama yang sama untuk nilai yang berbeda. Misalnya {foo:["bar1", "bar2"]} diubah menjadi '&foo=bar1&foo=bar2'.

dataFilter

Jenis: Fungsi

Fungsi untuk memproses data asli yang dihasilkan Ajax sebelumnya. Menyediakan parameter data dan type: data adalah data asli yang dihasilkan Ajax, type adalah parameter dataType yang disediakan saat memanggil jQuery.ajax. Nilai yang dikembalikan oleh fungsi akan diproses lebih lanjut oleh jQuery.

dataType

Jenis: String

Tahap yang diharapkan jenis data yang dihasilkan server. Jika tidak disebutkan, jQuery akan otomatis mengecek dengan informasi MIME HTTP paket untuk mengecek secara cerdas, seperti jenis MIME XML diidentifikasi sebagai XML. Pada versi 1.4, JSON akan menghasilkan objek JavaScript, sementara script akan menjalankan skrip ini. Setelah itu, data yang dihasilkan server akan diurai berdasarkan nilai ini dan disampaikan ke fungsi balikan. Nilai yang tersedia:

  • "xml": kembalikan dokumen XML, dapat diproses dengan jQuery.
  • "html": kembalikan informasi HTML teks; tag script yang terdapat di dalamnya akan dijalankan saat disisipkan ke DOM.
  • "script": kembalikan kode JavaScript teks. Tidak akan menyimpan hasil secara otomatis. Jika parameter "cache" disetel. Perhatian: Dalam permintaan jarak jauh (tidak dalam domain yang sama), semua permintaan POST akan diubah menjadi permintaan GET (karena akan digunakan tag script DOM untuk memuat).
  • "json": kembalikan data JSON.
  • "jsonp": Format JSONP. Ketika memanggil fungsi dalam bentuk JSONP, seperti "myurl?callback=?", jQuery akan otomatis mengganti ? dengan nama fungsi yang benar untuk menjalankan fungsi balikan.
  • "text": kembalikan string teks
error

Jenis: Fungsi

Nilai default: pengambilan otomatis (xml atau html). Pemanggilan fungsi ini ketika permintaan gagal.

Ada tiga parameter: objek XMLHttpRequest, informasi kesalahan, (opsional) objek eksepsi yang ditangkap.

Jika terjadi kesalahan, informasi kesalahan (parameter kedua) selain null, dapat berupa "timeout", "error", "notmodified", dan "parsererror".

Ini adalah peristiwa Ajax.

global

Jenis: Boolean

Apakah mengaktifkan acara AJAX global. Nilai default: true. Mengatur nilai ini ke false akan menghentikan pemanggilan acara AJAX global, seperti ajaxStart atau ajaxStop dapat digunakan untuk mengendalikan acara AJAX yang berbeda.

ifModified

Jenis: Boolean

Ambil data baru hanya ketika data server berubah. Nilai default: false. Gunakan header informasi Last-Modified paket HTTP untuk mengecek. Dalam jQuery 1.4, ini juga akan memeriksa 'etag' yang disediakan server untuk mengecek apakah data belum diubah.

jsonp

Jenis: String

Tulis nama fungsi balikan dalam permintaan jsonp. Nilai ini digunakan untuk menggantikan bagian "callback" dalam parameter URL permintaan GET atau POST seperti "callback=?", seperti {jsonp:'onJsonPLoad'} akan mengirimkan "onJsonPLoad=?" ke server.

jsonpCallback

Jenis: String

Tentukan nama fungsi panggilan kembali untuk permintaan jsonp. Nilai ini akan digunakan untuk menggantikan nama fungsi acak yang dihasilkan oleh jQuery. Ini utamanya digunakan untuk membuat nama fungsi unik yang mempermudah pengelolaan permintaan, serta memudahkan menyediakan fungsi panggilan kembali dan pengelolaan kesalahan. Anda juga dapat menentukan nama fungsi panggilan kembali ini untuk menghindari pengecualian permintaan GET yang diinginkan untuk disimpan di browser.

password

Jenis: String

Digunakan untuk memberikan sandi untuk permintaan pengesahihan akses HTTP.

processData

Jenis: Boolean

Nilai baku: true. Secara baku, data yang disampaikan melalui pilihan data, jika adalah objek (teknisnya bukan string), akan diproses dan diubah menjadi string query, untuk disesuaikan dengan jenis konten baku "application/x-www-form-urlencoded". Jika ingin mengirim informasi DOM pohon atau informasi yang lain yang tidak diinginkan diubah, atur ke false.

scriptCharset

Jenis: String

Hanya digunakan untuk memaksa mengubah charset jika dataType adalah "jsonp" atau "script", dan type adalah "GET". Biasanya digunakan ketika enkoding konten lokal dan jauh berbeda.

success

Jenis: Fungsi

Fungsi panggilan kembali setelah permintaan sukses.

Parameter: Data yang dikembalikan dari server dan diproses berdasarkan parameter dataType; string deskripsi status.

Ini adalah peristiwa Ajax.

traditional

Jenis: Boolean

Jika Anda ingin menyaring data dengan cara tradisional, atur ke true. Lihat pula metode jQuery.param di kategori alat.

timeout

Jenis: Bilangan

Atur waktu habis permintaan (dalam milidetik). Pengaturan ini akan menimpa pengaturan global.

type

Jenis: String

Nilai baku: "GET")). Cara permintaan ("POST" atau "GET") baku adalah "GET". Perhatian: Metode permintaan HTTP lainnya, seperti PUT dan DELETE, juga dapat digunakan, tetapi hanya beberapa peramban yang mendukungnya.

url

Jenis: String

Nilai baku: Alamat halaman saat ini. Alamat permintaan yang dikirimkan.

username

Jenis: String

Digunakan untuk memberikan nama pengguna untuk tanggapan permintaan pengesahihan akses HTTP.

xhr

Jenis: Fungsi

Perlu mengembalikan objek XMLHttpRequest. Secara baku di IE adalah ActiveXObject sementara di situ lain adalah XMLHttpRequest. Digunakan untuk menulis ulang atau menyediakan objek XMLHttpRequest yang dipertahankan. Parameter ini tidak tersedia di jQuery 1.3 sebelumnya.

Fungsi balik

Untuk mengolah data yang didapatkan dari $.ajax(), perlu menggunakan fungsi balik: beforeSend, error, dataFilter, success, complete.

beforeSend

Panggil sebelum mengirim permintaan dan masukkan XMLHttpRequest sebagai parameter.

error

Panggil saat permintaan gagal. Masukkan objek XMLHttpRequest, string deskripsi jenis kesalahan, serta objek eksepsi (jika ada).

dataFilter

Panggil setelah permintaan sukses. Masukkan data yang diembalikan serta nilai parameter dataType. Dan harus mengembalikan data yang baru (yang mungkin disiapkan) untuk diembalikan kepada fungsi balik success.

success

Panggil setelah permintaan. Masukkan data yang diembalikan setelah permintaan, serta string kode sukses.

complete

Panggil fungsi ini setelah permintaan selesai, keduanya sukses atau gagal. Masukkan objek XMLHttpRequest, serta string kode sukses atau kesalahan.

Jenis Data

Fungsi $.ajax() bergantung pada informasi yang disediakan server untuk mengolah data yang diembalikan. Jika server melaporkan bahwa data yang diembalikan adalah XML, hasilnya dapat digunakan dengan metode XML biasa atau pemilih jQuery untuk mengelilingi. Jika jenis lain terlihat, seperti HTML, data akan dianggap sebagai teks.

Dengan pilihan dataType, Anda dapat menentukan cara pengolahan data yang berbeda. Selain XML saja, Anda dapat menentukan html, json, jsonp, script, atau text.

Diantara mereka, jenis data text dan xml tidak akan disiapkan. Data hanya akan diembalikan secara sederhana kepada fungsi balik success dengan property responseText atau responseHTML dari XMLHttpRequest.

Perhatian:Kami harus memastikan jenis MIME yang dilaporkan server web cocok dengan dataType yang dipilih. Misalnya, jika XML, server harus menyatakan text/xml atau application/xml untuk mendapatkan hasil yang konsisten.

Jika ditentukan jenis html, semua JavaScript yang disertakan akan dijalankan sebelum HTML diembalikan sebagai string. Secara serupa, jika ditentukan jenis script, JavaScript yang dihasilkan server akan dijalankan terlebih dahulu sebelum diembalikan sebagai data teks.

Jika ditentukan jenis json, data yang didapat akan dihuraikan sebagai objek JavaScript dan dihantar kembali sebagai objek yang dibina. Untuk mencapai tujuannya, ia akan cuba menggunakan JSON.parse(). Jika pemeriksaan brosel tidak mendukung, ia akan digunakan fungsi untuk membina.

Data JSON adalah data struktural yang dapat diurai dengan mudah melalui JavaScript. Jika fail data disimpan di pelayan jauh (domain berbeza, iaitu pengambilan data luar domain), perlu menggunakan jenis jsonp. Dengan jenis ini, akan dicipta parameter string carian callback=? dan ditambahkan ke URL permintaan. Pelayan seharusnya menambahkan nama fungsi balik kepada data JSON, supaya permintaan JSONP berkesan. Jika hendak menentukan nama parameter fungsi balik untuk menggantikan callback lalai, boleh menetapkan pilihan jsonp dalam $.ajax().

Perhatian:JSONP adalah ekstensi format JSON. Ia memerlukan kod pelayan untuk mengesan dan menguruskan parameter string carian.

Jika jenis script atau jsonp ditentukan, maka bila menerima data daripada pelayan, sebenarnya digunakan <script> tag bukannya objek XMLHttpRequest. Dalam keadaan ini, $.ajax() tidak kembalikan objek XMLHttpRequest dan juga tidak menghantar fungsi pemprosesan seperti beforeSend.

Hantar data kepada pelayan

Secara lalai, permintaan Ajax menggunakan kaedah GET. Jika hendak menggunakan kaedah POST, boleh menetapkan nilai parameter type. Pilihan ini juga mempengaruhi bagaimana kandungan pilihan data dihantar kepada pelayan.

Pilihan data boleh mengandungi suatu string carian, seperti key1=value1&key2=value2, ataupun seolahnya adalah peta, seperti {key1: 'value1', key2: 'value2'}. Jika bentuk yang terakhir digunakan, data akan diubahsuai kepada string carian dalam penghantaran. Proses pemrosesan ini boleh dihalang dengan menetapkan pilihan processData kepada false. Jika kami ingin menghantar objek XML kepada pelayan, proses pemrosesan ini mungkin tidak sesuai. Dan dalam keadaan ini, kami juga seharusnya mengubah nilai pilihan contentType, menggunakan jenis MIME yang sesuai untuk menggantikan default application/x-www-form-urlencoded.

Opsi tingkat tinggi

Opsi global digunakan untuk mencegah pendaftaran balikan fungsi tanggap, seperti .ajaxSend, atau ajaxError, dan metode yang mirip. Ini sangat berguna di beberapa saat, seperti saat permintaan yang dikirim sangat sering dan singkat, dapat menonaktifkan ini di dalam .ajaxSend.

Jika server memerlukan autentikasi HTTP, dapat digunakan penggunaan dan sandi melalui opsi username dan password.

Permintaan Ajax berbatas waktu, jadi setelah kesalahan dipanggil dan diproses, dapat digunakan untuk meningkatkan pengalaman pengguna. Parameter timeout biasanya dijaga ke nilai default, atau diatur secara global melalui jQuery.ajaxSetup, jarang untuk mengatur ulang opsi timeout untuk permintaan tertentu.

Secara default, permintaan akan dijalankan, tetapi browser mungkin mengambil data dari cache pribadinya. Untuk melarang penggunaan hasil cache, atur parameter cache ke false. Jika ingin melaporkan kesalahan jika data belum berubah sejak permintaan terakhir, atur ifModified ke true.

scriptCharset memungkinkan untuk menetapkan karakter set khusus untuk permintaan <script>, untuk script atau data jsonp yang mirip. Ini sangat bermanfaat ketika script dan karakter set halaman berbeda.

Huruf pertama Ajax adalah awalan dari kata asynchronous, yang berarti semua operasi adalah paralel, dan urutan penyelesaian tidak ada hubungan sebelumnya. Parameter async fungsi $.ajax() selalu diatur ke true, yang menandakan setelah permintaan dimulai, kode lain masih dapat dijalankan. Dikirakan untuk tidak mengatur opsi ini ke false, yang berarti semua permintaan tidak lagi asinkron, hal ini juga dapat menyebabkan browser terkunci.

Fungsi $.ajax mengembalikan objek XMLHttpRequest yang dibuatnya. Biasanya jQuery hanya mengelola internal dan membuat objek ini, tetapi pengguna dapat mengirimkan objek xhr yang dibuat sendiri melalui opsi xhr. Objek yang dikembalikan biasanya sudah dihancurkan, tetapi tetap menyediakan antarmuka dasar untuk mengamati dan mengendalikan permintaan. Misalnya, pemanggilan .abort() pada objek dapat menghentikan permintaan sebelum selesai.

Panduan Rujukan Ajax jQuery