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 相关文章推荐
用CSS+JS实现的进度条效果效果
Jun 05 Javascript
jquery 常用操作方法
Jan 28 Javascript
复制Input内容的js代码_支持所有浏览器,修正了Firefox3.5以上的问题
Jun 21 Javascript
Jquery显示和隐藏元素或设为只读(含Ligerui的控件禁用,实例说明介绍)
Jul 09 Javascript
JavaScript解析URL参数示例代码
Aug 12 Javascript
Javascript模仿淘宝信用评价实例(附源码)
Nov 26 Javascript
jQuery Ajax 实例代码 ($.ajax、$.post、$.get)
Apr 29 Javascript
JavaScript &amp; jQuery完美判断图片是否加载完毕
Jan 08 Javascript
vue后台管理之动态加载路由的方法
Aug 13 Javascript
Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖
Nov 25 Javascript
layer页面跳转,获取html子节点元素的值方法
Sep 27 Javascript
解决vue props传Array/Object类型值,子组件报错的情况
Nov 07 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
ecshop 批量上传(加入自定义属性)
2012/03/20 PHP
PHP实现文件上传下载实例
2016/10/18 PHP
PHP 7安装调试工具Xdebug扩展的方法教程
2017/06/17 PHP
php面向对象程序设计中self与static的区别分析
2019/05/21 PHP
innerHTML,outerHTML,innerTEXT三者之间的区别
2007/01/28 Javascript
js no-repeat写法 背景不重复
2009/03/18 Javascript
js event事件的传递与冒泡处理
2009/12/06 Javascript
JavaScript Event事件学习第一章 Event介绍
2010/02/07 Javascript
javascript 运算数的求值顺序
2011/08/23 Javascript
js 调用本地exe的例子(支持IE内核的浏览器)
2012/12/26 Javascript
Jquery操作下拉框(DropDownList)实现取值赋值
2013/08/13 Javascript
jQuery.holdReady()使用方法
2014/05/20 Javascript
js实现索引图片切换效果
2015/11/21 Javascript
Javascript获取统一管理的提示语(message)
2016/02/03 Javascript
JavaScript调试之console.log调试的一个小技巧分享
2017/08/07 Javascript
Angularjs单选框相关的示例代码
2017/08/17 Javascript
JavaScript编写的网页小游戏,很给力
2017/08/18 Javascript
微信小程序实现授权登录
2019/05/15 Javascript
js使用cookie实现记住用户名功能示例
2019/06/13 Javascript
JS实现提示框跟随鼠标移动
2019/08/27 Javascript
js 解析 JSON 数据简单示例
2020/04/21 Javascript
[02:28]DOTA2亚洲邀请赛附加赛 RECAP赛事回顾
2015/01/29 DOTA
python操作日志的封装方法(两种方法)
2019/05/23 Python
python 如何将数据写入本地txt文本文件的实现方法
2019/09/11 Python
python图形开发GUI库pyqt5的基本使用方法详解
2020/02/14 Python
Python 基于jwt实现认证机制流程解析
2020/06/22 Python
python 偷懒技巧——使用 keyboard 录制键盘事件
2020/09/21 Python
mac系统下安装pycharm、永久激活、中文汉化详细教程
2020/11/24 Python
解析HTML5的存储功能和web SQL的相关操作方法
2016/02/19 HTML / CSS
C语言笔试题
2014/09/04 面试题
澳大利亚商务邀请函
2014/01/17 职场文书
社区学习党的群众路线教育实践活动心得体会
2014/11/03 职场文书
2015年基建工作总结范文
2015/05/23 职场文书
先进党支部事迹材料2016
2016/02/26 职场文书
SqlServer: 如何更改表的文件组?(进而改变存储位置)
2021/04/05 SQL Server
Java实现二维数组和稀疏数组之间的转换
2021/06/27 Java/Android