Node.js 本地Xhr取得Node.js服务端数据的例子
本以为用XHR取Nodejs http出的一段文字很简单，因为xhr取值和nodejs http出文字都是好弄的，谁知一试不是这回事，中间有个关键步骤需要实现。
nodejs http出文字显示在浏览器很容易，但是头信息是不完整的，下面resp.writeHead一句的红字部分就是这个关键步骤。
服务器端程序：
// 内置http模块，提供了http服务器和客户端功能（path模块也是内置模块，而mime是附加模块）
var http=require("http");
// 创建服务器,创建HTTP服务器要调用http.createServer()函数，它只有一个参数，是个回调函数，服务器每次收到http请求后都会调用这个回调函数。服务器每收到一条http请求，都会用新的request和response对象触发请求函数。
var server=http.createServer(function(req,resp){
console.log("请求地址是:"+req.url);
// 这样设置才可以解决跨域的请求,客户端那边才不会被拒绝
resp.writeHead(200,{"Content-Type":"text/plain;charset='utf-8'",'Access-Control-Allow-Origin':'*','Access-Control-Allow-Methods':'PUT,POST,GET,DELETE,OPTIONS'});
resp.write("数据出来");
resp.end();// response对象结束响应
return;
});
// 服务器开始运作监听端口
server.listen(3000,"localhost",function(){
console.log("服务器开始运作，监听端口3000中...");
});
客户端取值就相对简单了，如果上面红字部分没有的话，if(xhr.status>=200 && xhr.status<300) 这个判断是进不去的，因为xhr.status中总等于零：
<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
<title>取得Node.js提供的数据</title>
</head>
<body onload="run()">
<h1>取得Node.js提供的数据</h1>
<div id="msgDiv"></div>
</body>
</html>
<script type="text/javascript">
<!--
function run(){
getNodejsServerData();
}
function getNodejsServerData(){
var xhr=new XMLHttpRequest();
xhr.open("GET","http://localhost:3000",true);
xhr.onreadystatechange=function(){
console.log("xhr.readyState="+xhr.readyState);
if(xhr.readyState==4){
console.log("xhr.status="+xhr.status);
if(xhr.status>=200 && xhr.status<300){
document.getElementById("msgDiv").innerHTML=xhr.responseText;
}
}
}
xhr.send('');
}
//-->
</script>
没有红字部分或是只有部分，下面两个错误会出现：
XMLHttpRequest cannot load http://localhost:3000/list. The 'Access-Control-Allow-Origin' header has a value 'http://localhost:3000/list' that is not equal to the supplied origin. Origin 'null' is therefore not allowed access. GET http://localhost:3000/ net::ERR_CONNECTION_REFUSED
resp.writeHead(200,{"Content-Type":"text/plain;charset='utf-8'",'Access-Control-Allow-Origin':'*','Access-Control-Allow-Methods':'PUT,POST,GET,DELETE,OPTIONS'});
这个细节是从 http://www.jb51.net/article/96747.htm 查到的，在此向作者表示感谢。
Node.js 本地Xhr取得Node.js服务端数据的例子的更多相关文章
- Node.js是一个事件驱动I/O服务端JavaScript环境
Node.js是一个事件驱动I/O服务端JavaScript环境,基于Google的V8引擎.目的是为了提供撰写可扩充网络程序,如Web服务.第一个版本由Ryan Dahl于2009年发布,后来,Jo ...
- [SignalR]SignalR与WCF双工模式结合实现服务端数据直推浏览器端
原文:[SignalR]SignalR与WCF双工模式结合实现服务端数据直推浏览器端 之前开发基于WinForm监控的软件,服务端基于Wcf实现,里面涉及双工模式,在客户端里面,采用心跳包机制保持与服 ...
- 网站的优化----首页优化---app调取服务端数据
高并发经常会发生在有大活跃用户量来访问网站的某个点,例如用户高聚集的业务场景中,如:抢购,促销等.为了让用户流畅的访问网站,来根据自己的业务设计适合系统的处理方案. //对于APP网站首页数据,通常是 ...
- android菜鸟学习笔记24----与服务器端交互(一)使用HttpURLConnection和HttpClient请求服务端数据
主要是基于HTTP协议与服务端进行交互. 涉及到的类和接口有:URL.HttpURLConnection.HttpClient等 URL: 使用一个String类型的url构造一个URL对象,如: U ...
- python的flex服务端数据接口开发
python的flex服务端数据接口开发 python 如果给flex提供服务端,需要提供一个网关和一个可供客户端(flex)调用的类.这方面我更加推荐用twisted来写这个网关,因为twisted ...
- 前端使用node.js+express+mockjs+mysql实现简单服务端，2种方式模拟数据返回
今天,我教大家来搭建一个简单服务端 参考文章: https://www.jianshu.com/p/cb89d9ac635e https://www.cnblogs.com/jj-notes/p/66 ...
- Node.js 使用jQuery取得Nodejs http服务端返回的JSON数组示例
server.js代码: // 内置http模块,提供了http服务器和客户端功能(path模块也是内置模块,而mime是附加模块) var http=require("http" ...
- Node.js 使用jQuery取得Nodejs http服务端返回的JSON对象示例
server.js代码: // 内置http模块,提供了http服务器和客户端功能(path模块也是内置模块,而mime是附加模块) var http=require("http" ...
- Node.js：上传文件，服务端如何获取文件上传进度
内容概述 multer是常用的Express文件上传中间件.服务端如何获取文件上传的进度,是使用的过程中,很常见的一个问题.在SF上也有同学问了类似问题<nodejs multer有没有查看文件 ...
随机推荐
- Oracle SQL 疑难解析读书笔记（一 基础）
1.在语句中找到和消除空值 select first_name,last_name from hr.employees where commission_pct is null is null 和 i ...
- 50 days before NOI2017
2017.5.31 今天开了这个博客,打算每天来写点东西,嗯...毕竟要NOI了嘛... 第一天跑到常州里集训,打开题目一看湖南集训题... T1刷一下写完,然后交了然后发现错了...赶紧改过来,大概 ...
- Spring Cloud配置文件加载优先级简述
Spring Cloud中配置文件的加载机制与其它的Spring Boot应用存在不一样的地方:如它引入了bootstrap.properties的配置文件,同时也支持从配置中心中加载配置文件等:本文 ...
- 百度之星复赛T5&&hdu6148
Problem Description 众所周知,度度熊非常喜欢数字. 它最近发明了一种新的数字:Valley Number,像山谷一样的数字. 当一个数字,从左到右依次看过去数字没有出现先递增接着递 ...
- 战斗机的祈雨仪式（NOIP模拟赛Round 7）
[问题描述] 炎炎夏日,如果没有一场大雨怎么才能尽兴?秋之国的人民准备了一场祈雨仪式.战斗机由于拥有操纵雷电的能力,所以也加入了其中,为此,她进行了一番准备. 战斗机需要给自己的Spear of Lo ...
- 谈谈dpdk应用层包处理程序的多进程和多线程模型选择时的若干考虑
看到知乎上有个关于linux多进程.多线程的讨论:http://www.zhihu.com/question/19903801/answer/14842584 自己项目里也对这个问题有过很多探讨和测试 ...
- 【Android开发日记】之入门篇（一）——开发环境的搭建
写给自己的话:至此,大学的时光已经剩下一年的时光,下一年等毕业设计结束后就算是正式地踏入社会.自己学android也不过几个月的时间,为了更好管理文档,写点东西记录下自己曾经做过的点点滴滴是一个不错的 ...
- 关于js拖拽功能，拖拽元素的position:fixed;left:0;right:0;样式引起左右拖动元素会出现落后鼠标移动距离的问题
被拖拽元素的样式如果为:position:fixed;left:0;right:0;(当时是为了让fixed定位的元素水平居中加的left:0;right:0;避免js动态计算定位的麻烦)时左右拖动会 ...
- windows下phpstorm的常用快捷键及使用技巧
1.pubf+回车 声明一个方法 2./ ** 回车 生成注释 3.Ctrl +g 跳转行 4.Ctrl + Alt + L 代码格式化 5.Ctrl +D 复制当前行到下一行 6.Ctrl ...
- js-限制参与活动的范围（微信H5活动）
近期接到大连某个项目,一个H5的活动,其中有一个需求就是:这个活动的参与者仅限大连地区的用户 所以参考了微信API 得出的操作结果为: wx.ready(function() { wx.getLoca ...