HTTP knowledge review
原生xhr 请求代码
get 请求
1 <html lang="en"> 2 <head> 3 <meta charset="UTF-8" /> 4 <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 6 <title>Document</title> 7 </head> 8 <body> 9 <script> 10 let xhr = new XMLHttpRequest(); 11 xhr.onload = function () { 12 if (xhr.status >= 200) { 13 console.log(xhr.responseText); 14 } 15 }; 16 17 xhr.open("GET", "http://www.liulongbin.top:3006/api/getbooks?id=1"); 18 xhr.send(); 19 xhr.timeout = 3000; 20 xhr.ontimeout = function () { 21 console.log("请求超时了"); 22 }; 23 24 xhr.onreadystatechange = function () { 25 if (xhr.readyState == 4 && xhr.status == 200) { 26 console.log(xhr.responseText); 27 } 28 }; 29 </script> 30 </body> 31 </html>
post 请求
1 <html lang="en"> 2 <head> 3 <meta charset="UTF-8" /> 4 <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 6 <title>Document</title> 7 </head> 8 <body> 9 <script> 10 let xhr = new XMLHttpRequest(); 11 xhr.open("POST", "http://www.liulongbin.top:3006/api/addbook"); 12 xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");//----------------------------->注意点 post 请求必须要加请求头设置属性 13 const str = 14 "bookname=博人传可以加&author=阿三三&publisher=浙江图书出版社"; 15 xhr.send(str); 16 xhr.onload = function () { 17 if (this.status == 200) { 18 console.log(this.responseText); 19 } 20 }; 21 </script> 22 </body> 23 </html>
原生xhr 请求注意事项
--------------------------------------
ajax 请求代码
get请求
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge" /> 7 <title>Document</title> 8 <script src="./lib/jquery.js"></script> 9 </head> 10 11 <body> 12 <button id="btnGET">发起GET请求</button> 13 14 <script> 15 $(function () { 16 $("#btnGET").on("click", function () { 17 $.ajax({ 18 type: "GET", 19 url: "http://www.liulongbin.top:3006/api/getbooks", 20 success: function (res) { 21 console.log(res); 22 }, 23 }); 24 }); 25 }); 26 </script> 27 </body> 28 </html>
post请求
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge" /> 7 <title>Document</title> 8 <script src="./lib/jquery.js"></script> 9 </head> 10 11 <body> 12 <button id="btnPOST">发起POST请求</button> 13 14 <script> 15 $(function () { 16 $("#btnPOST").on("click", function () { 17 $.ajax({ 18 type: "POST", 19 url: "http://www.liulongbin.top:3006/api/addbook", 20 data: { 21 bookname: "梁总泡妞日记", 22 author: "梁总", 23 publisher: "梁总的小三们", 24 }, 25 success: function (res) { 26 console.log(res); 27 }, 28 }); 29 }); 30 }); 31 </script> 32 </body> 33 </html>
ajax请求注意事项
--------------------------------------
axios 请求代码
1 // get请求的参数必须挂载到{ params: { name: "张三", age: 18 } 2 // ------------------发给get请求------------------- 3 document.getElementById("btn").addEventListener("click", function () { 4 axios 5 .get("http://www.liulongbin.top:3006/api/get", { 6 params: { name: "张三", age: 18 },//---------------------------> 注意点 get请求参数必须挂载到params 上面 7 }) 8 .then(function (res) { 9 console.log(res.data); 10 }); 11 }); 12 // ---------------发给POST请求----------------------------- 13 // post 请求 14 let dataParam = { location: "浙江", city: "杭州" }; 15 document.getElementById("btn2").addEventListener("click", function () { 16 axios 17 .post("http://www.liulongbin.top:3006/api/post", dataParam) 18 .then(function (res) { 19 console.log(res.data); 20 }); 21 }); 22 // ------------------axios直接发起get请求------------------- 23 document.getElementById("btn3").addEventListener("click", function () { 24 axios({ 25 method: "GET", 26 url: "http://www.liulongbin.top:3006/api/get", 27 params: { name: "张三", age: 18 }, //-------------------> 注意点 28 }).then(function (res) { 29 console.log(res.data); 30 }); 31 }); 32 // ---------------axios直接发起post请求----------------------------- 33 let dataParam1 = { location: "浙江", city: "杭州" }; 34 document.getElementById("btn4").addEventListener("click", function () { 35 axios({ 36 method: "POST", 37 url: "http://www.liulongbin.top:3006/api/post", 38 data: dataParam1,//------------------->注意点 39 }).then(function (res) { 40 console.log(res.data); 41 }); 42 });
axios 请求注意事项
---------------------------------------
JSONP 请求代码
1 <button id="btn">发起jsonp请求</button> 2 <script> 3 $(function () { 4 $("#btn").on("click", function () { 5 $.ajax({ 6 url: "http://www.liulongbin.top:3006/api/jsonp?address=zs&location=20", 7 // 不要忘记写这个类型 8 dataType: "JSONP",//-------------------->这个很容易忘记写 9 jsonp: "callback", 10 jsonpCallback: "abc", 11 success: function (res) { 12 console.log(res); 13 }, 14 }); 15 }); 16 }); 17 </script>
JSONP请求注意事项
--------------------------------------
