node测试源生ajax请求

最新推荐文章于 2022-04-20 17:16:26 发布
最新推荐文章于 2022-04-20 17:16:26 发布
阅读量95 收藏
点赞数
分类专栏： node javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yemuxia_sinian/article/details/98184326
版权

一、源生ajax GET请求

1、get请求代码：
 

function getXHR(){
	var xhr = null;

	if(window.XMLHttpRequest){
		xhr = new XMLHttpRequest;
	}else if(window.ActiveXObject){
		try{
			xhr = new ActiveXObject('Msxml2.XMLHTTP')
		}catch(e){
			try{
				xhr = new ActiveXObject('Microsoft.XMLHTTP')
			}catch(e){
				console.log('不支持ajax')
			}
		}
	}
	return xhr;
}

var xhr = getXHR();

xhr.open('get','http://localhost:8099/getTest?username=helen&age=29',true) //true代表异步操作

xhr.onreadystatechange = function(){
	if(xhr.readyState == 4){
		if(xhr.status == 200){
			var data = xhr.responseText;
			console.log(JSON.parse(data),)
		}
	}
}

xhr.onerror = function(err){
	console.log(err,'哦哦，出错啦啦啦啦了')
}

xhr.send()

node接口处理get请求
 

const express = require('express');
const app = express();
//const querystring = require('querystring');


//var bodyParser = require('body-parser');	//用来解析post请求发过来的参数
//app.use(bodyParser.json());
// 创建 application/x-www-form-urlencoded 编码解析
//app.use(bodyParser.urlencoded({ extended: false }));

app.use(express.static('./public'));//用来访问静态资源

app.all('*', function(req, res, next) {	//设置允许跨域访问
  res.header("Access-Control-Allow-Origin","*");
    //允许的header类型
    res.header("Access-Control-Allow-Headers","content-type");
    //跨域允许的请求方式 
    res.header("Access-Control-Allow-Methods","DELETE,PUT,POST,GET,OPTIONS"); 
    if (req.method.toLowerCase() == 'options')
        res.send(200);  //让options尝试请求快速结束
    else
        next();
})

app.get('/',function(req,res){
	res.send('Hello World!!!')
})

app.get('/getTest',function(req,res){	//测试自己写的源生ajax Get请求
		console.log(req.query,'请求参数') 
		res.send({
			msg: 'get请求成功，这个是返回给前端的结果!!',
			data: {
				text: '这是你传给我的数据，我原封不动还给你',
				query: req.query
			}
		})
})


var server = app.listen(8099,function(){
	var host = server.address().address;
	var port = server.address().port;
	console.log('应用实例，访问地址为http://%s:%s',host,port)
})

结果：

 

二、源生ajax POST请求

1.1、post请求代码（content-type：application/application/x-www-form-urlencoded，发送这个数据类型的话，node端可以通过body-parser模块来处理）：

function getXHR(){
	var xhr = null;

	if(window.XMLHttpRequest){
		xhr = new XMLHttpRequest;
	}else if(window.ActiveXObject){
		try{
			xhr = new ActiveXObject('Msxml2.XMLHTTP')
		}catch(e){
			try{
				xhr = new ActiveXObject('Microsoft.XMLHTTP')
			}catch(e){
				console.log('不支持ajax')
			}
		}
	}
	return xhr;
}

var xhr = getXHR();

xhr.open('post','http://localhost:8099/postTest',true) //true代表异步操作

xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')

xhr.onreadystatechange = function(){
	if(xhr.readyState == 4){
		if(xhr.status == 200){
			var data = xhr.responseText;
			console.log(JSON.parse(data),)
		}
	}
}

xhr.onerror = function(err){
	console.log(err,'哦哦，出错啦啦啦啦了')
}

xhr.send('username=jack&age=28')

node 处理post请求：

const express = require('express');
const app = express();
const querystring = require('querystring');

