node.js+Ajax实现获取HTTP服务器返回数据
我们看一个HTML5页面中通过AJAX请求的方式获取HTTP服务器返回数据的代码示例.由于我们把服务器的端口指定为1337,并将从端口为80的网站中运行HTML5页面,因此这是一种跨域操作,需要在HTTP响应头部中添加Access_Control_Allow_Origin字段,并且将参数指定为允许向服务器请求数据额域名+端口号(省略端口号时允许该域名下的任何端口向服务器请求数据),
静态页面:index.html(注:一定要放在服务器环境下,如果是win7系统的话,可以开启IIS服务,并把页面考过去直接运行这个页面,)
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>node中的ajax请求(html5页面)</title>
<script type="text/javascript">
function 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.send(null);
}
</script>
</head>
<body>
<input type="button" value="获取数据" onclick="GetData()" />
<div id="res">dsdf</div>
</body>
</html>
node代码:
var http=require("http");
var server=http.createServer(function(req,res){
if(req.url!=="/favicon.ico"){
res.writeHead(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.这个时候我们队代码做一些修改:
node的 server.js代码:
var http=require("http");
var server=http.createServer(function(req,res){
if(req.url!=="/favicon.ico"){
res.writeHead(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("开始监听...");
});
修改了"Access-Control-Allow-Origin"的值.
重新运行demo会发现,达到同样的效果
也可以通过res.seetHeader来单独设置响应头部.
可以将上面的res.writeHead()改成res.setHeader();
var http=require("http");
var server=http.createServer(function(req,res){
if(req.url!=="/favicon.ico"){
//res.writeHead(200,{"Content-Type":"text/plain","Access-Control-Allow-Origin":"http://localhost:63342"});
res.setHeader("Content-Type","text/plain");
res.setHeader("Access-Control-Allow-Origin","http://localhost:63342");
res.write("你好啊!");
}
res.end();
});
server.listen(1337,"localhost",function(){
console.log("开始监听...");
});
细心的同学可能发现了,利用setHeader的方法时,缺少了一个状态码,比如200.那么我们在使用res.setHeader的时候,如何来设置状态码呢?等会上代码
ajax在服务器端返回的时候日期:
我们可以在服务器端返回时,删除这个字段.
设置res.sendData=false;
var http=require("http");
var server=http.createServer(function(req,res){
if(req.url!=="/favicon.ico"){
//res.writeHead(200,{"Content-Type":"text/plain","Access-Control-Allow-Origin":"http://localhost:63342"});
res.statusCode=200;
res.sendDate=false;
res.setHeader("Content-Type","text/plain");
res.setHeader("Access-Control-Allow-Origin","http://localhost:63342");
res.write("你好啊!");
}
res.end();
});
server.listen(1337,"localhost",function(){
console.log("开始监听...");
});
设置了状态码,也屏蔽了日期信息.
res.getHeader(name)获取我们设置的响应头信息
res.removeHeader(name);删除我们的头信息.必须在我们的write方法发送数据之情被调用.
res.headersSent属性是一个布尔值,当当响应头已发送时,属性值为true时;当响应头未发送时,属性值为false.
server.js代码:
var http=require("http");
var server=http.createServer(function(req,res){
if(req.url!=="/favicon.ico"){
if(res.headersSent)
console.log("响应头已发送");
else
console.log("响应头未发送");
res.writeHead(200,{"Content-Type":"text/plain","Access-Control-Allow-Origin":"http://localhost:63342"});
if(res.headersSent)
console.log("响应头已发送");
else
console.log("响应头未发送");
res.write("你好啊!");
}
res.end();
});
server.listen(1337,"localhost",function(){
console.log("开始监听...");
});
运行demo查看结果:
res.write()方法是向客户端发送数据的,其实他还有一个返回值.
当向客户端发送的数据量比较小时或网速较快时,node总是将数据直接发送到操作系统的内核缓存区中,然后从内核缓存区中取出数据发送给对方.这个时候write会返回true.
当网速慢或数据量较大时,http服务器并不一定会立刻把数据发送给客户端,node会把数据缓存在内存中,并在对方可以接受数据的情况下将内存中的数据通过操作系统的内核发送给对方.这时的write返回false.
可以设置test.txt的内容多少来测试结果.
一个简单的node+ajax效果就实现了.是不是很简单呢？当然，想制作更加复杂的功能的话，我们还需要进一步的学习，以后我们慢慢来更新。
相关推荐
-
javascript XMLHttpRequest对象全面剖析
一. 引言 异步JavaScript与XML(AJAX)是一个专用术语,用于实现在客户端脚本与服务器之间的数据交互过程.这一技术的优点在于,它向开发者提供了一种从Web服务器检索数据而不必把用户当前正在观察的页面回馈给服务器.与现代浏览器的通过存取浏览器DOM结构的编程代码(JavaScript)动态地改变被显示内容的支持相配合,AJAX让开发者在浏览器端更新被显示的HTML内容而不必刷新页面.换句话说,AJAX可以使基于浏览器的应用程序更具交互性而且更类似传统型桌面应用程序. Google的G
-
JavaScript如何获取到导航条中HTTP信息
本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下 1.style中带有注释的部分为获取HTTP中的信息 2.body中显示效果为: 1).打开页面是自动弹出输入提示框 2).点击删除时,会有警告框弹出 点击确定时,删除信息 点击取消时,不删除信息 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
-
NodeJS学习笔记之Http模块
一,开篇分析 首先"Http"这个概念大家应该比较熟悉了,它不是基于特定语言的,是一个通用的应用层协议,不同语言有不同的实现细节,但是万变不离其宗,思想是相同的, NodeJS作为一个宿主运行环境,以JavaScript为宿主语言,它也有自己实现的一套标准,这篇文章我们就一起来学习一下 "Http模块" .但是作为前提来说, 希望大家可以先阅读一下官网提供的api,有一个前置了解,这样就方便多了,以下是Http部分的api概览: 复制代码 代码如下: HTTP
-
简介AngularJS中$http服务的用法
我们可以使用内置的$http服务直接同外部进行通信.$http服务只是简单的封装了浏览器原生的XMLHttpRequest对象. 1.链式调用 $http服务是只能接受一个参数的函数,这个参数是一个对象,包含了用来生成HTTP请求的配置内容.这个函数返回一个promise对象,具有success和error两个方法. $http({ url:'data.json', method:'GET' }).success(function(data,header,config,status){ //响应
-
nodejs实现HTTPS发起POST请求
准备用nodejs搞一个快速注册163邮箱的东西,需要在某一步的时候post数据到https,node的官方文档实在太简陋了,网上找了个差不多的例子,拿来改了改用. var util = require('util'), https = require('https'); var regUrl = "https://ssl.mail.163.com/regall/unireg/call.do;jsessionid=%s?cmd=register.start&adapter=%s&
-
node.js中的http.request方法使用说明
方法说明: 函数的功能室作为客户端向HTTP服务器发起请求. 语法: 复制代码 代码如下: http.get(options, callback) 由于该方法属于http模块,使用前需要引入http模块(var http= require("http") ) 接收参数: option 数组对象,包含以下参数: host: 表示请求网站的域名或IP地址(请求的地址). 默认为'localhost'. hostname: 服务器名称,主机
-
node.js+Ajax实现获取HTTP服务器返回数据
我们看一个HTML5页面中通过AJAX请求的方式获取HTTP服务器返回数据的代码示例.由于我们把服务器的端口指定为1337,并将从端口为80的网站中运行HTML5页面,因此这是一种跨域操作,需要在HTTP响应头部中添加Access_Control_Allow_Origin字段,并且将参数指定为允许向服务器请求数据额域名+端口号(省略端口号时允许该域名下的任何端口向服务器请求数据), 静态页面:index.html(注:一定要放在服务器环境下,如果是win7系统的话,可以开启IIS服务,并把页面考
-
node.js使用http模块创建服务器和客户端完整示例
本文实例讲述了node.js使用http模块创建服务器和客户端.分享给大家供大家参考,具体如下: node.js中的 http 模块提供了创建服务器和客户端的方法,http 全称是超文本传输协议,基于 tcp 之上,属于应用层协议. 一.创建http服务器 const http = require('http'); //创建一个http服务器 let server = http.createServer(); //监听端口 server.listen(8888, '0.0.0.0'); //设置
-
node.js+postman实现模拟HTTP服务器与客户端交互
目录 一.node搭建HTTP服务器 二.HTTP服务器处理get请求 1.postman发送get请求 2.服务器解析 三.HTTP服务器处理post请求 1.postman发送post请求 2.服务器解析 当应用程序(客户端)需要某一个资源时,可以向一台服务器通过http请求获取到这个资源.提供资源的服务器就是web服务器(本文用node.js创建),用postman模拟客户端向服务器发送请求. 一.node搭建HTTP服务器 node中使用 http 模块来创建 HTTP 服务器, 每当接
-
js+ajax实现获取文件大小的方法
本文实例讲述了js+ajax实现获取文件大小的方法.分享给大家供大家参考,具体如下: 顾名思义,通过JS和Ajax来获取上传文件的大小,在上传之前可以有个判断,对上传的文件有所控制,因为js控制文件大小(JS获取文件大小)有些问题,具体大家试下就知道了,在此整理了一下ajax的获取文件大小的方法,比较好用,再调试过程中,出现了c:/fakepath/ 的错误,也将解决方案罗列在下面,以供大家参考 废话少说,代码如下 JS如下: <script language="Jscript"
-
node.js使用net模块创建服务器和客户端示例【基于TCP协议】
本文实例讲述了node.js使用net模块创建服务器和客户端.分享给大家供大家参考,具体如下: node.js中net模块创建服务器和客户端 1.node.js中net模块创建服务器(net.createServer) // 将net模块 引入进来 var net = require("net"); // 创建一个net.Server用来监听,当连接进来的时候,就会调用我们的函数 // client_sock,就是我们的与客户端通讯建立连接配对的socket // client_soc
-
Node.js path模块,获取文件后缀名操作
我就废话不多说了,大家还是直接看代码吧~ demo.js: //path模块 var path=require('path'); /*nodejs自带的模块*/ var extname=path.extname("123.html"); //获取文件的后缀名 console.log(extname); 补充知识:node 的path模块中 path.resolve()和path.join()的区别 一.path模块的引入. 直接引用.node中自带的模块 const path = re
-
详解Nodejs get获取远程服务器接口数据
本文实例为大家分享了Nodejs get获取远程服务器接口数据的具体代码,供大家参考,具体内容如下 1.GET模块:_get.js /** * Created by jinx on 7/7/17. */ var http = require('http'); module.exports = { /** * 测试获取所有的区域 * / locations: function (cb) { http.get('http://wx.xx.com/locations', function (res)
-
使用node.js中的Buffer类处理二进制数据的方法
前言 在Node.js中,定义了一个Buffer类,该类用来创建一个专门存放二进制数据的缓存区.这篇文章就详细介绍了node.js中的Buffer类处理二进制数据的方法,下面话不多说,来看看详细的介绍. 创建Buffer对象 第一种:直接使用一个数组来初始化缓存区 var arr = [0,1,2] var buf = new Buffer(arr) console.log(buf) 执行效果: 第二种:直接使用一个字符串来初始化缓存区 var str = 'hello' var buf = n
-
ajax动态获取数据库中的数据方法
今天看到有人在问答上问怎样去动态取值附在option上,本来想解决的,但我发现....没有,我本来也笨,记不住,所以还是写一下,让大家可以看一下: 首先我这用的框架是SSM,代码就开始了: 这是写在前台的方法里一个点击事件进入方法里我就不写那么麻烦了直接ajax部分代码: $.ajax({//这就开始进入ajax了 type:"get",//这个我也忘了,好像是类似格式吧,基本是死的不需要改动 dataType:"json",//这个是将字符串转换成json格式 c
-
Node.js下向MySQL数据库插入批量数据的方法
项目(nodejs)中需要一次性插入多笔数据到数据库,数据库是mysql的,由于循环插入的性能太差,就像使用批量插入的方法提高数据的插入性能. 批量插入的数据库的表结构如下: 1.数据库连接 var mysql = require('mysql'); // 数据库信息 var connection = mysql.createConnection({ host : 'localhost', user : '数据库用户名', password : '数据库登录密码', database : '操作