Vejamos um exemplo de código em uma página HTML5 para obter dados retornados pelo servidor HTTP por meio da solicitação AJAX. Como especificamos a porta do servidor como 1337 e executaremos as páginas HTML5 de um site com a porta 80, esta é uma operação de domínio cruzado. Requer adicionar o campo access_control_allow_origin ao cabeçalho da resposta HTTP e especificar o parâmetro para permitir a solicitação de dados do servidor para o nome do domínio + número da porta (ao omitir o número da porta, qualquer porta sob o nome de domínio pode solicitar dados do servidor).
Página estática: index.html (Nota: deve ser colocado no ambiente do servidor. Se for um sistema Win7, você pode ativar o serviço IIS e executar a página diretamente após o teste da página.)
A cópia do código é a seguinte:
<! Doctype html>
<html>
<head lang = "en">
<meta charset = "utf-8">
<title> solicitação AJAX em nó (página html5) </ititle>
<script type = "text/javascript">
função getData () {
var xhr = novo xmlHttPrequest ();
xhr.open ("get", "http: // localhost: 1337/", true);
xhr.onreadyStateChange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
document.getElementById ("res"). innerhtml = xhr.PronseText;
}
}
}
xhr.send (nulo);
}
</script>
</head>
<Body>
<input type = "button" value = "get Data" onclick = "getData ()" />
<div id = "res"> dsdf </div>
</body>
</html>
Código do nó:
A cópia do código é a seguinte:
var http = requer ("http");
var server = http.createServer (function (req, res) {
if (req.url! == "/favicon.ico") {
Res.writehead (200, {"content-type": "text/plana", "Access-Control-Allow-Origin": "http: // localhost"});
res.Write ("Hello!");
}
res.nd ();
});
Server.Listen (1337, "localhost", function () {
console.log ("comece a ouvir ...");
});
Primeiro ative o serviço: Node Server.js
Inicie uma página estática:
Clique no botão "Obtenha dados"
Se você acha que é muito problemático configurar um ambiente de servidor, você pode emprestar as vantagens do editor para fazê -lo.
Por exemplo, estou usando o Webstrom 8.0;
Quando inicio a página, esse caminho é exibido no navegador:
A porta é 63342. Nesse momento, o código de nossa equipe foi modificado:
Código do Node's Server.js:
A cópia do código é a seguinte:
var http = requer ("http");
var server = http.createServer (function (req, res) {
if (req.url! == "/favicon.ico") {
Res.writehead (200, {"content-type": "text/plana", "Access-Control-Allow-Origin": "http: // localhost: 63342"});
//res.setheader ();
res.Write ("Hello!");
}
res.nd ();
});
Server.Listen (1337, "localhost", function () {
console.log ("comece a ouvir ...");
});
Modificou o valor de "Access-Control-Alow-Origin".
Re-executar a demonstração e você descobrirá que o mesmo efeito será alcançado
Você também pode definir o cabeçalho de resposta separadamente através do Res.Seetheader.
Você pode alterar o repr.WriteHead () para res.SetHeader ();
A cópia do código é a seguinte:
var http = requer ("http");
var server = http.createServer (function (req, res) {
if (req.url! == "/favicon.ico") {
//res.writehead(200, furnt-type":"text/plain","acess-Control-allow-origin":"http://localhost:63342 "});
Res.Setheader ("Tipo de Conteúdo", "Texto/Plano");
Res.Setheader ("Access-Control-Allow-Origin", "http: // localhost: 63342");
res.Write ("Hello!");
}
res.nd ();
});
Server.Listen (1337, "localhost", function () {
console.log ("comece a ouvir ...");
});
Os alunos cuidadosos podem ter descoberto que, ao usar o método setheader, está faltando um código de status, como 200. Então, quando usamos res.Setheader, como definimos o código de status? Vamos ao código mais tarde.
Ajax retorna na data lateral do servidor:
Podemos excluir esse campo ao retornar no lado do servidor.
Defina res.sendData = false;
A cópia do código é a seguinte:
var http = requer ("http");
var server = http.createServer (function (req, res) {
if (req.url! == "/favicon.ico") {
//res.writehead(200, furnt-type":"text/plain","acess-Control-allow-origin":"http://localhost:63342 "});
res.statuscode = 200;
res.senddate = false;
Res.Setheader ("Tipo de Conteúdo", "Texto/Plano");
Res.Setheader ("Access-Control-Allow-Origin", "http: // localhost: 63342");
res.Write ("Hello!");
}
res.nd ();
});
Server.Listen (1337, "localhost", function () {
console.log ("comece a ouvir ...");
});
O código de status está definido e as informações da data são bloqueadas.
Res.getheader (nome) obtém as informações do cabeçalho da resposta que definimos
res.RemoveHeader (nome); Exclui nossas informações de cabeçalho. Deve ser chamado quando os dados são enviados em nosso método de gravação.
A propriedade Res.HeadserSent é um valor booleano. Quando o cabeçalho da resposta foi enviado, o valor da propriedade é verdadeiro; Quando o cabeçalho da resposta não foi enviado, o valor da propriedade é falso.
Código Server.js:
A cópia do código é a seguinte:
var http = requer ("http");
var server = http.createServer (function (req, res) {
if (req.url! == "/favicon.ico") {
if (res.HeaderSent)
console.log ("Cabeçalho de resposta enviado");
outro
console.log ("Cabeçalho de resposta não enviado");
Res.writehead (200, {"content-type": "text/plana", "Access-Control-Allow-Origin": "http: // localhost: 63342"});
if (res.HeaderSent)
console.log ("Cabeçalho de resposta enviado");
outro
console.log ("Cabeçalho de resposta não enviado");
res.Write ("Hello!");
}
res.nd ();
});
Server.Listen (1337, "localhost", function () {
console.log ("comece a ouvir ...");
});
Execute a demonstração para ver os resultados:
O método res.Write () envia dados para o cliente e, na verdade, possui um valor de retorno.
Quando a quantidade de dados enviados ao cliente é pequena ou a velocidade da rede é rápida, o Node sempre envia os dados diretamente para a área de cache do kernel do sistema operacional e, em seguida, busca os dados da área de cache do kernel e o envia para a outra parte. Neste momento, a gravação retornará verdadeira.
Quando a velocidade da rede é lenta ou a quantidade de dados é grande, o servidor HTTP não enviará necessariamente os dados para o cliente imediatamente. O nó cache os dados na memória e enviará os dados na memória para a outra parte através do kernel do sistema operacional quando a outra parte puder aceitar os dados. Neste momento, a gravação retorna falsa.
Você pode definir o conteúdo do teste.txt para testar os resultados.
Um efeito simples de nó+Ajax é realizado. Não é muito simples? Obviamente, se queremos criar funções mais complexas, ainda precisamos aprender mais e tomaremos a iniciativa de atualizá -las no futuro.