var bodyParser = require('body-parser');	//用来解析post请求发过来的参数,前端发送的数据格式必须是：application/x-www-form-urlencoded，表单格式
 //创建 application/x-www-form-urlencoded 编码解析
app.use(bodyParser.urlencoded({ extended: false }));

app.use(express.static('./public'));//用来访问静态资源

app.all('*', function(req, res, next) {	//设置允许跨域访问
  res.header("Access-Control-Allow-Origin","*");
    //允许的header类型
    res.header("Access-Control-Allow-Headers","content-type");
    //跨域允许的请求方式 
    res.header("Access-Control-Allow-Methods","DELETE,PUT,POST,GET,OPTIONS"); 
    if (req.method.toLowerCase() == 'options')
        res.send(200);  //让options尝试请求快速结束
    else
        next();
})

app.get('/',function(req,res){
	res.send('Hello World!!!')
})


app.post('/postTest',function(req,res){
	console.log(req.body,'post请求参数')	
	
	res.send({
		msg: 'post请求成功，这个是给你的回应礼!!',
		data: req.body
	})
})


var server = app.listen(8099,function(){
	var host = server.address().address;
	var port = server.address().port;
	console.log('应用实例，访问地址为http://%s:%s',host,port)
})

结果： 

1.2 post请求（content-type:application/json）
 

function getXHR(){
	var xhr = null;

	if(window.XMLHttpRequest){
		xhr = new XMLHttpRequest;
	}else if(window.ActiveXObject){
		try{
			xhr = new ActiveXObject('Msxml2.XMLHTTP')
		}catch(e){
			try{
				xhr = new ActiveXObject('Microsoft.XMLHTTP')
			}catch(e){
				console.log('不支持ajax')
			}
		}
	}
	return xhr;
}

var xhr = getXHR();

xhr.open('post','http://localhost:8099/postTest',true) //true代表异步操作

xhr.setRequestHeader('Content-Type','application/json')

xhr.onreadystatechange = function(){
	if(xhr.readyState == 4){
		if(xhr.status == 200){
			var data = xhr.responseText;
			console.log(JSON.parse(data),)
		}
	}
}

xhr.onerror = function(err){
	console.log(err,'哦哦，出错啦啦啦啦了')
}

var postdata = {
	username: 'jack',
	age:28,
	height: 172
}
xhr.send(JSON.stringify(postdata))

node 处理post请求：

const express = require('express');
const app = express();
const querystring = require('querystring');

var bodyParser = require('body-parser');	//用来解析post请求发过来的参数,前端发送的数据格式必须是：application/x-www-form-urlencoded，表单格式
 //创建 application/x-www-form-urlencoded 编码解析
app.use(bodyParser.urlencoded({ extended: false }));

app.use(express.static('./public'));//用来访问静态资源

app.all('*', function(req, res, next) {	//设置允许跨域访问
  res.header("Access-Control-Allow-Origin","*");
    //允许的header类型
    res.header("Access-Control-Allow-Headers","content-type");
    //跨域允许的请求方式 
    res.header("Access-Control-Allow-Methods","DELETE,PUT,POST,GET,OPTIONS"); 
    if (req.method.toLowerCase() == 'options')
        res.send(200);  //让options尝试请求快速结束
    else
        next();
})

app.get('/',function(req,res){
	res.send('Hello World!!!')
})


app.post('/postTest',function(req,res){
	var data = '';
	req.on('data', function (chunk) {
        // chunk 默认是一个二进制数据，和 data 拼接会自动 toString
        data += chunk;
    });

    // 3.当接收表单提交的数据完毕之后，就可以进一步处理了
    //注册end事件，所有数据接收完成会执行一次该方法
    req.on('end', function () {

        //（1）.对url进行解码（url会对中文进行编码）
        data = decodeURI(data);
        console.log(data,'----data');
				
		res.send({msg:'post请求处理成功！！',data: JSON.parse(data)})
       
    });
})


