本以为用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服务端数据的例子的更多相关文章

  1. Node.js是一个事件驱动I/O服务端JavaScript环境

    Node.js是一个事件驱动I/O服务端JavaScript环境,基于Google的V8引擎.目的是为了提供撰写可扩充网络程序,如Web服务.第一个版本由Ryan Dahl于2009年发布,后来,Jo ...

  2. [SignalR]SignalR与WCF双工模式结合实现服务端数据直推浏览器端

    原文:[SignalR]SignalR与WCF双工模式结合实现服务端数据直推浏览器端 之前开发基于WinForm监控的软件,服务端基于Wcf实现,里面涉及双工模式,在客户端里面,采用心跳包机制保持与服 ...

  3. 网站的优化----首页优化---app调取服务端数据

    高并发经常会发生在有大活跃用户量来访问网站的某个点,例如用户高聚集的业务场景中,如:抢购,促销等.为了让用户流畅的访问网站,来根据自己的业务设计适合系统的处理方案. //对于APP网站首页数据,通常是 ...

  4. android菜鸟学习笔记24----与服务器端交互(一)使用HttpURLConnection和HttpClient请求服务端数据

    主要是基于HTTP协议与服务端进行交互. 涉及到的类和接口有:URL.HttpURLConnection.HttpClient等 URL: 使用一个String类型的url构造一个URL对象,如: U ...

  5. python的flex服务端数据接口开发

    python的flex服务端数据接口开发 python 如果给flex提供服务端,需要提供一个网关和一个可供客户端(flex)调用的类.这方面我更加推荐用twisted来写这个网关,因为twisted ...

  6. 前端使用node.js+express+mockjs+mysql实现简单服务端，2种方式模拟数据返回

    今天,我教大家来搭建一个简单服务端 参考文章: https://www.jianshu.com/p/cb89d9ac635e https://www.cnblogs.com/jj-notes/p/66 ...

  7. Node.js 使用jQuery取得Nodejs http服务端返回的JSON数组示例

    server.js代码: // 内置http模块,提供了http服务器和客户端功能(path模块也是内置模块,而mime是附加模块) var http=require("http" ...

  8. Node.js 使用jQuery取得Nodejs http服务端返回的JSON对象示例

    server.js代码: // 内置http模块,提供了http服务器和客户端功能(path模块也是内置模块,而mime是附加模块) var http=require("http" ...

  9. Node.js：上传文件，服务端如何获取文件上传进度

    内容概述 multer是常用的Express文件上传中间件.服务端如何获取文件上传的进度,是使用的过程中,很常见的一个问题.在SF上也有同学问了类似问题<nodejs multer有没有查看文件 ...

随机推荐

  1. angular组件--tips提示功能

    将组件封装起来在项目中开发很实用,之前遭遇过一次痛苦的经历,那阵子改的要吐血了.常用的组件封装起来,改公共的地方,往往多处受用. 例如:我在项目中引用  tips.text('加载中...',fals ...

  2. Android消息推送解决方案

    前言 消息推送在Android开发中应用的场景是越来越多了,比如说电商产品进行活动宣传.资讯类产品进行新闻推送等等,如下图: 推送消息截图 本文将介绍Android中实现消息推送的7种主流解决方案 目 ...

  3. Git 新项目关联到远程仓库

    最近前端学到小有成果,准备写一个新项目放在githup,结果没有提前在仓库创建项目,现在我把写好的项目推送到远程gitHup 1.先初始化本地仓库 Git init : 这样在项目里面都创建了一个隐藏 ...

  4. 解方程（NOIP2014）Warning!（前方高能！！）

    原题传送门 一看这不是水题嘛. 枚举+乱搞..特别容易.... 然后a[i]取值范围出现了 当当当当~:|a[i]|<=10^10000!!!!! 我去,这是什么鬼.. 高精度? 然后默默算了算 ...

  5. 货车运输（LCA+最大生成树）

    神奇传送门 恩,这是一道神奇的LCA+难度的题目. 题目是这样的: A 国有n座城市,编号从1到n,城市之间有 m条双向道路.每一条道路对车辆都有重量限制,简称限重.现在有 q辆货车在运输货物,司机们 ...

  6. wxpython demo

    #!/usr/bin/python # encoding: utf-8 '''Spare.py is a starting point for a wxPython program.''' impor ...

  7. Linux 设备驱动--- Poll 方法 --- Select【转】

    转自:http://blog.csdn.net/yikai2009/article/details/8653842 版权声明:本文为博主原创文章,未经博主允许不得转载.   目录(?)[-] Sele ...

  8. Vim文字编辑

    首先说明发现的vim编辑器的一个特点:vim编辑只有按[ENTER]键或命令模式下[o]才会换行,否则虽然在vim编辑器里显示的内容换行了,但事实上没有换行.如果你发现自己测试的效果和下面描述的不符, ...

  9. Codeforces 935E Fafa and Ancient Mathematics（表达式转树 + 树型DP）

    题目链接  Codeforces Round #465 (Div. 2) Problem E 题意  给定一个表达式,然后用$P$个加号和$M$个减号填充所有的问号(保证问号个数等于$P + M$) ...

  10. HDU 6395 2018 Multi-University Training Contest 7 (快速幂+分块)

    原题地址 Sequence Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 262144/262144 K (Java/Others)T ...