Baru-baru ini, Ajax mengalami masalah lintas domain saat mengunjungi WebService. Cari informasi secara online dan merangkumnya sebagai berikut (banyak dari mereka berpikir mereka telah menyalinnya dengan baik)
<< Gunakan JSON untuk mentransfer data, mengandalkan JSONP ke Cross-Domain >>
Pertama, saya akan menambahkan kode saya yang diimplementasikan:
Kode front-end:
$ .AJAX ({type: "get", url: "http: //localhost/service1.asmx/getelevatorstatusjsondata? jsoncallback =?", datape: "jsonp", jsonp: "json", data: "", function: function. i ++) {alert (data [i] .id + "-" + data [i] .name);Kode Server:
/// <summary> /// Dapatkan informasi data status //// </summary> /// <returns> </eturns> [webmethod] public void geteelevatorStatusJsondata () {list <list <deviceInfo>> elevatordata = daftar baru <List <DeviceInfo >> (); Daftar <SendDicDate> SearchList = xmlserializeHelper.xmldeserializeFromFile <Daftar <SendDicDate>> (@configutil.servicePath + configutil.getConfigBykey ("xmlpath") + "Query Directive Information.xml", encoding.utf8); foreach (item SendDicDate di SearchList) {string key = item.portno + "-" + item.bordrate + "-" + item.sendType; Daftar <DeviceInfo> deviceInfolist = (Daftar <DeviceInfo>) context.cache.get (key); Elevatordatas.Add (DeviceInfolist); } Hasil string = ""; DataContractJSonserializer json = DataContractJSonserializer baru (Elevatordatas.getType ()); menggunakan (memorystream stream = memorystream baru ()) {json.writeObject (stream, elevatordata); hasil = encoding.utf8.getString (stream.toArray ()); } String JSonCallback = httpcontext.current.Request ["JSonCallback"]; Hasil = JCONCallback + '(' + hasil + ')'; Httpcontext.current.response.write (hasil); Httpcontext.current.response.end (); }C#
Di atas adalah kode implementasi yang memanggil server C#, dan berikut ini adalah sisi Java. Parameter mungkin berbeda, tetapi prinsipnya sama
Jawa:
String callbackFunname = Context.Request ["callbackParam"]; Context.Response.write (callbackFunname + "([{/" name/":/" John/"}])");PS: Parameter JSONP klien digunakan untuk melewati parameter melalui URL dan lulus nama parameter parameter JSONPCallback. Sulit diucapkan, dan secara sederhana:
JSONP: ""
jsonpcallback: ""
Ngomong-ngomong: di browser chrome, Anda juga dapat mengatur konteks informasi header.response.addheader ("akses-kontrol-allow-origin", "*"); di server untuk mencapai tujuan permintaan lintas domain, dan tidak perlu mengatur parameter AJAX berikut
DataType: "jsonp", jsonp: "callbackparam", jsonpcallback: "jsonpcallback1"
Data dapat diperoleh dalam mode permintaan AJAX normal.
Berikut ini adalah prinsipnya. Rasanya sangat masuk akal ketika Anda membaca apa yang orang lain jelaskan:
1. Masalah yang terkenal. Ajax secara langsung meminta file biasa tanpa izin untuk mengakses di seluruh domain. Tidak masalah jika Anda adalah halaman statis, halaman web dinamis, layanan web, atau WCF, selama itu adalah permintaan lintas domain, itu tidak akan benar;
2. Namun, kami menemukan bahwa ketika memanggil file JS di halaman web, mereka tidak terpengaruh oleh apakah mereka domain silang (tidak hanya itu, kami juga menemukan bahwa semua tag dengan atribut "SRC" memiliki kemampuan lintas domain, seperti
3. sehingga dapat dinilai bahwa pada tahap ini, jika Anda ingin mengakses data di seluruh domain melalui Web murni (kontrol ActiveX, proxy server, Websockets HTML5 di masa depan, dll., Ini adalah mencoba memuat data ke dalam file format JS di server jarak jauh untuk dihubungi klien dan pemrosesan lebih lanjut;
4. Kebetulan kita tahu bahwa ada format data karakter murni yang disebut JSON yang dapat dengan ringkas menggambarkan data yang kompleks. Yang lebih baik adalah bahwa JSON secara asli didukung oleh JS, sehingga klien dapat memproses data dalam format ini hampir seperti yang Anda inginkan;
5. Solusi ini keluar. Klien Web memanggil file format JS (biasanya dengan JSON sebagai akhiran) yang dihasilkan secara dinamis di server lintas-domain dengan cara yang sama seperti skrip panggilan. Jelas bahwa alasan mengapa server ingin secara dinamis menghasilkan file JSON adalah untuk memuat data yang dibutuhkan oleh klien.
6. Setelah klien berhasil memanggil file JSON, ia memperoleh data yang ia butuhkan. Sisanya adalah memproses dan menampilkannya sesuai dengan kebutuhannya sendiri. Cara ini mendapatkan data jarak jauh terlihat sangat mirip dengan Ajax, tetapi sebenarnya berbeda.
7. Untuk memfasilitasi klien untuk menggunakan data, protokol transmisi informal telah dibentuk secara bertahap. Orang -orang menyebutnya JSONP. Salah satu poin utama dari protokol ini adalah memungkinkan pengguna untuk meneruskan parameter panggilan balik ke server. Ketika server mengembalikan data, itu akan menggunakan parameter callback ini sebagai nama fungsi untuk membungkus data JSON, sehingga klien dapat menyesuaikan fungsinya sendiri untuk secara otomatis memproses data pengembalian.
Mudah bagi pengembang pintar untuk berpikir bahwa selama skrip JS yang disediakan oleh server dihasilkan secara dinamis, penelepon dapat melewati parameter dan memberi tahu server "Saya ingin sepotong kode JS yang memanggil fungsi XXX, tolong kembalikan kepada saya", sehingga server dapat menghasilkan skrip JS dan menanggapi sesuai dengan kebutuhan klien.
<! Doctype html public "-// w3c // dtd xhtml 1.0 transisi // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><html xmlns = "http://www.w3.org/1999/xhtml"> <adept> <itement> </title> <script type = "text/javascript"> // Fungsi panggilan balik setelah mendapatkan informasi yang Anda query var flight handler = data (data) {peringatan ('ini menghasilkan penerbangan. piao ' + data.tickets +' zhang. '); }; // Berikan alamat URL dari layanan JSONP (terlepas dari jenis alamat, nilai pengembalian akhir adalah bagian dari kode JavaScript) var url = "http://flightquery.com/jsonp/flightresult.aspx?code=ca1998&callback=flighthandler"; // Buat tag skrip dan atur atributnya var skrip = document.createElement ('skrip'); script.setAttribute ('src', url); // Tambahkan tag skrip ke kepala, dan panggilan dimulai //document.geteLementsbytagname('head') media.appendchild(script); </script> </head> <body> </body> </html> <! Doctype html public "-// w3c // dtd xhtml 1.0 transisi // en" "http://www.w3.org/xhtml1/dtd/xhtml1 xmlns = "http://www.w3.org/1999/xhtml"> <head> <title> halaman tanpa judul </iteme> <script type = "text/javascript" src = jQuery.min.js "> </script> <script type =" teks/javascript "> JQuery. "get", async: false, url: "http://flightquery.com/jsonp/flightresult.aspx?code=ca1998", datape: "jsonp", jsonp: "callback", // diteruskan ke handler permintaan atau halaman untuk mendapatkan nama parameter dari fungsi panggilan balik JSONP (umumnya callback jsonp) jsonpCallback:"flightHandler",//Customized jsonp callback function name, default is the random function name automatically generated by jQuery, or you can write "?", jQuery will automatically process data for you success: function(json){ alert('You query flight information: piao price: '+ json.price +' yuan, and piao: '+ json.tickets +' Zhang. ');Bukankah itu agak aneh? Mengapa saya tidak menulis fungsi FLightHandler kali ini? Dan itu benar -benar berjalan dengan sukses! Haha, ini adalah kredit jQuery. Ketika JQuery menangani JSONP Type AJAX (saya tidak bisa tidak mengeluh. Meskipun JQuery juga mengklasifikasikan JSONP ke Ajax, mereka sebenarnya bukan hal yang sama), itu akan secara otomatis menghasilkan fungsi callback dan mengambil data untuk metode atribut keberhasilan untuk memanggilnya. Bukankah itu sangat bagus?