Давайте посмотрим на пример кода на странице HTML5, чтобы получить данные, возвращаемые HTTP Server через AJAX -запрос. Поскольку мы указываем порт сервера как 1337 и будем запускать страницы HTML5 с веб-сайта с портом 80, это операция по перекрестной области. Это требует добавления поле Access_control_allo_origin в заголовок ответа HTTP, а также указание параметра, позволяющего запросить данные с сервера на имя домена + номер порта (при проведении номера порта, любой порт под именем домена разрешен для запроса данных с сервера).
Статическая страница: index.html (примечание: она должна быть размещена в среде сервера. Если это система Win7, вы можете включить службу IIS и запустить страницу сразу после теста страницы.)
Кода -копия выглядит следующим образом:
<! Doctype html>
<html>
<head lang = "en">
<meta charset = "utf-8">
<title> Ajax запрос в узле (HTML5 Page) </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>
<тело>
<input type = "button" value = "получить данные" onclick = "getData ()" />
<div id = "res"> dsdf </div>
</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-Allow-Origin": "http: // localhost"});
res.write ("Привет!");
}
res.end ();
});
server.listen (1337, "localhost", function () {
console.log ("Начните слушать ...");
});
Сначала включите службу: Node Server.js
Начните статическую страницу:
Нажмите кнопку «Получить данные»
Если вы думаете, что это слишком хлопотно для настройки серверной среды, вы можете одолжить преимущества редактора для этого.
Например, я использую Webstrom 8.0;
Когда я запускаю страницу, этот путь отображается в браузере:
Порт 63342. В настоящее время код нашей команды был изменен:
Код Node 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 ("Привет!");
}
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"!
res.setheader («контент-тип», «текст/равнина»);
res.setheader ("Access-Control-Allow-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 = require ("http");
var server = http.createserver (function (req, res) {
if (req.url! == "/favicon.ico") {
//res.writehead(200, {"content-type"!
res.statuscode = 200;
res.senddate = false;
res.setheader («контент-тип», «текст/равнина»);
res.setheader ("Access-Control-Allow-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 = require ("http");
var server = http.createserver (function (req, res) {
if (req.url! == "/favicon.ico") {
if (res.headerssent)
console.log («Отправленный заголовок ответа»);
еще
console.log («заголовок ответа не отправлен»);
res.writehead (200, {"content-type": "text/plain", "Access-Control-Allow-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 для проверки результатов.
Простой эффект узла+Ajax реализован. Разве это не очень просто? Конечно, если мы хотим создать более сложные функции, нам все равно нужно учиться дальше, и мы возьмем на себя инициативу, чтобы обновить их в будущем.