node.js+Ajax實現獲取HTTP服務器返回數據

DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> node.js+Ajax實現獲取HTTP服務器返回數據

編輯：關於JavaScript

我們看一個HTML5頁面中通過AJAX請求的方式獲取HTTP服務器返回數據的代碼示例.由於我們把服務器的端口指定為1337,並將從端口為80的網站中運行HTML5頁面,因此這是一種跨域操作,需要在HTTP響應頭部中添加Access_Control_Allow_Origin字段,並且將參數指定為允許向服務器請求數據額域名+端口號(省略端口號時允許該域名下的任何端口向服務器請求數據),

靜態頁面:index.html(注:一定要放在服務器環境下,如果是win7系統的話,可以開啟IIS服務,並把頁面考過去直接運行這個頁面,)

代碼如下:
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>node中的ajax請求(html5頁面)</title>
    <script type="text/javascript">
        function 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>
<input type="button" value="獲取數據" onclick="GetData()" />
<div id="res">dsdf</div>
</body>
</html>

node代碼:

代碼如下:
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("開始監聽...");
});

修改了"Access-Control-Allow-Origin"的值.

重新運行demo會發現,達到同樣的效果

也可以通過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":"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");
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-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");
var server=http.createServer(function(req,res){
    if(req.url!=="/favicon.ico"){
        if(res.headersSent)
            console.log("響應頭已發送");
        else
            console.log("響應頭未發送");
        res.writeHead(200,{"Content-Type":"text/plain","Access-Control-Allow-Origin":"http://localhost:63342"});
        if(res.headersSent)
            console.log("響應頭已發送");
        else
            console.log("響應頭未發送");
        res.write("你好啊!");
    }
    res.end();
});
server.listen(1337,"localhost",function(){
    console.log("開始監聽...");
});

運行demo查看結果:

res.write()方法是向客戶端發送數據的,其實他還有一個返回值.

當向客戶端發送的數據量比較小時或網速較快時,node總是將數據直接發送到操作系統的內核緩存區中,然後從內核緩存區中取出數據發送給對方.這個時候write會返回true.

當網速慢或數據量較大時,http服務器並不一定會立刻把數據發送給客戶端,node會把數據緩存在內存中,並在對方可以接受數據的情況下將內存中的數據通過操作系統的內核發送給對方.這時的write返回false.

可以設置test.txt的內容多少來測試結果.

一個簡單的node+ajax效果就實現了.是不是很簡單呢？當然，想制作更加復雜的功能的話，我們還需要進一步的學習，以後我們慢慢來更新。

上一頁:nodejs中轉換URL字符串與查詢字符串詳解
下一頁:node.js超時timeout詳解

關於JavaScript

淺談JavaScript Date日期和時間對象: Date 日期和時間對象1. 介紹　　Date對象，是操作日期和時間的對象。Date對象對日期和時間
json實現前後台的相互傳值詳解: 前後台的相互傳值如果值太多，寫的麻煩累人，且容易出錯。這裡整理出一套使用標記標簽屬性的辦法來傳值，
js中判斷數字\字母\中文的正則表達式 (實例): /* 判斷指定的內容是否為空，若為空則彈出警告框 */ function isEmpty(theV

JavaScript基礎知識 JSON基礎正則表達式關於JavaScript JavaScript技巧 jQuery入門知識 AJAX入門 JavaScript綜合知識

小編推薦

詳談JavaScript內存洩漏 js實現的tab標簽切換效果代碼分享 js 遍歷json返回的map內容示例代碼 JavaScript入門教程(2):JS基礎知識在JavaScript中獲取請求的URL參數[正則] JavaScript實戰之菜單特效 Bootstrap基本布局實現方法詳解 JavaScript判斷微信浏覽器實例代碼隨鼠標移動的時鐘非常漂亮遺憾的是只支持IE 微信jssdk用法匯總

DIV CSS 佈局教程網

相關文章