HTML5 페이지의 코드 예제를 살펴보고 AJAX 요청을 통해 HTTP 서버에서 반환 한 데이터를 얻으십시오. 서버 포트를 1337로 지정하고 포트 80이있는 웹 사이트에서 HTML5 페이지를 실행하므로 이는 크로스 도메인 작업입니다. access_control_allow_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 = 새로운 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);
}
</스크립트>
</head>
<body>
<입력 유형 = "버튼"value = "데이터 가져 오기"onclick = "getData ()" />
<div id = "res"> dsdf </div>
</body>
</html>
노드 코드 :
코드 사본은 다음과 같습니다.
var http = 요구 사항 ( "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의 Server.js 코드 :
코드 사본은 다음과 같습니다.
var http = 요구 사항 ( "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 : 63342"});
//res.setheader ();
res.write ( "hello!");
}
res.end ();
});
Server.Listen (1337, "LocalHost", function () {
Console.log ( "듣기 시작 ...");
});
"Access-Control-Ollow-Origin"의 값을 수정했습니다.
데모를 다시 실행하면 동일한 효과가 달성 될 것입니다.
Res.Seetheader를 통해 응답 헤더를 별도로 설정할 수도 있습니다.
위의 res.writehead ()를 res.setheader ()로 변경할 수 있습니다.
코드 사본은 다음과 같습니다.
var http = 요구 사항 ( "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 ( "content-type", "text/plain");
res.setheader ( "Access-Control-Ollow-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 = 요구 사항 ( "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 ( "content-type", "text/plain");
res.setheader ( "Access-Control-Ollow-Origin", "http : // localhost : 63342");
res.write ( "hello!");
}
res.end ();
});
Server.Listen (1337, "LocalHost", function () {
Console.log ( "듣기 시작 ...");
});
상태 코드가 설정되고 날짜 정보가 차단됩니다.
res.getheader (이름)는 설정 한 응답 헤더 정보를 가져옵니다
res.removeHeader (이름); 헤더 정보를 삭제합니다. 데이터가 쓰기 방법으로 전송 될 때 호출해야합니다.
res.headerssent 속성은 부울 가치입니다. 응답 헤더가 전송되면 속성 값이 참입니다. 응답 헤더가 전송되지 않으면 속성 값은 False입니다.
Server.js 코드 :
코드 사본은 다음과 같습니다.
var http = 요구 사항 ( "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-Ollow-Origin": "http : // localhost : 63342"});
if (res.headerssent)
Console.log ( "응답 헤더 전송");
또 다른
Console.log ( "응답 헤더가 보내지 않음");
res.write ( "hello!");
}
res.end ();
});
Server.Listen (1337, "LocalHost", function () {
Console.log ( "듣기 시작 ...");
});
결과를 볼 수 있도록 데모를 실행하십시오.
res.write () 메소드는 클라이언트에 데이터를 보냅니다. 실제로 반환 값이 있습니다.
클라이언트로 전송 된 데이터 양이 작거나 네트워크 속도가 빠르면 노드는 항상 데이터를 운영 체제의 커널 캐시 영역으로 직접 전송 한 다음 커널 캐시 영역에서 데이터를 가져와 상대방으로 보냅니다. 현재 쓰기는 True를 반환합니다.
네트워크 속도가 느리거나 데이터 양이 크면 HTTP 서버가 클라이언트에 즉시 데이터를 보낼 필요는 없습니다. 노드는 메모리의 데이터를 캐시하고 상대방이 데이터를 수락 할 수있을 때 운영 체제 커널을 통해 다른 당사자에게 메모리로 데이터를 보냅니다. 이때 쓰기 returns false.
test.txt의 내용을 설정하여 결과를 테스트 할 수 있습니다.
간단한 노드+ajax 효과가 실현됩니다. 매우 간단하지 않습니까? 물론,보다 복잡한 기능을 만들려면 여전히 더 많은 것을 배워야하며 앞으로이를 업데이트하기 위해 주도권을 잡을 것입니다.