1. 前言
简单的总结下前端的请求方式
2.服务端
服务端就选用node
任TA前端几路来,我后端只一路去
五种请求方式的前端,后端都是一套
// express 极简的web开发框架 const express = require('express') var app = express() // 静态资源目录,前端代码放这里 app.use(express.static(__dirname+"/public")) // 中间件 处理post请求参数 app.use(express.json()) app.use(express.urlencoded({extended:true})) //get请求的登录接口 app.get("/login",(req,res) => { res.json({ code:1000, msg:"get-成功", name: req.query.name, psw: req.query.password }) }) // post请求的注册 app.post("/register",(req,res) => { res.json({ code:1000, msg:"post-成功", name: req.body.name, psw: req.body.password }) }) // jsonp app.get("/jsonp",(req,res) => { res.jsonp({code:200,msg:"jsonp成功"}) }) app.listen(7788,()=>{ console.log("7788服务启动"); })
3.表单请求-get
<form action="/login" method="get"> <input type="text" name="name"> <input type="text" name="password"> <input type="submit" value="get"> </form>
4. 表单请求-post
<form action="/register" method="post"> <input type="text" name="name"> <input type="text" name="password"> <input type="submit" value="post"> </form>
5. 原生ajax-get
简易写法
var xhr = new XMLHttpRequest(); xhr.open("GET", `/login?name=${userName.value}&password=${password.value}`) xhr.send(); xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) { console.log("ajax", xhr.responseText); } }
6.原生ajax-post
var xhr = new XMLHttpRequest(); xhr.open("POST", "/register") //设置请求头 等配置信息 xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded") xhr.send(`name=${userName.value}&password=${password.value}`) xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) { console.log(xhr.responseText) } }
7. jQ-get
$.ajax({ type: "get", url: "/login", data: { name: userName.value, password: password.value }, success: function (response) { console.log("jq-get:", response) } });
8.jQ-post
$.ajax({ type: "post", url: "/register", data: { name: userName.value, password: password.value }, success: function (response) { console.log("jq-get:", response) } });
9. axios-get
注意的就是
axios的get请求参数{params:{参数}}外面多了一层
axios.get("/login",{params: { name: userName.value, password: password.value }}) .then(res => { console.log("axios-get",res.data) }) .catch(err => { console.error("axios-get-err:",err); })
10. axios-post
axios.post("/register", { name:userName.value, password:password.value }) .then(res => { console.log("axios-post",res.data) }) .catch(err => { console.error("axios-post-err",err); })
第三个参数是配置信息,不需要配置就不填
{ headers: { "Content-Type": "application/x-www-form-urlencoded" } }
11. fetch -get
fetch(`/login?name=${userName.value}&password=${password.value}`).then((res) =>{ res.json().then(data=>{ console.log("响应数据:",data) }) })
12 fetch-post
fetch("/register",{ method: "POST", body: JSON.stringify({ name:userName.value, password:password.value }), headers: { 'Content-Type': 'application/json;charset=utf-8' } }).then((res) =>{ res.json().then(data=>{ console.log("响应数据:",data) }) })
13.jsonp
jsonp 只是解决前端跨域的一种非标准的方式,
所以
axios和fetch原生不支持jsonp,通常还是后端解决跨域
13.1 原生ajax实现
<script> function getData(res){ console.log("Res----------:",res); } </script> <script src="http://127.0.0.1:7788/jsonp?callback=getData"></script>
回调函数写到 脚本标签的上边
实际工作中 都是动态创建
script标签 ,拼接url参数
一般动态创建
script标签
let showMsg = (res) => { console.log("jsonp 结果:", res) } let jsonpFn = () => { let script = document.createElement("script") script.src = "http://127.0.0.1:7788/jsonp?callback=showMsg" document.body.appendChild(script) //发完请求 就删掉 避免重复创建 document.body.removeChild(script) }
13.2 jQ ajax实现
$.ajax({ type: "get", url: "http://127.0.0.1:7788/jsonp", data: {}, dataType: "jsonp", success: function (response) { console.log("response:",response); } });
重点就是
dataType设置为jsonp
14.fetch-xhr
| 工具 | 本质 | 优劣 |
| 原生XHR | let xhr = new XMLHttpRequest() | 浏览器支持的原生技术; 基于回调方式处理响应 |
| jQ ajax | XHR的进一步封装而已 | 比原生简单; 基于回调方式处理响应 |
| Axios | XHR的进一步封装而已 | 比原生简单; 基于Promise处理响应;可以排队,并发,撤销 |
| NG httpClient | XHR的进一步封装而已 | 比原生简单; 基于观察者模式方式处理响应;可以排队,并发,撤销 |
| Fetch | 不再是XHR,是W3C提出的新技术,希望是替代 XHR |
比XHR从根本上更加先进;天然基于Promise;兼容性还有点问题 |
