快捷導(dǎo)航

node.js+Ajax實(shí)現(xiàn)獲取HTTP服務(wù)器返回?cái)?shù)據(jù)

更新時(shí)間：2014年11月26日 12:07:29 投稿：hebedich

這篇文章主要介紹了node.js+Ajax實(shí)現(xiàn)獲取HTTP服務(wù)器返回?cái)?shù)據(jù)，講解的十分詳細(xì)，也給出了很多的實(shí)例，是篇非常不錯(cuò)的文章，這里推薦給大家。

我們看一個(gè)HTML5頁(yè)面中通過(guò)AJAX請(qǐng)求的方式獲取HTTP服務(wù)器返回?cái)?shù)據(jù)的代碼示例.由于我們把服務(wù)器的端口指定為1337,并將從端口為80的網(wǎng)站中運(yùn)行HTML5頁(yè)面,因此這是一種跨域操作,需要在HTTP響應(yīng)頭部中添加Access_Control_Allow_Origin字段,并且將參數(shù)指定為允許向服務(wù)器請(qǐng)求數(shù)據(jù)額域名+端口號(hào)(省略端口號(hào)時(shí)允許該域名下的任何端口向服務(wù)器請(qǐng)求數(shù)據(jù)),

靜態(tài)頁(yè)面:index.html(注:一定要放在服務(wù)器環(huán)境下,如果是win7系統(tǒng)的話,可以開(kāi)啟IIS服務(wù),并把頁(yè)面考過(guò)去直接運(yùn)行這個(gè)頁(yè)面,)

復(fù)制代碼代碼如下:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>node中的ajax請(qǐng)求(html5頁(yè)面)</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="獲取數(shù)據(jù)" onclick="GetData()" />
<div id="res">dsdf</div>
</body>
</html>

node代碼:

復(fù)制代碼代碼如下:

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("開(kāi)始監(jiān)聽(tīng)...");
});

首先開(kāi)啟服務(wù):node server.js

啟動(dòng)靜態(tài)頁(yè)面:

點(diǎn)擊按鈕"獲取數(shù)據(jù)"

如果大家覺(jué)得需要配置服務(wù)器環(huán)境太麻煩,可以借用編輯器的優(yōu)勢(shì)來(lái)做.

比如我用的是webstrom 8.0;

當(dāng)我啟動(dòng)頁(yè)面的時(shí)候,瀏覽器中顯示的是這個(gè)路徑:

端口是63342.這個(gè)時(shí)候我們隊(duì)代碼做一些修改:

node的 server.js代碼:

復(fù)制代碼代碼如下:

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("開(kāi)始監(jiān)聽(tīng)...");
});

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

重新運(yùn)行demo會(huì)發(fā)現(xiàn),達(dá)到同樣的效果

也可以通過(guò)res.seetHeader來(lái)單獨(dú)設(shè)置響應(yīng)頭部.

可以將上面的res.writeHead()改成res.setHeader();

復(fù)制代碼代碼如下:

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("開(kāi)始監(jiān)聽(tīng)...");
});

細(xì)心的同學(xué)可能發(fā)現(xiàn)了,利用setHeader的方法時(shí),缺少了一個(gè)狀態(tài)碼,比如200.那么我們?cè)谑褂胷es.setHeader的時(shí)候,如何來(lái)設(shè)置狀態(tài)碼呢?等會(huì)上代碼

ajax在服務(wù)器端返回的時(shí)候日期:

我們可以在服務(wù)器端返回時(shí),刪除這個(gè)字段.

設(shè)置res.sendData=false;

復(fù)制代碼代碼如下:

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("開(kāi)始監(jiān)聽(tīng)...");
});

設(shè)置了狀態(tài)碼,也屏蔽了日期信息.

res.getHeader(name)獲取我們?cè)O(shè)置的響應(yīng)頭信息

res.removeHeader(name);刪除我們的頭信息.必須在我們的write方法發(fā)送數(shù)據(jù)之情被調(diào)用.

res.headersSent屬性是一個(gè)布爾值,當(dāng)當(dāng)響應(yīng)頭已發(fā)送時(shí),屬性值為true時(shí);當(dāng)響應(yīng)頭未發(fā)送時(shí),屬性值為false.

server.js代碼:

復(fù)制代碼代碼如下:

var http=require("http");
var server=http.createServer(function(req,res){
    if(req.url!=="/favicon.ico"){
        if(res.headersSent)
            console.log("響應(yīng)頭已發(fā)送");
        else
            console.log("響應(yīng)頭未發(fā)送");
        res.writeHead(200,{"Content-Type":"text/plain","Access-Control-Allow-Origin":"http://localhost:63342"});
        if(res.headersSent)
            console.log("響應(yīng)頭已發(fā)送");
        else
            console.log("響應(yīng)頭未發(fā)送");
        res.write("你好啊!");
    }
    res.end();
});
server.listen(1337,"localhost",function(){
    console.log("開(kāi)始監(jiān)聽(tīng)...");
});

運(yùn)行demo查看結(jié)果:

res.write()方法是向客戶端發(fā)送數(shù)據(jù)的,其實(shí)他還有一個(gè)返回值.

當(dāng)向客戶端發(fā)送的數(shù)據(jù)量比較小時(shí)或網(wǎng)速較快時(shí),node總是將數(shù)據(jù)直接發(fā)送到操作系統(tǒng)的內(nèi)核緩存區(qū)中,然后從內(nèi)核緩存區(qū)中取出數(shù)據(jù)發(fā)送給對(duì)方.這個(gè)時(shí)候write會(huì)返回true.

當(dāng)網(wǎng)速慢或數(shù)據(jù)量較大時(shí),http服務(wù)器并不一定會(huì)立刻把數(shù)據(jù)發(fā)送給客戶端,node會(huì)把數(shù)據(jù)緩存在內(nèi)存中,并在對(duì)方可以接受數(shù)據(jù)的情況下將內(nèi)存中的數(shù)據(jù)通過(guò)操作系統(tǒng)的內(nèi)核發(fā)送給對(duì)方.這時(shí)的write返回false.