var server = app.listen(8099,function(){
	var host = server.address().address;
	var port = server.address().port;
	console.log('应用实例，访问地址为http://%s:%s',host,port)
})

结果：

Helen_fight
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
XMLHttpRequest源生请求接口类
07-21
由于之前写源生项目， 采用jQuery的 Ajax 请求后端接口，觉得在代码上不美观，还会出现大肠包小肠的情况。 所以我自己封装了一个请求接口的方法。使用的是 XMLHttpRequest 发送请求。 这个js 类我还添加了请求拦截，...
ajax理解及应用
a1870290027的博客
10-29 206
定义 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)，在客户端使用XMLHTTPRequest对象发异步请求与服务器进行交互。 Ajax的优势和作用 ajax的作用：在客户端使用XMLHTTPRequest对象发异步请求与服务器进行交互； ajax的优势：用户体验好，减轻服务端的压力； Ajax的请求方式如图 XMLHttpRequest 语法： let xhr =new XMLHttpRequest(); 描述：创.
nodejs express中设置请求头允许跨域，自定义了请求头，就会多发送一次options请求
艾小逗
12-02 6372
nodejs express中设置请求头允许跨域 设置请求头允许跨域请求 app.js 文件中添加 代码 var app = express(); app.all('*', function (req, res, next) { // 设置请求头为允许跨域 res.header('Access-Control-Allow-Origin', '*'); // 设置服务器支持的所有头信息...
express指定返回的拦截器处理
黄彪博客
07-15 5466
文章目录文章参考问题描述解决办法案例 文章参考 问题描述 在工作中需要使用token来验证用户登录是否有效，登录成功了才能访问特定的API，但是登录、注册的接口是不需要验证的，因此就需要针对某些特定的API做一个token验证，类似于java里面的AOP 解决办法 在指定范围URL前面添加了express(function(){})的函数，来处理token的验证 案例 const express ...
原生ajax POST请求
齐枫的博客
09-13 7373
话不多说，看代码 var data = {//这种格式是需要转成jsonstring的 action:action, diyid:diyid, do : _do, dede_fields:dede_fields,
原生ajax中post方式数据传递方式
colin_zff的博客
09-11 5634
1.post方法中，数据放在send（）方法中，作为参数传递 2.需要设置请求头，用来指明编码方式,发送的数据类型 3.post方式不会出现中文乱码和浏览器缓存问题 var ajax=null; try { ajax=new XMLHttpRequest() }catch(e) { ajax=new ActiveXObject("Microsoft.XMLHTTP") }
vue2实现数据请求显示loading图
08-28
主要为大家详细介绍了vue2实现数据请求显示loading图，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
原生js封装的ajax方法示例
12-10
众所周知，框架之间会有冲突，这是源生js就起到作用了，下面介绍一种源生js封装的ajax请求。 function ajax(options) { options = options || {}; options.type = (options.type || "GET").toUpperCase(); ...
源生SQL教程
07-23
源生SQL教程，包含基础语法、指令、SQL进阶、表哥处理。
javaScript_ajax
08-27
用javaScript实现ajax功能，实现异步交换数据
原生node知识总结
qinheJ的博客
04-27 298
文章目录一、nodejs安装1、普通方式安装2、使用nvm安装二、nodejs 和 javascript区别1、ECMAScript2、javascript3、nodejs三、npm1、npm引入依赖的版本四、yarnYarn和npm命令对比：五、commonjs1、单个导入导出：2、多个导入导出：3、另外一种导出4、引入的测试5、es6语法ecport和defaultexport default...
原生ajax传值
yasha的博客
10-15 6716
只有两种传值：GET 和 POST方式GET：xmlhttp.open("GET","target.php",true); xmlhttp.send(); //open里面函数值分别是“传值方式”、“目标网页”、“是否异步”，send中不用写任何东西POST：xmlhttp.open("POST","target.php",true); xmlhttp.setRequestHeader("Conte
Node原生服务器的搭建
NumbSilver的博客
04-20 289
配置环境： 连接Mongodb数据库 安装Node、npm/yarn 安装yarn : 在项目根目录的终端执行 // 把项目封装成包 yarn init yarn add mongoose 未安装yarn也可以直接用npm // 把项目封装成包 npm init npm i mongoose --save Node原生搭建服务器： 提示：express框架可以快速搭建，这里只是提供一个当大 //1.引入Node内置的http模块 let http = require('http') //引入
H5网页微信授权登录
热门推荐
yemuxia_sinian的博客
01-29 1万+
最近项目做了一个简单的H5在线点酒，用的vue-cli脚手架搭建，运行在微信环境，涉及到微信授权登录，jssdk的使用，微信支付等功能，现记录下一些流程，以便后续自己查阅。微信开发文档传送门 一、微信H5网页授权登录 授权登录流程微信开发文档已经写的很清楚了，如下： 1 第一步：用户同意授权，获取code 2 第二步：通过code换取网页授权access_token 3 第三步：刷新access_token（如果需要） 4 第四步：拉取用户信息(需scope为 snsapi_userinfo)
前端下载二进制流pdf文件，下载成功，打开空白问题解决
yemuxia_sinian的博客
10-20 9211
做pdf文件下载的时候，后端返回了二进制数据流，前端在发起请求时需要设置responseType: arraybuffer 或者blob类型才可以，具体操作可以看我之前的文章（传送门）。一开对接的时候下载打开都是正常的，过后突然就不行了，能下载成功，页数也是正常的，但是打开页面却都是空白的。 搜索百度了一番，都是说设置好response Type就可以了，偶然发现有人评论说不能用axios请求要用原生的Ajax请求才可以，试了一下果然成功了。 具体代码： downloadFn() { l
jsonp原理实现
yemuxia_sinian的博客
12-14 4707
前几天看了动脑老师老宋讲的jsonp原理，觉得很受用，现做下笔记。 什么是跨域： 跨域是浏览器同源策略而产生的，在不同协议，不同端口，不同域名下（以上任意一个不同都算是跨域）的两个服务之间是无法互相访问的。 举例： http://www.baidu.com/index.html 调用 http://www.baidu.com/server.php （非跨域） http
js 把含有转义符的字符串转成json格式
yemuxia_sinian的博客
09-26 2457
在项目中遇到一个问题：在前端需要把后台返回的json字符串转换成一个js中的json对象，可是从后台返回的字符串中含有转义字符：\"， 在网上查到方法如下，可以处理这种情况： var myjson= eval("("+data+")"); ...
前端下载二进制流文件
yemuxia_sinian的博客
05-18 2113
前端下载文件有两种方法，第一种：后台直接返回下载流格式的文件地址，前端用a标签新开窗口或者window.open()下载即可；另外一种：后台返回二进制流文件内容，前端通过blob进行转化后再下载。 具体代码： async downloadFn() { this.loading = true; let res = await defenseUserAgreementGet(this.userId); this.loading = false; cons..
正则提取文章里面的一级标题和对应的一级标题内容
yemuxia_sinian的博客
04-20 1245
最近公司项目有个需求，富文本编辑器上传一篇文章后，需要对文章内容里面的一级标题和对应的标题内容做提取处理，然后文章展示的时候就可以用来做锚链接导航处理。 此功能主要用到了以下正则 const reg = /<h1(([\s\S])*?)<\/h1>/g 改正则用来提取h1标题及其标签里面的内容，改下标签就可以用来提取任意标签内容了。 一、一级标签提取 具体代码： const article = '<div data-v-65f82510=""><div d
源生mysql封装工具类
最新发布
09-13
然而，这些工具类与源生的MySQL封装工具类并没有直接的关系。如果你需要使用源生的MySQL封装工具类，你可以使用JDBC来连接和操作MySQL数据库。在Java中，JDBC提供了一套API来与数据库进行交互，包括连接数据库、执行...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值