首页 技术 正文
技术 2022年11月14日
0 收藏 781 点赞 4,953 浏览 2013 个字

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

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,085
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,560
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,409
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,182
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,819
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,902