Berkongsi fungsi AJAX yang terkandung dalam kemahiran Javascript_javascript asli

Kerja terbaru saya melibatkan banyak operasi ajax, dan saya perlu melakukan perkara yang perlu dilakukan di latar belakang Fungsi ajax yang digunakan sekarang dirangkumkan oleh orang latar belakang - tetapi ia berdasarkan ajax fungsi tanpa jquery adalah sia-sia. Dan saya berpendapat bahawa kaedah ajax jquery sangat lengkap dan boleh digunakan secara langsung Jika anda sudah mempunyai jquery, maka ajaxnya tidak akan digunakan dengan sia-sia digunakan tanpa jquery.

Jadi saya juga menghabiskan satu hari untuk menulis satu parameter dan kaedah panggilan adalah serupa dengan ajax jquery, kerana xhr=XMLHttpRequest.

Salin kod Kod adalah seperti berikut:

/*
* Nama: xhr,fungsi pembalut AJAX
* Penerangan: Kelas enkapsulasi panggilan ajax, meniru kaedah panggilan ajax jquery
* Pengarang: Lampu Sepuluh Tahun
*/
var xhr = fungsi () {
var
ajax = fungsi () {
           kembali ('XMLHttpRequest' dalam tetingkap) ?                      kembalikan XMLHttpRequest();
               } : fungsi () {
               kembalikan ActiveXObject baharu("Microsoft.XMLHTTP");
}
}(),
formatData= fungsi (fd) {
      var res = '';
untuk(var f dalam fd) {
               res = f '=' fd[f] '&';
}
          return res.slice(0,-1);
},
AJAX = fungsi(ops) {
                                                     akar = ini,
          req = ajax();

root.url = ops.url;          root.type = ops.type ||           root.method = ops.method || Root.async = ops.async || root.data = ops.data || {};

root.complete = ops.complete ||. fungsi () {};
root.success = ops.success ||. function(){};
root.error = ops.error ||. function (s) { alert(root.url '->status:' s 'error!')};
         root.abort = req.abort;
          root.setData = fungsi (data) {
               untuk (var d dalam data) {
                    root.data[d] = data[d];
            }
}
root.send = fungsi () {
          var datastring = formatData(root.data),
                 rentetan hantar, dapatkan = palsu,
async = root.async,
             lengkap = root.complete,
            kaedah = root.method,
            type=root.type;
Jika(kaedah === 'DAPAT') {
                      root.url ='?';
                     dapat = benar;
            }
                req.open(kaedah,root.url,async);
               jika(!dapat) {
                 req.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                     rentetan hantar = rentetan data;
                                                                        

                         // Tetapkan semula kaedah onreadystatechange sebelum dihantar, jika tidak permintaan penyegerakan baharu akan berlaku dan dua panggilan balik yang berjaya akan dilaksanakan (chrome, dsb. juga akan melaksanakan onreadystatechange semasa permintaan penyegerakan)
                req.onreadystatechange = fungsi tak segerak () {
                            // console.log('async true');
Jika (req.readyState ==4){
lengkap();
Jika(req.status == 200) {
                                 root.success(req[type]);
                       } lain {
Root.error(req.status);
                                                                                                                                                                                                                                                                                                          }
               } : batal;
                req.send(sendstring);
               jika(!async) {
//console.log('async false');
lengkap();
                    root.success(req[type]);
            }
}
          root.url && root.send();                                                               };
Kembalikan fungsi(ops) {kembali AJAX(ops) baharu}
}();

Perihalan parameter:

1.url: Minta alamat Jika anda tidak mengisinya, permintaan tidak akan dimulakan Tetapi jika anda tidak mengisi dan menghantar paksa, anda tidak menyalahkan saya jika berlaku masalah

2.kaedah: ‘GET’ atau ‘POST’, semua huruf besar, default GET

3.data: Data yang akan dihantar dilampirkan, formatnya adalah objek
4.async: Sama ada tidak segerak, lalai benar
5.type: Jenis data yang dikembalikan hanyalah responseText atau responseXML Lalai ialah responseText
6.complete: Fungsi dilaksanakan apabila permintaan selesai
7.success: Fungsi dilaksanakan apabila permintaan berjaya
8.ralat: Fungsi dilaksanakan apabila permintaan gagal

Nota: Parameter jenis tidak sekaya dataType jquery Ia hanya mempunyai responseText atau responseXML dalam AJAX asli Jika data json dikembalikan, anda perlu memprosesnya sendiri dalam fungsi kejayaan untuk menukar teks kepada json.

Penerangan fungsi:

Objek xhr instantiated mempunyai dua fungsi yang tersedia, satu ialah hantar, kaedah panggilan ialah: xhr.send(), tiada parameter, fungsinya adalah untuk memulakan proses permintaan Jika tiada url semasa pemulaan, ia tidak akan dilaksanakan >

Kaedah lain ialah setData Kaedah panggilan ialah xhr.setData(data_obj), dan parameternya ialah objek Fungsi kaedah setData adalah untuk menggantikan sebahagian nilai dalam atribut data xhr sudah menjadi halaman dalam xhr.data: 1. Anda boleh menggunakan xhr.setData({halaman:2}) untuk mengemas kini nilainya tanpa menjejaskan nilai atribut lain ​​​​yang sudah wujud dalam data.

Kaedah panggilan:

Salin kod

Kod adalah seperti berikut:

var a1 = xhr({
                                                                                                                                                                                                                                                                                                                                                                                                           data:{              'nama pengguna':'lix',              'kata laluan':'123456',
            'jantina': 'lelaki',
             'interset': 'play'
},
async:false,
Kaedah:'DAPAT',
Kejayaan: fungsi (data) {
          var obj = JSON.parse(data);
                  //....
}
});


Nota: Tidak perlu menulis baharu

Pengenalan ciri:
Selepas tempoh pengalaman projek ini, saya mendapati bahawa kelas ajax sepatutnya mempunyai ciri yang sangat biasa: untuk memudahkan permintaan berulang Contohnya, apabila saya menulis ajax penomboran dalam projek, permintaan perlu dihantar setiap kali halaman telah dihidupkan, tetapi Kecuali untuk nombor halaman semasa dan bilangan item setiap halaman, data lain tidak akan berubah Jika anda membuat beberapa permintaan sedemikian, anda perlu mentakrifkan parameter yang tidak berubah itu berulang kali, yang sudah pasti membazir sumber.

Jadi fungsi xhr ini telah pun mempertimbangkan fungsi ini dengan mengambil contoh paging, kita boleh memulakan objek xhr apabila halaman dimuatkan dan menyimpannya sebagai pembolehubah a1 Apabila permintaan membelok halaman dimulakan, yang lain Tiada parameter telah berubah, tetapi pageNumber telah berubah Pada masa ini, anda boleh memanggil kaedah setData xhr untuk menukar pageNumber.

Salin kod Kod adalah seperti berikut: a1.setData({pageNombor:2});

Nota: Parameter setData juga merupakan objek.

Sudah tentu, anda juga boleh menggantikan keseluruhan data:

a1.data = {…};

Bukan hanya data, anda boleh membuat lebih banyak perubahan pada objek xhr a1, seperti menukar url, menukar fungsi kejayaan, GET ke POST, segerak kepada tak segerak... Selepas menukar, panggil semula a1.send() kaedah, ia akan memulakan permintaan semula mengikut tetapan anda.

Sudah tentu, jika permintaan ajax lain yang tidak berkaitan sama sekali, tidak perlu menggunakan a1 yang sudah siap ini

Jika anda tidak berpuas hati dengan nama xhr, maka anda perlu menukarnya sendiri.

Versi dimampatkan dan disulitkan juga disediakan Versi tidak dimampatkan adalah kira-kira 2kb dengan ulasan dialih keluar, dan versi dimampatkan ialah 1.00kb.

Salin kod

Kod adalah seperti berikut: var xhr=function(){var e=function(){kembali "XMLHttpRequest" dalam tetingkap?function(){kembali XMLHttpRequest}:function(){kembali baru ActiveXObject("Microsoft.XMLHTTP")}}(),t =function(e){var t="";for(var n in e){t =n "=" e[n] "&"}kembali t.slice(0,-1)},n=function( 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.complete=n.complete||function(){};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 ){for(var t dalam 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=true}i.open( a,r.url,o);if(!s){i.setRequestHeader("Content-type","application/x-www-form-urlencoded");n=e}i.onreadystatechange=o?function( ){jika(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)}}()

Mesti terdapat beberapa ketidaksempurnaan dalam xhr Jika saya menemui apa-apa pada masa hadapan, saya akan membetulkannya pada masanya Jika anda tidak berpuas hati dengannya atau mendapati ia tidak mencukupi, sila berikan cadangan untuk penambahbaikan.