宝哥软件园

node.js Ajax实现获取超文本传送协议服务器返回数据

编辑:宝哥软件园 来源:互联网 时间:2021-09-09

我们看一个HTML5页面中通过创建交互式、快速动态网页应用的网页开发技术请求的方式获取超文本传送协议服务器返回数据的代码示例。由于我们把服务器的端口指定为1337,并将从端口为80的网站中运行HTML5页面,因此这是一种跨域操作,需要在超文本传送协议响应头部中添加访问控制允许来源字段,并且将参数指定为允许向服务器请求数据额域名端口号(省略端口号时允许该域名下的任何端口向服务器请求数据),

静态页面:index.html(注:一定要放在服务器环境下,如果是win7系统的话,可以开启(同移民检查员移民检查)服务,并把页面考过去直接运行这个页面,)

复制代码代码如下:DOCTYPE html html head lang=' en ' meta charset=' UTF-8 '标题节点中的创建交互式、快速动态网页应用的网页开发技术请求(html5页面)/标题脚本类型='text/javascript '函数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。发送(null);}/script/head dyinput type=' button ' value='获取数据onclick=' GetDATa()'/div id=' RES ' dsdf/div/body/html

结节代码:

复制代码代码如下: var http=require(' http ');var服务器=http。CreateServer(函数(req,res){ if(req.url!=='/fav图标。ico '){ RES . write head(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

启动静态页面:

点击按钮'获取数据'

如果大家觉得需要配置服务器环境太麻烦,可以借用编辑器的优势来做。

比如我用的是webstrom 8.0

当我启动页面的时候,浏览器中显示的是这个路径:

端口是63342.这个时候我们队代码做一些修改:

结节的server.js代码:

复制代码代码如下: var http=require(' http ');var服务器=http。CreateServer(函数(req,res){ if(req.url!=='/fav图标。ico '){ RES . write head(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('开始监听.');});

修改了'访问控制-允许-来源'的值。

重新运行演示会发现,达到同样的效果

也可以通过res.seetHeader来单独设置响应头部。

可以将上面的res.writeHead()改成RES . SetHeader();

复制代码代码如下: var http=require(' http ');var服务器=http。CreateServer(函数(req,res){ if(req.url!=='/fav图标。ico '){//RES .写头(200,{ ' Content-Type ' : ' text/plain ',' Access-Control-Allow-Origin ' : ' http://localhost :63342 ' });res.setHeader('内容类型','文本/纯文本');res.setHeader('访问控制-允许-源,' http://localhost :63342 ');res.write('你好啊!');} RES . end();});server.listen(1337,' localhost ',function(){ console.log('开始监听.');});

细心的同学可能发现了,利用setHeader的方法时,缺少了一个状态码,比如200.那么我们在使用res.setHeader的时候,如何来设置状态码呢?等会上代码

创建交互式、快速动态网页应用的网页开发技术在服务器端返回的时候日期:

我们可以在服务器端返回时,删除这个字段。

设置res.sendData=false

复制代码代码如下: var http=require(' http ');var服务器=http。CreateServer(函数(req,res){ if(req.url!=='/fav图标。ico '){//RES .写头(200,{ ' Content-Type ' : ' text/plain ',' Access-Control-Allow-Origin ' : ' http://localhost :63342 ' });RES . status code=200 RES . SendDate=false RES . SetHeader('内容类型','文本/纯文本');res.setHeader('访问控制-允许-源,' http://localhost :63342 ');res.write('你好啊!');} RES . end();});server.listen(1337,' localhost ',function(){ console.log('开始监听.');});

设置状态代码并屏蔽日期信息。

Res.getHeader(名称)获取我们设置的响应头信息

res.removeHeader(名称);删除我们的标题信息。当我们的write方法发送数据时,必须调用它。

Res.headersSent属性是一个布尔值。发送响应头后,属性值为真;当没有发送响应头时,属性值为假。

Server.js代码:

复制代码如下: var http=require(' http ');var server=http . CreateServer(function(req,res){ if(req.url!=='/fav icon . ico '){ if(RES . header send)console . log(' response header send ');Else console.log('未发送响应头');res.writeHead(200,{ ' Content-Type ' : ' text/plain ',' Access-Control-Allow-Origin ' : ' http://localhost :63342 ' });if(RES . header sent)console . log('发送的响应头');Else console.log('未发送响应头');写下('你好!');} RES . end();});Server.listen (1337,' localhost ',function () {console.log('开始侦听. '));});

运行演示查看结果:

res.write()方法向客户端发送数据,但它实际上有一个返回值。

当发送给客户端的数据量较少或网速较快时,节点总是将数据直接发送到操作系统的内核缓冲区,然后从内核缓冲区取出数据发送给对方。这时候,写出来就会还真。

当网速较慢或数据量较大时,http服务器不一定会立即将数据发送给客户端,而是节点将数据缓存在内存中,如果对方能够接受数据,则通过操作系统内核将内存中的数据发送给对方。此时写入返回false。

您可以设置test.txt的内容来测试结果。

实现了简单的节点ajax效果。很简单吗?当然,如果我们想做出更复杂的函数,还需要进一步学习,以后会慢慢更新。

更多资讯
游戏推荐
更多+