几种常用网络请求汇总

我对于网络请求的理解如下：在前端页面使用服务器的东西的时候就会发送一个请求，比如加载一个服务器图片的时候我们呢就会发送一个请求，这里使用src是不会涉及到跨域的问题的。
在前端页面中比如查询服务器中的值，发送ajax请求，那么就会发送一个GET请求，请求服务器数据在返回到前端页面。
POST请求同理，只是多了一步发送前端页面的数据，比如表格提交，注册等。

我们再写GET和POST方法的时候最好是大写，因为很多框架封装时候都是大写的，不然会出现很多奇怪的bug

下面我列举一下常用的网络请求下面的三种基于egg框架的网络请求

先把router.js和home.js中的代码贴出来
router.js

'use strict';

/**
 * @param {Egg.Application} app - egg application
 */
module.exports = app => {
  const { router, controller } = app;
  router.get('/', controller.home.index);
  router.get('/yzm', controller.home.yzm);
  router.get('/ajax', controller.home.ajax);
  router.get('/axios', controller.home.axios);
  router.get('/jqg', controller.home.jqg);

  router.post('/ajax1', controller.home.ajax1);
  router.post('/ap', controller.home.ap);
  router.post('/jqp', controller.home.jqp);




};

home.js

'use strict';

const Controller = require('egg').Controller;
const svg = require("svg-captcha")
class HomeController extends Controller {
  async index() {
    const { ctx } = this;
    ctx.body = 'hi, egg';
  }
  async yzm() {
		const captcha = svg.create({
			size: 4,
			fontSize: 30,
			width: 400,
			height: 40,
			background: '#FF0000',
			color:"#FFFFFF"
		});

		this.ctx.body=captcha
	}
	async ajax(){
		const {ctx} = this;
		ctx.body='123'
	}
	async axios(){
		const {ctx}=this;
		ctx.body = '66666'
	}
	async ajax1(){
		const {ctx}=this;
		ctx.body='sqsq'
	}
	async jqg(){
		const {ctx}=this;
		ctx.body = 'jqg'
	}
	async ap(){
		const {ctx}=this;
		ctx.body = 'ap'
	}
	async jqp(){
		const {ctx}=this;
		ctx.body = 'jqp'
	}
}

module.exports = HomeController;

一：原生ajax

原生ajax步骤如下

1. 创建ajax对象（ let xhr = new XMLHttpRequest() ||ActiveXObject(“Microsoft.XMLHTTP”);）
2. 建立与服务器的连接（xhr.open(‘Mthod’,‘url’)）;
3. 发送网络请求（xhr.send()）
4. 监听网络请求的整个过程(xhr.onreadstatechange=function*({}))
5. 从服务器向前端响应并且发送数据（xhr.responseText）
6. 数据操作

前端代码
GET请求

        function fn() {
            let xhr = new XMLHttpRequest();
             xhr.open('GET','http://127.0.1:7001/ajax');
             xhr.send();
             xhr.onreadystatechange=function(){
                 if(xhr.readyState==4){
                    console.log(xhr.responseText);
                 }
             }
        }

POST请求

        function fn2(){
            let xhr = new XMLHttpRequest();
            xhr.open('POST','http://127.0.1:7001/ajax1')
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
            xhr.send(JSON.stringify({name: "张三", pwd: "123"}));
            xhr.onreadystatechange = function(){
                if(xhr.readyState==4){
                    console.log(xhr.responseText);
                }
            }
        }

POST这里注意一下send传递参数的时候需要转变成为字符串往后端传输。

jquer请求

先引入jquery

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

GET

            function jqg(){
                $.ajax({
                    url:'http://127.0.1:7001/jqg',
                    method:'GET',
                    success:function(data){
                        console.log(data);
                    },
                    error:function(err){
                            console.log(err);
                        }
                })
            }

POST请求

                function fn4 (){
                    $.ajax({
                        url:'http://127.0.1:7001/jqp',
                        method:'POST',
                        data:{name:'sqq'},
                        success:function(data){
                            console.log(data);
                        },
                        error:function(err){
                            console.log(err);
                        }
                    })
                }

axios请求

首先引入axios

    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.9.1/axios.js"></script>

GET请求

        function fn1(){
            axios.get('http://127.0.1:7001/axios')
            .then((data)=>{
                console.log(data.data);
            })
            .catch((err)=>{
                console.log(data);
            })
        }

POST请求

                function fn3(){
                    axios.post('http:127.0.1:7001/ap',{name:'sqq'})
                    .then((data)=>{
                        console.log(data.data);
                    })
                    .catch((data)=>{
                        console.log(data);
                    })
                }

最后一种是jsonp

jsonp是通过src加载的资源，因为src本来就是不跨域的，使用src可以解决跨域的问题，在src的参数中写入cb=fn这里的fn是后端服务器传给前端页面的字符串中的一部分。从后端传入前端的实际上是一个执行函数的语句，比如fn(形参)
jsonp最重要的一点是注意名字保持一致，在后端页面传入前端页面中的函数名称，前端实际函数的名称，以及前端src中的cb或者callback的值的函数名称。都必须保持一致，不然不能使用。

下面举例子
html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
     function jsonpp(data) {
				console.log(data);
			}
    </script>
    <script src="http://localhost:9999?cb=jsonpp"></script>
</body>
</html>

jsonp.js其实就是后端服务器

let http =require('http');
http.createServer((req,res)=>{
    let obj = {
        name:"karen666",
        age:18
    }
    res.write(`jsonpp(${JSON.stringify(obj)})`);
    res.end();
}).listen(9999)
console.log('success');

/