ลองดูตัวอย่างโค้ดในหน้า HTML5 เพื่อรับข้อมูลที่ส่งคืนโดยเซิร์ฟเวอร์ HTTP ผ่านคำขอ AJAX เนื่องจากเราระบุพอร์ตของเซิร์ฟเวอร์เป็น 1337 และจะเรียกใช้หน้า HTML5 จากเว็บไซต์ที่มีพอร์ต 80 นี่คือการดำเนินการข้ามโดเมน ต้องเพิ่มฟิลด์ Access_Control_allow_origin ไปยังส่วนหัวการตอบกลับ HTTP และระบุพารามิเตอร์เพื่ออนุญาตการร้องขอข้อมูลจากเซิร์ฟเวอร์ไปยังชื่อโดเมน + หมายเลขพอร์ต (เมื่อละเว้นหมายเลขพอร์ตใด ๆ พอร์ตใด ๆ ภายใต้ชื่อโดเมนจะได้รับอนุญาตให้ขอข้อมูลจากเซิร์ฟเวอร์)
หน้าคงที่: index.html (หมายเหตุ: ต้องวางไว้ในสภาพแวดล้อมเซิร์ฟเวอร์หากเป็นระบบ Win7 คุณสามารถเปิดใช้งานบริการ IIS และเรียกใช้หน้าเว็บโดยตรงหลังจากการทดสอบหน้า)
การคัดลอกรหัสมีดังนี้:
<! doctype html>
<html>
<head lang = "en">
<meta charset = "utf-8">
<title> คำขอ AJAX ในโหนด (หน้า HTML5) </title>
<script type = "text/javascript">
ฟังก์ชั่น getData () {
var xhr = ใหม่ xmlhttprequest ();
xhr.open ("รับ", "http: // localhost: 1337/", จริง);
xhr.onreadyStateChange = function () {
if (xhr.readystate == 4) {
if (xhr.status == 200) {
document.getElementById ("res"). innerhtml = xhr.responsetext;
-
-
-
XHR.Send (NULL);
-
</script>
</head>
<body>
<อินพุต type = "button" value = "รับ data" onclick = "getData ()" />>>>
<div id = "res"> dsdf </div>
</body>
</html>
รหัสโหนด:
การคัดลอกรหัสมีดังนี้:
var http = ต้องการ ("http");
var server = http.createServer (ฟังก์ชั่น (req, res) {
if (req.url! == "/favicon.ico") {
res.writehead (200, {"content-type": "text/plain", "Access-Control-Ollow-Origin": "http: // localhost"});
res.write ("สวัสดี!");
-
res.end ();
-
Server.Listen (1337, "localhost", function () {
console.log ("เริ่มฟัง ... ");
-
ก่อนอื่นเปิดใช้งานบริการ: node server.js
เริ่มหน้าคงที่:
คลิกปุ่ม "รับข้อมูล"
หากคุณคิดว่ามันลำบากเกินไปที่จะกำหนดค่าสภาพแวดล้อมเซิร์ฟเวอร์คุณสามารถยืมข้อดีของตัวแก้ไขให้ทำ
ตัวอย่างเช่นฉันใช้ WebStrom 8.0;
เมื่อฉันเริ่มหน้าเส้นทางนี้จะแสดงในเบราว์เซอร์:
พอร์ตคือ 63342 ในเวลานี้รหัสของทีมของเราได้รับการแก้ไขแล้ว:
รหัส Server.js ของ Node:
การคัดลอกรหัสมีดังนี้:
var http = ต้องการ ("http");
var server = http.createServer (ฟังก์ชั่น (req, res) {
if (req.url! == "/favicon.ico") {
res.writehead (200, {"content-type": "text/plain", "Access-Control-Ollow-Origin": "http: // localhost: 63342"});
//res.setheader ();
res.write ("สวัสดี!");
-
res.end ();
-
Server.Listen (1337, "localhost", function () {
console.log ("เริ่มฟัง ... ");
-
แก้ไขค่าของ "การควบคุมการเข้าถึง-Ollow-Origin"
เรียกใช้การสาธิตอีกครั้งและคุณจะพบว่าจะมีเอฟเฟกต์เดียวกันนี้
นอกจากนี้คุณยังสามารถตั้งค่าส่วนหัวการตอบกลับแยกต่างหากผ่าน Res.seetheader
คุณสามารถเปลี่ยน res.writehead ข้างต้น () เป็น res.setheader ();
การคัดลอกรหัสมีดังนี้:
var http = ต้องการ ("http");
var server = http.createServer (ฟังก์ชั่น (req, res) {
if (req.url! == "/favicon.ico") {
//res.writehead(200, {"content-type"::" text/plain","access-control-allow-origin":"http://localhost:63342 "});
Res.Setheader ("ประเภทเนื้อหา", "ข้อความ/ธรรมดา");
Res.Setheader ("Access-Control-Ollow-Origin", "http: // localhost: 63342");
res.write ("สวัสดี!");
-
res.end ();
-
Server.Listen (1337, "localhost", function () {
console.log ("เริ่มฟัง ... ");
-
นักเรียนที่ระมัดระวังอาจค้นพบว่าเมื่อใช้วิธี Setheader รหัสสถานะจะหายไปเช่น 200 ดังนั้นเมื่อเราใช้ Res.Setheader เราจะตั้งรหัสสถานะได้อย่างไร ไปที่รหัสกันในภายหลัง
AJAX ส่งคืนในวันที่เซิร์ฟเวอร์:
เราสามารถลบฟิลด์นี้เมื่อกลับมาทางฝั่งเซิร์ฟเวอร์
ตั้งค่า res.senddata = false;
การคัดลอกรหัสมีดังนี้:
var http = ต้องการ ("http");
var server = http.createServer (ฟังก์ชั่น (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 ("ประเภทเนื้อหา", "ข้อความ/ธรรมดา");
Res.Setheader ("Access-Control-Ollow-Origin", "http: // localhost: 63342");
res.write ("สวัสดี!");
-
res.end ();
-
Server.Listen (1337, "localhost", function () {
console.log ("เริ่มฟัง ... ");
-
รหัสสถานะถูกตั้งค่าและข้อมูลวันที่ถูกบล็อก
Res.Getheader (ชื่อ) ได้รับข้อมูลส่วนหัวการตอบกลับที่เราตั้งไว้
Res.RemoveHeader (ชื่อ); ลบข้อมูลส่วนหัวของเรา จะต้องเรียกเมื่อข้อมูลถูกส่งในวิธีการเขียนของเรา
คุณสมบัติ res.headerssent เป็นค่าบูลีน เมื่อส่วนหัวการตอบกลับถูกส่งค่าทรัพย์สินจะเป็นจริง เมื่อส่วนหัวการตอบกลับยังไม่ได้รับการส่งค่าคุณสมบัติเป็นเท็จ
Server.js รหัส:
การคัดลอกรหัสมีดังนี้:
var http = ต้องการ ("http");
var server = http.createServer (ฟังก์ชั่น (req, res) {
if (req.url! == "/favicon.ico") {
if (res.headerssent)
console.log ("ส่วนหัวตอบกลับที่ส่ง");
อื่น
console.log ("ส่วนหัวการตอบกลับไม่ได้ส่ง");
res.writehead (200, {"content-type": "text/plain", "Access-Control-Ollow-Origin": "http: // localhost: 63342"});
if (res.headerssent)
console.log ("ส่วนหัวตอบกลับที่ส่ง");
อื่น
console.log ("ส่วนหัวการตอบกลับไม่ได้ส่ง");
res.write ("สวัสดี!");
-
res.end ();
-
Server.Listen (1337, "localhost", function () {
console.log ("เริ่มฟัง ... ");
-
เรียกใช้การสาธิตเพื่อดูผลลัพธ์:
เมธอด res.write () ส่งข้อมูลไปยังลูกค้าและจริง ๆ แล้วมีค่าส่งคืน
เมื่อจำนวนข้อมูลที่ส่งไปยังไคลเอนต์มีขนาดเล็กหรือความเร็วเครือข่ายเร็วโหนดจะส่งข้อมูลโดยตรงไปยังพื้นที่แคชเคอร์เนลของระบบปฏิบัติการโดยตรงจากนั้นดึงข้อมูลจากพื้นที่แคชเคอร์เนลและส่งไปยังอีกฝ่าย ในเวลานี้การเขียนจะกลับมาจริง
เมื่อความเร็วเครือข่ายช้าหรือจำนวนข้อมูลมีขนาดใหญ่เซิร์ฟเวอร์ HTTP จะไม่ส่งข้อมูลไปยังไคลเอนต์ทันที โหนดจะแคชข้อมูลในหน่วยความจำและส่งข้อมูลในหน่วยความจำไปยังอีกฝ่ายผ่านเคอร์เนลระบบปฏิบัติการเมื่อบุคคลอื่นสามารถรับข้อมูลได้ ในเวลานี้เขียนผลตอบแทนเท็จ
คุณสามารถตั้งค่าเนื้อหาของ test.txt เพื่อทดสอบผลลัพธ์
เอฟเฟกต์ Node+Ajax อย่างง่ายนั้นเกิดขึ้นได้ มันไม่ง่ายมากเหรอ? แน่นอนถ้าเราต้องการสร้างฟังก์ชั่นที่ซับซ้อนมากขึ้นเรายังต้องเรียนรู้เพิ่มเติมและเราจะใช้ความคิดริเริ่มในการอัปเดตในอนาคต