دعونا نلقي نظرة على مثال رمز في صفحة HTML5 للحصول على البيانات التي يتم إرجاعها بواسطة HTTP Server من خلال طلب 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 = new xmlhttprequest () ؛
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>
<type type = "button" value = "get data" onClick = "getData ()" />
<div id = "res"> dsdf </iv>
</body>
</html>
رمز العقدة:
نسخة الكود كما يلي:
var http = require ("http") ؛
var server = http.createserver (function (req ، res) {
if (req.url! == "/favicon.ico") {
Res.Writehead (200 ، {"content-type": "text/plain" ، "Access-Control-Ollow-Origin": "http: // localhost"}) ؛
Res.Write ("Hello!") ؛
}
res.end () ؛
}) ؛
Server.Listen (1337 ، "LocalHost" ، Function () {
console.log ("ابدأ الاستماع ...") ؛
}) ؛
قم أولاً بتمكين الخدمة: Node Server.js
ابدأ صفحة ثابتة:
انقر فوق الزر "الحصول على البيانات"
إذا كنت تعتقد أنه من المزعج للغاية تكوين بيئة الخادم ، فيمكنك استعارة مزايا المحرر للقيام بذلك.
على سبيل المثال ، أنا أستخدم WebStrom 8.0 ؛
عندما أبدأ الصفحة ، يتم عرض هذا المسار في المتصفح:
المنفذ هو 63342. في هذا الوقت ، تم تعديل رمز فريقنا:
رمز NODE's Server.js:
نسخة الكود كما يلي:
var http = require ("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 () ؛
Res.Write ("Hello!") ؛
}
res.end () ؛
}) ؛
Server.Listen (1337 ، "LocalHost" ، Function () {
console.log ("ابدأ الاستماع ...") ؛
}) ؛
عدل قيمة "الوصول إلى السيطرة على الأوليين".
أعد تشغيل العرض التوضيحي وستجد أنه سيتم تحقيق نفس التأثير
يمكنك أيضًا تعيين رأس الاستجابة بشكل منفصل من خلال res.seetheader.
يمكنك تغيير Res.Writehead () إلى res.Setheader () ؛
نسخة الكود كما يلي:
var http = require ("http") ؛
var server = http.createserver (function (req ، res) {
if (req.url! == "/favicon.ico") {
//res.writehead(200 ، {"content-type": semisext/plain"،"access-control-allow-otigin":mithtp://localhost:63342 "}) ؛
Res.Setheader ("نوع المحتوى" ، "Text/Plain") ؛
Res.Setheader ("Access-Control-allow-Origin" ، "http: // localhost: 63342") ؛
Res.Write ("Hello!") ؛
}
res.end () ؛
}) ؛
Server.Listen (1337 ، "LocalHost" ، Function () {
console.log ("ابدأ الاستماع ...") ؛
}) ؛
ربما اكتشف الطلاب الحذرون أنه عند استخدام طريقة Setheader ، يكون رمز الحالة مفقودًا ، مثل 200. لذلك عندما نستخدم Res.Setheader ، كيف يمكننا تعيين رمز الحالة؟ دعنا نذهب إلى الكود لاحقًا.
يعود Ajax في تاريخ جانب الخادم:
يمكننا حذف هذا الحقل عند العودة على جانب الخادم.
Set Res.SendData = false ؛
نسخة الكود كما يلي:
var http = require ("http") ؛
var server = http.createserver (function (req ، res) {
if (req.url! == "/favicon.ico") {
//res.writehead(200 ، {"content-type": semisext/plain"،"access-control-allow-otigin":mithtp://localhost:63342 "}) ؛
res.StatusCode = 200 ؛
Res.SendDate = false ؛
Res.Setheader ("نوع المحتوى" ، "Text/Plain") ؛
Res.Setheader ("Access-Control-allow-Origin" ، "http: // localhost: 63342") ؛
Res.Write ("Hello!") ؛
}
res.end () ؛
}) ؛
Server.Listen (1337 ، "LocalHost" ، Function () {
console.log ("ابدأ الاستماع ...") ؛
}) ؛
تم تعيين رمز الحالة وتم حظر معلومات التاريخ.
Res.Getheader (الاسم) يحصل على معلومات رأس الاستجابة التي قمنا بتعيينها
Res.RemoveHeader (الاسم) ؛ يحذف معلومات رأسنا. يجب أن يسمى عند إرسال البيانات في طريقة الكتابة الخاصة بنا.
خاصية Res.HeadersSent هي قيمة منطقية. عندما يتم إرسال رأس الاستجابة ، تكون قيمة الممتلكات صحيحة ؛ عندما لم يتم إرسال رأس الاستجابة ، تكون قيمة الخاصية خاطئة.
رمز server.js:
نسخة الكود كما يلي:
var http = require ("http") ؛
var server = http.createserver (function (req ، res) {
if (req.url! == "/favicon.ico") {
إذا (res.HeadersSent)
console.log ("إرسال رأس الاستجابة") ؛
آخر
console.log ("رأس الاستجابة لم يتم إرساله") ؛
Res.Writehead (200 ، {"content-type": "text/plain" ، "Access-Control-allow-Origin": "http: // localhost: 63342"}) ؛
إذا (res.HeadersSent)
console.log ("إرسال رأس الاستجابة") ؛
آخر
console.log ("رأس الاستجابة لم يتم إرساله") ؛
Res.Write ("Hello!") ؛
}
res.end () ؛
}) ؛
Server.Listen (1337 ، "LocalHost" ، Function () {
console.log ("ابدأ الاستماع ...") ؛
}) ؛
قم بتشغيل العرض التوضيحي لعرض النتائج:
ترسل طريقة Res.Write () البيانات إلى العميل ، ولديها بالفعل قيمة إرجاع.
عندما تكون كمية البيانات المرسلة إلى العميل صغيرة أو سرعة الشبكة سريعة ، ترسل العقدة دائمًا البيانات مباشرة إلى منطقة ذاكرة التخزين المؤقت kernel في نظام التشغيل ، ثم تجلب البيانات من منطقة ذاكرة التخزين المؤقت kernel وترسلها إلى الطرف الآخر. في هذا الوقت ، ستعود الكتابة بشكل صحيح.
عندما تكون سرعة الشبكة بطيئة أو أن كمية البيانات كبيرة ، فإن خادم HTTP لن يرسل بالضرورة البيانات إلى العميل على الفور. ستقوم العقدة بتخزين البيانات في الذاكرة وإرسال البيانات في الذاكرة إلى الطرف الآخر من خلال kernel نظام التشغيل عندما يتمكن الطرف الآخر من قبول البيانات. في هذا الوقت ، اكتب إرجاع كاذبة.
يمكنك تعيين محتوى test.txt لاختبار النتائج.
يتحقق تأثير عقدة بسيطة+Ajax. أليس الأمر بسيطًا جدًا؟ بالطبع ، إذا أردنا إنشاء وظائف أكثر تعقيدًا ، فلا نزال بحاجة إلى التعلم أكثر ، وسنأخذ المبادرة لتحديثها في المستقبل.