前端进行网络请求的三种方式

XHR技术

基于XMLHTTPRequest技术实现的，通过调用原生的XML对象实现的，非常的冗余==>ajax技术

ajax

Jquery.$ajax

// 有参数，则增加data字段，有请求头则增加headers字段，有错误处理增加error字段
// 默认是按照表单提交post方法，data中虽然是json但是提交时转成表单
$.ajax({
    url:"demo_test.txt",
    data:{a:10},
    success:function(result){
    	console.log(result);
    },
    error:function(xhr,status,error){
    	console.log(error);
    }
});
// data在post下是表单格式，在get下是querystring格式
// 通过以下方法指定为json格式[json格式本质就是body里是json字符串，头里是application/json]
$.ajax({
	method: "POST",
	headers: {"content-type": "application/json"},
	data: JSON.stringify({a: 10}),
	url: "http://localhost:9090"
	success: function(data){console.log(data)}
})
// JQuery的get和post可以简写：
$.get(url,data,callback)  // querystring格式
$.post(url,data,callback) // x-www-form-urlencoded格式

• Get: 参数放到querystring中
• Post：参数放到body中， 默认application/x-www-form-urlencoded

axios（推荐）

// axios默认是json类型的提交
axios({
	url: "http://localhost:9090",
	method: "POST",
	data: {a: 1} 		// 这边可以直接传json data而不是字符串
})

POST默认的提交格式为json，而不是表单www-form-urlencode

axios({
	url: "http://localhost:9090",
	method: "POST",
	headers: {"content-type": "application/www-form-urlencode"}
	data: "a=3&b=3"		// 这边可以直接传json data而不是字符串
}).then(res=>res.json())
  .then(d=>console.log(d))

axios的get/post/put/delete等等都可以简写

axios.post(url,data).then(callback)

fetch

• 目前主流浏览器都支持的技术，除了IE
• Network捕捉到的Type不再是XHR，而直接是fetch
• promise特性

fetch("http://localhost:9090", {
    	method: "POST",
    	headers: {"content-type": "application/www-form-urlencode"},
    	body: "a=12&b=11"	// 表单写这种形式
	})
	.then(res=>res.json())
	.then(d=>console.log(d))

fetch("http://localhost:9090", {
    	method: "POST",
    	headers: {"content-type": "application/json"},
    	body: JSON.stringify({a:11})			// json写这种形式
	})
	.then(res=>res.json())
	.then(d=>console.log(d))
	.catch(e=>{})

注意：

• 跟其他两个的参数为({parmas})不一样，<"url", {params}>
• 参数不是通过data提交的，而是body，写data无效

请求的组成

• 请求头：
  • url: uri[+query]
  • method：
  • header：
    • Http Header里的Content-Type一般有这三种：
      • application/x-www-form-urlencoded：数据被编码为名称/值对。这是标准的编码格式。(默认的)
      • multipart/form-data： 数据被编码为一条消息，页上的每个控件对应消息中的一个部分。
      • text/plain： 数据以纯文本形式(text/json/xml/html)进行编码，其中不含任何控件或格式字符。postman软件里标的是RAW。
  • 协议
• 请求体body
  • post请求时提交的数据

from:【ajax科普】【前端】fetch、axios、jquery的ajax用法

模拟服务器文件： 链接：https://pan.baidu.com/s/1nMZRcPYY4RIW_4Rvc2mDCw 提取码：wxw4

附录

测试所用express服务器代码

var app = express()
// app.use(express.urlencoded({ extended: false }))
// 通过 express.json() 这个中间件，解析表单中的 JSON 格式的数据
// 在服务器，可以使用 req.body 这个属性，来接收客户端发送过来的请求体数据
// 默认情况下，如果不配置解析表单数据中间件，则 req.body 默认等于 undefined
app.use(express.json())

app.use("/", (req, res) => {
    res.header("Access-Control-Allow-Origin", "*")
    res.header("Access-Control-Allow-Headers", "*")

    console.log("url: ", req.method, req.url);
    console.log("queryString: ", req.query);
    console.log("headers: ", req.headers);
    console.log("body: ", req.body);

    res.json({ code: 200, msg: "OK" })
})

app.listen(8080)

不写html代码，直接在浏览器里运行测试：

地址栏中输入：data:text/html,后跟内容，如

• data:text/html,<h1>hello</h1>会显示大的hello
• data:text/html, <script src="..."></script>