express是基于nodejs的框架,当然,express也封装了对各种请求处理的方法,下面介绍一下get、post、ajax、jsonp请求的处理方法
1、处理get请求
//1.引入express框架
const express=require('express');
//2.创建服务器
const serve=express();
//3.监听端口
serve.listen(5555,'localhost',function(){
console.log('正在监听端口5555.....')
})
//4.1.资源托管
serve.use(express.static('./public'))
//5.处理接口的响应
//5.1处理get请求
serve.get('/get',function(req,res){
//req.query代表拿到的get请求携带的参数
console.log('处理了get接口',req.query);
//res.end()=res.write()+res.end()
res.send('已经处理好了get请求');
})
2、处理post请求
//1.引入express框架
const express=require('express');
//5.2引入中间件
const bodyParser=require('body-parser')
//2.创建服务器
const serve=express();
//3.监听端口
serve.listen(5555,'localhost',function(){
console.log('正在监听端口5555.....')
})
//4.1.资源托管
serve.use(express.static('./public'))
//4.2 使用中间件
serve.use(bodyParser())
//5.2处理post请求
serve.post('/post',function(req,res){
//此时会发现拿不到post请求的参数
// console.log("处理了post请求....",req.body)
//需要引入中间件body-parser
//引入并使用后再次打印post请求的数据
console.log(req.method,req.body)
res.send('已经处理好了post请求')
})
3、处理动态请求
//1.引入express框架
const express=require('express');
//2.创建服务器
const serve=express();
//3.监听端口
serve.listen(5555,'localhost',function(){
console.log('正在监听端口5555.....')
})
//4.资源托管
serve.use(express.static('./public'))
//5.3 处理动态接口,处理所有id不同的接口,形如http://localhost:5555/all/id=3 http://localhost:5555/all/id=4
serve.get('/all/:id',function(req,res){
console.log('处理动态接口...',req.params.id)
res.end()
})
4、处理ajax请求
首先准备一个html文件发送一个ajax请求
(1)自己封装的发送ajax请求的函数
//url,data,type,timeout,success,error
function ajax(options){
//-1 整理options
options=options||{};
options.data=options.data||{};
options.timeout=options.timeout||0;
options.type=options.type||'get';
//0 整理data
var arr=[];
for(var key in options.data){
arr.push(key+'='+encodeURIComponent(options.data[key]));
}
var str=arr.join('&');
//1 创建ajax对象
if(window.XMLHttpRequest){
var oAjax=new XMLHttpRequest();//[object XMLHttpRequest]
}else{
var oAjax=new ActiveXObject('Microsoft.XMLHTTP')
}
if(options.type=='get'){
//2.
oAjax.open('get',options.url+'?'+str,true);
//3.
oAjax.send();
}else{
//2.
oAjax.open('post',options.url,true);
//设置请求头
oAjax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
oAjax.send(str);//身子
}
//3.5 超时
if(options.timeout){
var timer=setTimeout(function(){
alert('超时了');
oAjax.abort();//中断ajax请求
},options.timeout);
}
//4.
oAjax.onreadystatechange=function(){//当准备状态改变时
if(oAjax.readyState==4){//成功失败都会有4
clearTimeout(timer);
if(oAjax.status>=200 && oAjax.status<300 || oAjax.status==304){
options.success && options.success(oAjax.responseText);
}else{
options.error && options.error(oAjax.status);//http 0
}
}
};
};
(2)新建一个发送ajax请求的html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 引入封装的ajax请求 -->
<script src="public/js/ajax.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
window.onload=function(){
// 1.发送一个ajax请求
ajax({
url:"http://localhost:5555/ajax",
data:{a:1,b:2,c:3},
success:data=>{
console.log("获取到的ajax请求返回的数据",data)
}
})
}
</script>
</body>
</html>
(3)新建处理ajax请求的js文件
//1.引入express框架
const express=require('express');
//5.1引入中间件
const bodyParser=require('body-parser')
//2.创建服务器
const serve=express();
//3.监听端口
serve.listen(5555,'localhost',function(){
console.log('正在监听端口5555.....')
})
//4.1.资源托管
serve.use(express.static('./public'))
//4.2 使用中间件
serve.use(bodyParser())
//5.处理接口的响应
//5.1 处理ajax请求
serve.get("/ajax",(req,res)=>{
console.log("ajax请求的响应",req.query,req.body)
res.send('获取到了ajax请求的携带来的数据了')
})
5、处理jsonp请求
(1)封装一个jsonp请求的函数
//options url,data,timeout,success,error
function jsonp(options){
options = options || {};
if(!options.url){
return;
}
options.data = options.data || {};
options.cbName = options.cbName || "callback";
options.timeout = options.timeout || 0;
var fnName = "jsonp_"+ Math.random();
fnName = fnName.replace("." ,"");
options.data[options.cbName] = fnName;
var arr = [];
for(var i in options.data){
arr.push(i + "=" + encodeURIComponent(options.data[i]));
}
var str = arr.join("&");
window[fnName] = function (json){
options.success && options.success(json);
clearTimeout(timer);
oHead.removeChild(oS);
window[fnName] = null;
}
var oS = document.createElement("script");
oS.src = options.url + "?" + str;
var oHead = document.getElementsByTagName("head")[0];
oHead.appendChild(oS);
if(options.timeout){
var timer = setTimeout(function(){
options.error && options.error();
//window[fnName] = null;
window[fnName] = function(){};
},options.timeout);
}
}
(2)新建一个发送jsonp的HTML文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 引入封装jsonp请求的函数 -->
<script src="public/js/jsonp.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
window.onload=function(){
//.发送一个jsonp请求
jsonp({
url:"http://localhost:5555/jsonp",
data:{a:200,b:300},
success:(data)=>{
console.log("获取了后端传送回来的数据",data)
}
})
}
</script>
</body>
</html>
(3)新建处理jsonp请求的js文件
//1.引入express框架
const express=require('express');
//5.1引入中间件
const bodyParser=require('body-parser')
//2.创建服务器
const serve=express();
//3.监听端口
serve.listen(5555,'localhost',function(){
console.log('正在监听端口5555.....')
})
//4.资源托管
serve.use(express.static('./public'))
//5. 处理jsonp请求
serve.get("/jsonp",(req,res)=>{
console.log("jsonp请求的响应",req.query)
res.send('获取到了jsonp请求的携带来的数据了')
})
文中有不足或错误之处,请大家指正哦!嘿嘿!!!