node.js HTTP から返されるデータを取得する Ajax 実装 server_node.js

HTML5 ページの AJAX リクエストを通じて HTTP サーバーから返されたデータを取得するコード例を見てみましょう。サーバー ポートを 1337 に指定し、Web サイトからポート 80 で HTML5 ページを実行します。この種のクロスドメイン操作の場合、HTTP 応答ヘッダーに Access_Control_Allow_Origin フィールドを追加し、サーバーからのデータ要求を許可するドメイン名のポート番号としてパラメーターを指定する必要があります (ポート番号が省略された場合は、任意のドメイン名の下にあるポートはサーバーからのデータのリクエストを許可されています)、

静的ページ:index.html (注: サーバー環境に配置する必要があります。win7 システムの場合は、IIS サービスを有効にしてページを渡してページを直接実行できます。)

コードをコピーします コードは次のとおりです:

<スクリプトタイプ="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);
}

dsdf

ノードコード:

コードをコピーします コードは次のとおりです:

var http=require("http");
varserver=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("監視を開始します...");
});

まずサービスを開始します:nodeserver.js

静的ページの開始:

「データを取得」ボタンをクリックします

サーバー環境の設定が面倒な場合は、エディターを利用して設定することもできます。

たとえば、私は webstrom 8.0 を使用しています;

ページを起動すると、ブラウザに次のパスが表示されます:

ポートは 63342 です。この時点で、私たちのチームはコードにいくつかの変更を加えます。

ノードのserver.jsコード:

コードをコピー コードは次のとおりです:

var http=require("http");
varserver=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("監視を開始します...");
});

「Access-Control-Allow-Origin」の値を変更しました。

デモを再実行すると、同じ効果が得られることがわかります

res.seetHeader を通じて応答ヘッダーを個別に設定することもできます。

上記の res.writeHead() を res.setHeader();

に変更できます。

コードをコピーします コードは次のとおりです:

var http=require("http");
varserver=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-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");
varserver=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-Allow-Origin","http://localhost:63342");
res.write("こんにちは!");
}
res.end();
});
server.listen(1337,"localhost",function(){
console.log("監視を開始します...");
});

ステータスコードが設定され、日付情報もブロックされます。

res.getHeader(name) は、設定した応答ヘッダー情報を取得します

res.removeHeader(name); ヘッダー情報を削除します。write メソッドでデータを送信する前に呼び出す必要があります。

res.headersSent 属性はブール値です。応答ヘッダーが送信された場合、属性値は true です。応答ヘッダーが送信されていない場合、属性値は false です。

server.js コード:

コードをコピー コードは次のとおりです:

var http=require("http");
varserver=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() メソッドはクライアントにデータを送信します。実際には戻り値もあります。

クライアントに送信されるデータの量が比較的少ない場合、またはネットワーク速度が速い場合、ノードは常にデータをオペレーティング システムのカーネル キャッシュに直接送信し、その後カーネル キャッシュからデータを取得してクライアントに送信します。このとき相手は true を返します。

ネットワーク速度が遅い場合、またはデータ量が多い場合、http サーバーは必ずしもデータをすぐにクライアントに送信するとは限りません。ノードはデータをメモリにキャッシュし、他のノードの場合はデータをメモリに保存します。このとき、書き込みは false を返します。

test.txt の内容を設定して結果をテストできます。

シンプルなノードの ajax 効果が実現されています。非常に簡単ではないでしょうか。もちろん、より複雑な機能を作りたい場合は、まだまだ勉強が必要ですので、今後ゆっくりとアップデートしていきます。