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


Posted in Javascript onNovember 26, 2014

我们看一个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

启动静态页面:

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

点击按钮"获取数据"

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

如果大家觉得需要配置服务器环境太麻烦,可以借用编辑器的优势来做.

比如我用的是webstrom 8.0;

当我启动页面的时候,浏览器中显示的是这个路径:

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

端口是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在服务器端返回的时候日期:

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

我们可以在服务器端返回时,删除这个字段.

设置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("开始监听...");

});

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

设置了状态码,也屏蔽了日期信息.

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查看结果:

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

res.write()方法是向客户端发送数据的,其实他还有一个返回值.

当向客户端发送的数据量比较小时或网速较快时,node总是将数据直接发送到操作系统的内核缓存区中,然后从内核缓存区中取出数据发送给对方.这个时候write会返回true.

当网速慢或数据量较大时,http服务器并不一定会立刻把数据发送给客户端,node会把数据缓存在内存中,并在对方可以接受数据的情况下将内存中的数据通过操作系统的内核发送给对方.这时的write返回false.

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

可以设置test.txt的内容多少来测试结果.

一个简单的node+ajax效果就实现了.是不是很简单呢?当然,想制作更加复杂的功能的话,我们还需要进一步的学习,以后我们慢慢来更新。

Javascript 相关文章推荐
动态表格Table类的实现
Aug 26 Javascript
jquery判断浏览器类型的代码
Nov 05 Javascript
JavaScript实现统计文本框Textarea字数增强用户体验
Dec 21 Javascript
让jQuery Mobile不显示讨厌loading界面的方法
Feb 19 Javascript
JavaScript实现弹出子窗口并传值给父窗口
Dec 18 Javascript
JavaScript获取短信验证码(周期性)
Dec 29 Javascript
node.js程序作为服务并在windows下开机自启动(用forever)
Mar 29 Javascript
vue.js 实现图片本地预览 裁剪 压缩 上传功能
Mar 01 Javascript
vue webpack实用技巧总结
Apr 24 Javascript
vue动态绑定组件子父组件多表单验证功能的实现代码
May 14 Javascript
Vue Echarts实现可视化世界地图代码实例
May 07 Javascript
JavaScript如何借用构造函数继承
Nov 06 Javascript
使用node.js 获取客户端信息代码分享
Nov 26 #Javascript
node+express+jade制作简单网站指南
Nov 26 #Javascript
JS简单操作select和dropdownlist实例
Nov 26 #Javascript
node+express+ejs制作简单页面上手指南
Nov 26 #Javascript
node.js使用require()函数加载模块
Nov 26 #Javascript
javascript中setTimeout和setInterval的unref()和ref()用法示例
Nov 26 #Javascript
浅谈jQuery中对象遍历.eq().first().last().slice()方法
Nov 26 #Javascript
You might like
php SQL防注入代码集合
2008/04/25 PHP
解析strtr函数的效率问题
2013/06/26 PHP
zf框架的zend_cache缓存使用方法(zend框架)
2014/03/14 PHP
PHP和Shell实现检查SAMBA与NFS Server是否存在
2015/01/07 PHP
phalcon model在插入或更新时会自动验证非空字段的解决办法
2016/12/29 PHP
PHP反射实际应用示例
2019/04/03 PHP
用jquery ajax获取网站Alexa排名的代码
2009/12/12 Javascript
菜鸟javascript基础资料整理3 正则
2010/12/06 Javascript
使用javascript实现json数据以csv格式下载
2015/01/09 Javascript
JS代码实现table数据分页效果
2016/05/26 Javascript
AngularJS+Bootstrap实现多文件上传与管理
2016/11/08 Javascript
微信小程序网络请求封装示例
2018/07/24 Javascript
详解Python中find()方法的使用
2015/05/18 Python
Python 遍历列表里面序号和值的方法(三种)
2017/02/17 Python
python记录程序运行时间的三种方法
2017/07/14 Python
CentOS7.3编译安装Python3.6.2的方法
2018/01/22 Python
Python网络爬虫神器PyQuery的基本使用教程
2018/02/03 Python
实例讲解python中的序列化知识点
2018/10/08 Python
详解利用django中间件django.middleware.csrf.CsrfViewMiddleware防止csrf攻击
2018/10/09 Python
浅析PyTorch中nn.Linear的使用
2019/08/18 Python
python 实现检验33品种数据是否是正态分布
2019/12/09 Python
利用PyQt中的QThread类实现多线程
2020/02/18 Python
python数字类型math库原理解析
2020/03/02 Python
学生如何注册Pycharm专业版以及pycharm的安装
2020/09/24 Python
美国生鲜及杂货电商:FreshDirect
2018/01/29 全球购物
PHP中如何创建和修改数组
2012/05/02 面试题
教师实习自我鉴定
2013/12/18 职场文书
中国文明网签名寄语
2014/01/18 职场文书
消防安全管理制度
2014/02/01 职场文书
体育课课后反思
2014/04/24 职场文书
个人向公司借款协议书
2014/10/09 职场文书
辞职书格式样本
2015/02/26 职场文书
奖学金个人总结
2015/03/04 职场文书
社会主义核心价值观主题教育活动总结
2015/05/07 职场文书
基于Redis位图实现用户签到功能
2021/05/08 Redis
解决redis批量删除key值的问题
2022/03/23 Redis