Mari kita lihat contoh kode di halaman HTML5 untuk mendapatkan data yang dikembalikan oleh server HTTP melalui permintaan AJAX. Karena kami menentukan port server sebagai 1337 dan akan menjalankan halaman HTML5 dari situs web dengan port 80, ini adalah operasi lintas domain. Ini membutuhkan penambahan bidang access_control_allow_origin ke header respons HTTP, dan menentukan parameter untuk memungkinkan meminta data dari server ke nama domain + nomor port (saat menghilangkan nomor port, port apa pun di bawah nama domain diizinkan untuk meminta data dari server).
Halaman statis: index.html (Catatan: Itu harus ditempatkan di lingkungan server. Jika itu adalah sistem Win7, Anda dapat mengaktifkan layanan IIS dan menjalankan halaman langsung setelah tes halaman.)
Salinan kode adalah sebagai berikut:
<! Doctype html>
<Html>
<head lang = "en">
<meta charset = "UTF-8">
<iteme> Permintaan AJAX di Node (Halaman HTML5) </iteme>
<type skrip = "Teks/JavaScript">
fungsi getData () {
var xhr = xmlhttpRequest baru ();
xhr.open ("get", "http: // localhost: 1337/", true);
xhr.onreadystatechange = function () {
if (xhr.readystate == 4) {
if (xhr.status == 200) {
document.geteLementById ("res"). innerHtml = xhr.Responsetext;
}
}
}
xhr.send (null);
}
</script>
</head>
<body>
<input type = "Tombol" value = "get data" onClick = "getData ()" />
<Div id = "res"> dsdf </div>
</body>
</html>
Kode Node:
Salinan kode adalah sebagai berikut:
var http = membutuhkan ("http");
var server = http.createServer (function (req, res) {
if (req.url! == "/favicon.ico") {
res.writeHead (200, {"tipe konten": "teks/polos", "access-control-allow-origin": "http: // localhost"});
res.write ("Halo!");
}
res.end ();
});
server.listen (1337, "localhost", function () {
Console.log ("Mulai Mendengarkan ...");
});
Pertama -tama aktifkan layanan: node server.js
Mulai halaman statis:
Klik tombol "Dapatkan Data"
Jika Anda berpikir itu terlalu merepotkan untuk mengonfigurasi lingkungan server, Anda dapat meminjam keuntungan editor untuk melakukannya.
Misalnya, saya menggunakan WebStrom 8.0;
Ketika saya memulai halaman, jalur ini ditampilkan di browser:
Port adalah 63342. Pada saat ini, kode tim kami telah dimodifikasi:
Node's Server.js Code:
Salinan kode adalah sebagai berikut:
var http = membutuhkan ("http");
var server = http.createServer (function (req, res) {
if (req.url! == "/favicon.ico") {
res.writeHead (200, {"tipe konten": "teks/polos", "access-control-allow-origin": "http: // localhost: 63342"});
//res.setHeader ();
res.write ("Halo!");
}
res.end ();
});
server.listen (1337, "localhost", function () {
Console.log ("Mulai Mendengarkan ...");
});
Memodifikasi nilai "Access-Control-Allow-Origin".
Menjalankan kembali demo dan Anda akan menemukan bahwa efek yang sama akan dicapai
Anda juga dapat mengatur header respons secara terpisah melalui res.seetheader.
Anda dapat mengubah res.writeHead () di atas menjadi res.setHeader ();
Salinan kode adalah sebagai berikut:
var http = membutuhkan ("http");
var server = http.createServer (function (req, res) {
if (req.url! == "/favicon.ico") {
//res.writeHead(200, {"Content-Type":"Text/plain","access-control-Allow-origin":"http://localhost:63342 "});
res.setHeader ("tipe konten", "teks/polos");
res.setHeader ("Access-Control-Allow-Origin", "http: // localhost: 63342");
res.write ("Halo!");
}
res.end ();
});
server.listen (1337, "localhost", function () {
Console.log ("Mulai Mendengarkan ...");
});
Siswa yang hati -hati mungkin telah menemukan bahwa ketika menggunakan metode setHeader, kode status hilang, seperti 200. Jadi ketika kita menggunakan res.setHeader, bagaimana kita mengatur kode status? Ayo pergi ke kode nanti.
Ajax Mengembalikan pada Tanggal Sisi Server:
Kami dapat menghapus bidang ini saat kembali di sisi server.
Set res.sendData = false;
Salinan kode adalah sebagai berikut:
var http = membutuhkan ("http");
var server = http.createServer (function (req, res) {
if (req.url! == "/favicon.ico") {
//res.writeHead(200, {"Content-Type":"Text/plain","access-control-Allow-origin":"http://localhost:63342 "});
res.statuscode = 200;
res.sendDate = false;
res.setHeader ("tipe konten", "teks/polos");
res.setHeader ("Access-Control-Allow-Origin", "http: // localhost: 63342");
res.write ("Halo!");
}
res.end ();
});
server.listen (1337, "localhost", function () {
Console.log ("Mulai Mendengarkan ...");
});
Kode status diatur dan informasi tanggal diblokir.
res.getheader (nama) mendapatkan informasi header respons yang kami atur
res.removeheader (nama); Menghapus informasi header kami. Itu harus dipanggil ketika data dikirim dalam metode tulis kami.
Properti res.headsent adalah nilai boolean. Ketika header respons telah dikirim, nilai properti itu benar; Ketika header respons belum dikirim, nilai properti salah.
Kode server.js:
Salinan kode adalah sebagai berikut:
var http = membutuhkan ("http");
var server = http.createServer (function (req, res) {
if (req.url! == "/favicon.ico") {
if (res.headerssent)
console.log ("header respons dikirim");
kalau tidak
console.log ("header respons tidak dikirim");
res.writeHead (200, {"tipe konten": "teks/polos", "access-control-allow-origin": "http: // localhost: 63342"});
if (res.headerssent)
console.log ("header respons dikirim");
kalau tidak
console.log ("header respons tidak dikirim");
res.write ("Halo!");
}
res.end ();
});
server.listen (1337, "localhost", function () {
Console.log ("Mulai Mendengarkan ...");
});
Jalankan demo untuk melihat hasilnya:
Metode res.write () mengirimkan data ke klien, dan sebenarnya memiliki nilai pengembalian.
Ketika jumlah data yang dikirim ke klien kecil atau kecepatan jaringan cepat, Node selalu mengirimkan data langsung ke area cache kernel dari sistem operasi, dan kemudian mengambil data dari area cache kernel dan mengirimkannya ke pihak lain. Pada saat ini, tulis akan kembali true.
Ketika kecepatan jaringan lambat atau jumlah data besar, server HTTP tidak akan segera mengirim data ke klien. Node akan menyimpan data dalam memori dan mengirim data dalam memori ke pihak lain melalui kernel sistem operasi ketika pihak lain dapat menerima data. Pada saat ini, tulis pengembalian salah.
Anda dapat mengatur konten test.txt untuk menguji hasilnya.
Efek simpul+AJAX sederhana direalisasikan. Bukankah itu sangat sederhana? Tentu saja, jika kami ingin membuat fungsi yang lebih kompleks, kami masih perlu belajar lebih lanjut, dan kami akan mengambil inisiatif untuk memperbaruinya di masa depan.