Baru -baru ini, saya telah melibatkan banyak operasi AJAX, dan saya harus melakukan apa yang harus saya lakukan di latar belakang. Fungsi AJAX yang saya gunakan sekarang dienkapsulasi oleh personel latar belakang - tetapi didasarkan pada jQuery Ajax, jadi itu tidak berguna tanpa jQuery. Dan saya pikir metode Ajax jQuery sangat lengkap dan dapat digunakan secara langsung. Jika ada jQuery, maka Ajax -nya tidak akan digunakan dengan sia -sia. Yang saya kurang adalah metode AJAX yang dapat digunakan tanpa jQuery.
Jadi saya juga menghabiskan satu hari menulis satu, parameter dan metode panggilan mirip dengan Ajax JQuery. Ini disebut xhr, karena xhr = xmlHttpRequest.
Salinan kode adalah sebagai berikut:
/*
* Nama: xhr, fungsi enkapsulasi jax
* Deskripsi: Kelas Enkapsulasi Panggilan Javax, meniru metode panggilan AJAX JQuery
* Penulis: sepuluh tahun cahaya
*/
var xhr = function () {
var
AJAX = function () {
return ('xmlHttpRequest' di jendela)? fungsi () {
mengembalikan xmlhttpRequest baru ();
} : fungsi () {
return new ActiveXObject ("microsoft.xmlhttp");
}
} (),
formatData = function (fd) {
var res = '';
untuk (var f di fd) {
res+= f+'='+fd [f]+'&';
}
return res.slice (0, -1);
},
AJAX = function (ops) {
var
root = ini,
req = ajax ();
root.url = ops.url;
root.type = ops.type || 'ResponseText';
root.method = ops.method || 'MENDAPATKAN';
root.async = ops.async || BENAR;
root.data = ops.data || {};
root.complete = ops.complete || fungsi () {};
root.success = ops.success || fungsi(){};
root.error = ops.error || function (s) {alert (root.url+'-> status:'+s+'error!')};
root.abort = req.abort;
root.setData = function (data) {
untuk (var d dalam data) {
root.data [d] = data [d];
}
}
root.send = function () {
var datastring = formatData (root.data),
sendString, get = false,
async = root.async,
Lengkap = root.complete,
metode = root.method,
type = root.type;
if (metode === 'get') {
root.url+= '?'+DataString;
get = true;
}
req.open (metode, root.url, async);
if (! get) {
req.setRequestHeader ("tipe konten", "Aplikasi/X-WWW-Form-Urlencoded");
sendString = dataString;
}
// Setel ulang metode OnReadyStateChange sebelum mengirim, jika tidak, permintaan sinkronisasi baru akan muncul dan dua panggilan balik yang berhasil akan dieksekusi (Chrome, dll juga akan mengeksekusi OnReadyStateChange saat menyinkronkan permintaan)
req.onreadystatechange = async? fungsi () {
// console.log ('async true');
if (req.readystate == 4) {
menyelesaikan();
if (req.status == 200) {
root.success (req [type]);
} kalau tidak {
root.Error (req.status);
}
}
}: null;
req.send (sendString);
if (! async) {
//console.log('async false ');
menyelesaikan();
root.success (req [type]);
}
}
root.url && root.send ();
};
return function (ops) {return new Ajax (ops);}
} ();
Deskripsi Parameter:
1.URL: Alamat permintaan. Anda tidak dapat mengisinya, dan permintaan tidak akan dimulai. Tetapi jika Anda tidak mengisinya dan memaksanya untuk mengirim, saya tidak akan menyalahkan Anda atas kesalahan apa pun.
2.Thod: 'dapatkan' atau 'pos', semua dikapitalisasi, default mendapatkan
3.Data: Data yang akan dikirim adalah objek
4.Async: apakah itu asinkron, default true
5.Type: Jenis data yang dikembalikan hanya responseText atau responsexml, dan responsEtext default
6.CapTET: Fungsi dieksekusi saat permintaan selesai
7. Success: Fungsi dieksekusi saat permintaan berhasil
8.ror: Fungsi dieksekusi saat permintaan gagal
CATATAN: Parameter Type tidak sekaya data tipe jQuery, hanya responseText atau responsexml di asli AJAX. Jika data JSON dikembalikan, Anda perlu menanganinya sendiri dalam fungsi keberhasilan untuk mengubah teks menjadi JSON.
Deskripsi Fungsi:
Ada dua fungsi untuk digunakan untuk objek XHR instantiated. Satu dikirim. Metode panggilan adalah: xhr.send (), tanpa parameter. Fungsinya adalah untuk memulai proses permintaan. Jika tidak ada URL selama inisialisasi, metode Kirim tidak akan dieksekusi, sehingga Anda dapat menambahkan URL nanti dan memulai Kirim secara manual - jika tidak ada URL selama Kirim, permintaan akan gagal dan saya tidak menangani kesalahan ini. Hanya Anda yang dapat menemukan kesalahannya sendiri.
Metode lain adalah setData, metode panggilannya adalah xhr.setData (data_obj), dan parameternya adalah objek. Fungsi metode setData adalah untuk mengganti sebagian nilai dalam atribut data xhr.data. Misalnya, sudah ada halaman: 1 di xhr.data. Anda dapat menggunakan xhr.setData ({halaman: 2}) untuk memperbarui nilainya tanpa mempengaruhi nilai atribut lain yang sudah ada dalam data.
Metode Panggilan:
Salinan kode adalah sebagai berikut:
var a1 = xhr ({
URL: '2.php',
data:{
'nama pengguna': 'lix',
'Kata Sandi': '123456',
'Jenis Kelamin': 'Pria',
'interset': 'mainkan'
},
async: false,
Metode: 'dapatkan',
Sukses: function (data) {
var obj = json.parse (data);
// ...
}
});
Catatan: Tidak perlu menulis yang baru
Pendahuluan yang ditampilkan:
Setelah periode pengalaman proyek ini, saya menemukan bahwa kelas AJAX harus memiliki fitur yang sangat umum: lebih mudah untuk memulai permintaan berulang kali. Misalnya, ketika saya menulis halaman Ajax dalam suatu proyek, saya harus mengirim permintaan setiap kali saya membalik halaman, tetapi data yang dikirim tidak akan berubah kecuali untuk nomor halaman saat ini dan jumlah setiap halaman. Jika Anda harus berulang kali mendefinisikan parameter yang tidak berubah itu, tidak diragukan lagi merupakan pemborosan sumber daya.
Jadi fungsi XHR ini telah mempertimbangkan fungsi ini. Ambil contoh pagination. Kami dapat menginisialisasi objek XHR ketika halaman dimuat dan menyimpannya sebagai variabel A1. Ketika permintaan Page Turn dimulai, tidak ada parameter lain yang berubah, tetapi bilangan pagen telah berubah. Pada saat ini, kita dapat memanggil metode setData XHR untuk mengubah nomor pagen.
Salinan kode adalah sebagai berikut:
a1.setData ({pagenumber: 2});
Catatan: Parameter setData juga merupakan objek.
Tentu saja, Anda juga dapat mengganti data sepenuhnya:
a1.data = {...};
Bukan hanya data, Anda dapat membuat lebih banyak perubahan pada objek XHR A1 yang instanasi, seperti mengubah URL, mengubah fungsi keberhasilan, mengubah go to post, dan mengubah secara sinkron menjadi asinkron ... setelah mengubah, memanggil metode A1.Send (), dan itu akan memulai permintaan lagi sesuai dengan pengaturan Anda.
Tentu saja, jika itu adalah permintaan AJAX lain yang sama sekali tidak terkait, tidak perlu memaksa A1 yang sudah jadi ini. Kita dapat instantiate XHR lain yang disebut A2 atau sesuatu.
Jika Anda tidak puas dengan nama XHR, Anda hanya dapat mengubahnya sendiri.
Selain itu, ia menyediakan versi terenkripsi terkompresi. Versi yang tidak terkompresi menghapus komentar tentang 2KB, dan versi terkompresi adalah 1,00kB.
Salinan kode adalah sebagai berikut:
var xhr = function () {var e = function () {return "xmlHttpRequest" di window? function () {return new XmlHttpRequest}: function () {return new ActivexObject ("microsoft.xmlhttp")}} (), t = function (e) {var t = "; e) {t+= n+"="+e [n]+"&"} return t.slice (0, -1)}, n = fungsi (n) {var r = this, i = e (); r.url = n.url; r.type = n.type || "responseText"; r.method = n.method || "get"; r.async = n.async || true; r.data = n.data || {}; r.COCETE = n.| n () {}; r.success = n.success || function () {}; r.error = n.error || function (e) {alert (r.url+"-> status:"+e+"error!")}; r.abort = i.abort; r.setData = function (e) {var t di e) {r.data [t] = e [t]}}; r.send = function () {var e = t (r.data), n, s = false, o = r.async, u = r.complete, a = r.method, f = r.type; if (a === "get") {r.url+= "?"+e; s = tr ue} i.open (a, r.url, o); jika (! "); n = e} i.onReadyStateChange = o? function () {if (i.readyState == 4) {u (); if (i.status == 200) {r.success (i [f ])} else {r.error (i.status)}}}: null; i.send (n); if (! o) {u (); r.success (i [f])}}; r.url && r.send ()}; return function (e) {return new n (e)}} ()
Pasti ada beberapa ketidaklengkapan dalam XHR. Jika Anda menemukannya saat digunakan di masa depan, saya akan memperbaikinya tepat waktu. Jika Anda tidak senang dengan itu atau merasa tidak cukup, tolong beri saran untuk perbaikan.