【Ajax】(二）JQuery发送Ajax请求、Axios发送Ajax请求、fetch发送Ajax请求、跨域、jsonp、CORS

一、JQuery发送Ajax请求

按照惯例，定义几个按钮

<div class="container">
    <h2>jQuery发送Ajax请求</h2>
    <button>GET</button>
    <button>POST</button>
    <button>通用型方法ajax</button>
</div>

服务端server.js

//jquery服务
app.all('/jquery-server', (request, response) => {
    //设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.send('hello jquery AJAX');
});

1、GET、POST发送请求

$('button').eq(0).click(function () {
            $.get('http://192.168.0.102:8000/jquery-server', { a: 100, b: 200 }, function (data) { console.log(data) });
        })

        $('button').eq(1).click(function () {
            $.post('http://192.168.0.102:8000/jquery-server', { a: 100, b: 200 }, function (data) { console.log(data) });
        })

2、通用方法发送请求

$('button').eq(2).click(function () {
            $.ajax({
                //url
                url: 'http://192.168.0.102:8000/jquery-server',
                //参数
                data: { a: 100, b: 200 },
                //请求类型
                type: 'GET',
                //响应体结果
                dataType: 'json',
                //成功的回调
                succes: function (data) {
                    console.log(data);
                },
                //超时的回调
                timeout: 2000,
                //失败的回调
                error: function () {
                    console.log('出错啦！！');
                },
                //头信息
                headers: {
                    c: 300,
                    d: 400
                }
            });
        });

二、Axios发送Ajax请求

服务器server.js文件

//axios服务
app.all('/axios-server', (request, response) => {
    //设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.setHeader('Access-Control-Allow-Headers', '*');
    const data = {name:'zh'};
    response.send(JSON.stringify(data));
});

可以把url地址配置到上面

// 配置 baseURL
    axios.defaults.baseURL = 'http://192.168.0.102:8000';

GET和POST请求

btns[0].onclick = function () {
            //GET请求   axios.get(url,config)
            axios.get('/axios-server', {
                // url参数
                params: {
                    id: 100,
                    vip: 7
                },
                //请求头信息
                headers: {
                    name: 'nihao',
                    age: 22
                }
            })
        }

btns[0].onclick = function () {
//POST请求  axios.post(url,data,config)
            axios.POST('/axios-server', {
                usename: 'admin',
                password: 'admin'
            }, {
                // url参数
                params: {
                    id: 100,
                    vip: 7
                },
                //请求头信息
                headers: {
                    name: 'nihao',
                    age: 22
                }
            })
        }

通用请求方法：

btns[2].onclick = function () {
    axios({
        //url
        url:'/axios-server',
        //url参数
        params:{
            vip:10,
            level:30
        },
        //头信息
        headers:{
            a:100,
            b:200
        },
        //请求体参数
        data:{
            username:'admin',
            password:'admin'
        }
    })
}    

axios的请求方式看上去好流畅啊，一目了然！

三、fetch发送ajax请求

这个请求方法厉害之处在于他不用像jquery和axios那样需要引入第三方库，而是可以直接使用

//fetch服务
app.all('/fetch-server', (request, response) => {
    //设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.setHeader('Access-Control-Allow-Headers', '*');
    const data = {name:'zh'};
    response.send(JSON.stringify(data));
});

不过，用fetch返回数据要用两层promise
const btn = document.querySelector(“button”);

btn.onclick = function () {
        fetch('http://192.168.0.102:8000/fetch-server',{
            //请求方法
            method:'POST',
            //请求头
            headers:{
                name:'zhhhh'
            },
            //请求体
            body:'username=admin&password=admin'
        }).then(response =>{
            return response.text();
        }).then(response=>{
            console.log(response);
        })
    }

要把返回的数据换为json格式的话把text()改为json()

四、跨域

同源策略
同源策略是浏览器的一种安全策略。
同源：协议、域名、端口号，必须完全相同。
违背同源车略就是跨域

五、jsonp（程序员自己发明的解决跨域方法）

jsonp解决跨域的问题就是返回函数调用（这一部分有点懵）

1、原生jsonp

利用jsonp原理，实现用户名校验是否存在

服务端server.js

//用户名检测是否存在
app.all('/check-username', (request, response) => {
    const data={
        exist:1,
        msg:'用户名已经存在'
    };
    //将数据转化为字符串
    let str = JSON.stringify(data);
    //返回结果
    response.end(`handle(${str})`);
});

声明handle函数，创建script标签，利用src属性请求数据

用户名：<input type="text" id="username">
    <p></p>
    <script>
        const input = document.querySelector('input');
        const p = document.querySelector('p');

        //声明handle函数
        function handle(data) {
            input.style.border = "solid 1px #f00";
            // 修改 p 标签的提示文本
            p.innerHTML = data.msg;
        }

        input.onblur = function () {
            // 读取用户的输入值
            let username = this.value;
            // 向服务器端发送请求，检测用户名是否存在
            //1. 创建script标签
            const script = document.createElement('script');
            //2. 设置标签的src属性
            script.src = 'http://192.168.0.102:8000/check-username';
            //3. 将script插入到文档中
            document.body.appendChild(script);
        }
    </script>

2、用JQuery发送jsonp请求

做一个案例，点击按钮，向8000端口发出请求，返回结果在div呈现

<button>点击发送jsonp请求</button>
<div id="result"></div>

$('button').eq(0).click(function () {
            $.getJSON('http://192.168.0.102:8000/jquery-jsonp-server?callback=?', function (data) {
                $('#result').html(`
                    名称:${data.name}<br>
                    城市:${data.city}
                `)
            })
        })

注意这里的url地址后面要加上？callback=？

服务端server.js文件

//jquery jsonp
app.all('/jquery-jsonp-server', (request, response) => {
    const data = {
        name: 'zh',
        city: ['北京', '上海', '深圳']
    };
    //将数据转化为字符串
    let str = JSON.stringify(data);
    //接收 callback参数
    let cb = request.query.callback;
    //返回结果
    response.end(`${cb}(${str})`);
});

六、CORS（官方解决跨域方法）

Cross-Origin Resource Sharing
在CORS中你要发请求，你就按照ajax那一套去做就行了，至于跨域的问题，就交给服务端设置响应头就可以实现跨域

app.get('/server', (request, response) => {
    //设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');

    response.send('HELLO Ajax');
});

还有很多响应头信息，可以上这个网站了解一下：跨源资源共享