node.js+Ajax实现获取HTTP服务器返回数据

 更新时间:2014年11月26日 12:07:29   投稿:hebedich   我要评论
这篇文章主要介绍了node.js+Ajax实现获取HTTP服务器返回数据,讲解的十分详细,也给出了很多的实例,是篇非常不错的文章,这里推荐给大家。

我们看一个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!=="http://www.jb51.net/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!=="http://www.jb51.net/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!=="http://www.jb51.net/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!=="http://www.jb51.net/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!=="http://www.jb51.net/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效果就实现了.是不是很简单呢?当然,想制作更加复杂的功能的话,我们还需要进一步的学习,以后我们慢慢来更新。

相关文章

  • 详解node Async/Await 更好的异步编程解决方案

    详解node Async/Await 更好的异步编程解决方案

    这篇文章主要介绍了详解Async/Await 更好的异步编程解决方案,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • Nodejs从有门道无门菜鸟起飞必看教程

    Nodejs从有门道无门菜鸟起飞必看教程

    下面小编就为大家带来一篇Nodejs从有门道无门菜鸟起飞必看教程。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • 详解nodejs 文本操作模块-fs模块(五)

    详解nodejs 文本操作模块-fs模块(五)

    本篇文章主要介绍了nodejs 文本操作模块-fs模块(五),这里再说最后一个我看来很重要的方法,监听文件或者目录的的方法watchFile。有兴趣的可以了解一下。
    2016-12-12
  • Node.js环境下JavaScript实现单链表与双链表结构

    Node.js环境下JavaScript实现单链表与双链表结构

    Node环境下通过npm可以获取list的几个相关库,但是我们这里注重于自己动手实现,接下来就一起来看一下Node.js环境下JavaScript实现单链表与双链表结构
    2016-06-06
  • 详解Node.js读写中文内容文件操作

    详解Node.js读写中文内容文件操作

    在本篇文章中我们给大家分享了关于Node.js读写中文内容文件操作的相关知识点内容,有需要的朋友们可以学习下。
    2018-10-10
  • mongodb初始化并使用node.js实现mongodb操作封装方法

    mongodb初始化并使用node.js实现mongodb操作封装方法

    这篇文章主要介绍了mongodb初始化并使用node.js实现mongodb操作封装方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • 浅谈Nodejs中的作用域问题

    浅谈Nodejs中的作用域问题

    在JS中有全局作用域和函数作用域,而在Nodejs中也自己的作用域,分为全局作用域(global)和模块作用域。本文将对Nodejs中的作用域进行介绍,需要的朋友一起来看下吧
    2016-12-12
  • node.js中的events.EventEmitter.listenerCount方法使用说明

    node.js中的events.EventEmitter.listenerCount方法使用说明

    这篇文章主要介绍了node.js中的events.EventEmitter.listenerCount方法使用说明,本文介绍了events.EventEmitter.listenerCount的方法说明、语法、使用实例和实现源码,需要的朋友可以参考下
    2014-12-12
  • node.js实现的装饰者模式示例

    node.js实现的装饰者模式示例

    这篇文章主要介绍了node.js实现的装饰者模式,简单说明了装饰者模式的原理、功能并结合实例形式给出了node.js装饰者模式的实现方法,需要的朋友可以参考下
    2017-09-09
  • node.js 使用ejs模板引擎时后缀换成.html

    node.js 使用ejs模板引擎时后缀换成.html

    本文给大家分享一个nodejs的小技巧,将ejs模板引擎的模板后缀改成.html的使用方法,非常的简单实用,这里推荐给大家。
    2015-04-04

最新评论