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 查到的,在此向作者表示感谢。

 









本文转自张昺华-sky博客园博客,原文链接:http://www.cnblogs.com/xiandedanteng/p/7526966.html,如需转载请自行联系原作者


相关文章
|
1月前
|
Web App开发 JavaScript 前端开发
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念,包括事件驱动、单线程模型和模块系统;探讨其安装配置、核心模块使用、实战应用如搭建 Web 服务器、文件操作及实时通信;分析项目结构与开发流程,讨论其优势与挑战,并通过案例展示 Node.js 在实际项目中的应用,旨在帮助开发者更好地掌握这一强大工具。
46 1
|
23天前
|
存储 JavaScript NoSQL
Node.js新作《循序渐进Node.js企业级开发实践》简介
《循序渐进Node.js企业级开发实践》由清华大学出版社出版,基于Node.js 22.3.0编写,包含26个实战案例和43个上机练习,旨在帮助读者从基础到进阶全面掌握Node.js技术,适用于初学者、进阶开发者及全栈工程师。
48 9
|
1月前
|
JavaScript 前端开发 中间件
JS服务端技术—Node.js知识点
本文介绍了Node.js中的几个重要模块,包括NPM、Buffer、fs模块、path模块、express模块、http模块以及mysql模块。每部分不仅提供了基础概念,还推荐了相关博文供深入学习。特别强调了express模块的使用,包括响应相关函数、中间件、Router和请求体数据解析等内容。文章还讨论了静态资源无法访问的问题及其解决方案,并总结了一些通用设置。适合Node.js初学者参考学习。
45 1
|
1月前
|
开发框架 JavaScript 前端开发
Node.js日记:客户端和服务端介绍、Node.js介绍
Node.js日记:客户端和服务端介绍、Node.js介绍
|
1月前
|
数据采集 存储 JavaScript
如何使用Puppeteer和Node.js爬取大学招生数据:入门指南
本文介绍了如何使用Puppeteer和Node.js爬取大学招生数据,并通过代理IP提升爬取的稳定性和效率。Puppeteer作为一个强大的Node.js库,能够模拟真实浏览器访问,支持JavaScript渲染,适合复杂的爬取任务。文章详细讲解了安装Puppeteer、配置代理IP、实现爬虫代码的步骤,并提供了代码示例。此外,还给出了注意事项和优化建议,帮助读者高效地抓取和分析招生数据。
如何使用Puppeteer和Node.js爬取大学招生数据:入门指南
|
JavaScript 数据可视化 前端开发
《JavaScript数据可视化编程》——导读
在我们的日常生活中,数据的重要性与日俱增。尤其对于一些庞大的组织机构(诸如Facebook和Google这种体量的公司)来说,数据几乎是一切决策的核心。在地缘政治领域,正在前所未有地收集数据,以致爆出诸如美国国家安全局监控丑闻这样的事件,这从另一个侧面反映了我们正在经历一个宏观数据时代。
2836 0
|
JavaScript 前端开发 数据可视化