jQuery发送请求&AXIOS&fetch&跨域问题&localhost和127.0.0.1之间的区别&模板字符串的使用&CORS&click和onclick

seven_17
415 阅读4分钟

jQuery发送请求&AXIOS&fetch&跨域问题&localhost和127.0.0.1之间的区别&模板字符串的使用&CORS&click和onclick的区别

jQuery发送请求

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- crossorigin="anonymous"允许域名跨源的问题  anonymous 匿名 这样请求时不会携带域名下的cookie-->
    <link crossorigin="anonymous" rel="stylesheet" href="../../bootstrap/css/bootstrap.min.css">
    <script crossorigin="anonymous" src="../js/jquery.js"></script>
</head>

<body>
    <div class="container">
        <h2>jQuery发送AJAX请求</h2>
        <button type="button" class="btn btn-primary">GET</button>
        <button type="button" class="btn btn-success">POST</button>
        <button type="button" class="btn btn-info">通用性方法ajax</button>
    </div>
    <script>
        $('button').eq(0).click(function(){
            // 第一个是url参数 第二个是传递的数据 第三个是回调函数,第四个参数是响应体类型
            $.get('http://localhost:7000/jquery-server',{name:'sunpengda',age:20},function(data) {
                console.log(data);
            },'json')
        })
        // 这里数据类型默认转换成json对象格式
        $('button').eq(1).click(function(){
            $.post('http://localhost:7000/jquery-server',{name:'sunpnegda',age:20},function(data) {
                console.log(data);
            })
        })
        // 通用型
        $('button').eq(2).click(function(){
            $.ajax({
                url:'http://localhost:7000/jquery-server',
                // 参数
                data:{name:'sunpengda',age:20},
                type:'GET',
                dataType:'html',
                // 成功的回调
                success: function(data){
                    console.log(data);
                },
                // 超时时间
                timeout:2000,
                // 失败回调
                error: function(data) {
                    console.log('出错了')
                },
                // // 头信息
                headers:{
                    a:100,
                    b:200
                }
            })
        })
    </script>
</body>

</html>

服务器端

// 引入express框架
const express = require("express");
// 创建应用对象
const app = express();
app.all('/jquery-server', (request, response) => {
    // 设置响应头，允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    // 这里别忘了加哟 不然后信息的设置会出现错误
    // 接受自定义的头
    response.setHeader('Access-Control-Allow-Headers', '*');
    // 设置响应体
    // response.send('HELLO jquery');
    const data = {
        name: 'seven'
    };
    response.send(data);
})
// 监听端口启动
app.listen(7000, () => {
    console.log("服务器启动成功");
})

Axios

简介

Axios是一个基于promise的HTTP库，可以用在浏览器和node.js中。

html代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/axios/0.26.1/axios.min.js"></script>
</head>

<body>
    <button>GET</button>
    <button>POST</button>
    <button>AJAX</button>
    <script>
        var btns = document.querySelectorAll('button');
        // 配置baseURL 就是对路径进行简化
        axios.defaults.baseURL = 'http://localhost:7000';
        btns[0].onclick = function () {
            // GET请求
            axios.get('/axios-server', {
                // url参数
                params: {
                    name: 'sunpengda',
                    age: 20
                },
                // 请求头设置
                headers: {
                    name: 'sunquanjing',
                    age: 17
                }
            }).then(value => { //对返回数据的处理
                console.log(value);
            })
        }
        btns[1].onclick = function () {
            // 第一个参数时url 第二个参数时请求体 第三个参数是其他配置
            axios.post('/axios-server', {
                name: 'sunlingyan',
                age: 20
            }, {
                // URL
                params: {
                    id:77
                },
                // 请求头参数
                headers: {
                    hobby: 'play'
                }
            })
        }
        // 通用方法请求
        btns[2].onclick=function(){
             axios({
                // 请求方法
                method: 'POST',
                // URL
                url:'/axios-server',
                // url参数
                params: {
                    id:17
                },
                // 头信息
                headers: {
                    color: 'green'
                },
                // 请求体参数（只有在post是有）
                data:{
                    name:'sunlinyu'
                }
             }).then(response=>{
                 console.log(response);
                //  状态码
                 console.log(response.status);
                //  返回的状态字符串
                 console.log(response.statusText);
                //  返回的头信息
                console.log(response.headers);
                // 返回的请求体
                console.log(response.data);
             })
        }
    </script>
</body>

</html>

服务端代码

// 引入express框架
const express = require("express");
// 创建应用对象
const app = express();
// 如果控制台报错，尝试着将get变成all
app.all('/axios-server', (request, response) => {
    // 设置响应头  用来设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    // 接受自定义的头
    response.setHeader('Access-Control-Allow-Headers', '*');
    // 响应一个数据
    const data = {
        name: 'sunpengda'
    }
    // 将对象数据转换成字符串
    const str = JSON.stringify(data);
    // 设置响应体
    response.send(data);
})
// 监听端口启动
app.listen(7000, () => {
    console.log("服务器启动成功");
})

使用fetch函数发送Ajax请求

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button>AJAX请求</button>
    <script>
        const btn = document.querySelector('button');
        btn.onclick = function () {
            fetch('http://localhost:7000/fetch-server', {
                //  请求方法
                method: 'POST',
                //  请求头
                headers: {
                    username: 'maruixia'
                },
                //  请求体
                body: 'color=green&number=seven'
            }).then(response => {
                // 响应体不能直接获取 需要return
                // console.log(response);
                // text数据格式 返回的是字符串
                // return response.text();
                return response.json();
            }).then(response=>{
                console.log(response);
            })
        }
    </script>
</body>

</html>

服务器端

只需要将上面的代码中的路由地址更改'/fetch-server'

跨域

同源策略

Ajax默认同意同源策略，同源策略是一种安全策略，同源：协议、域名、端口号必须完全相同，违背同源策略就是跨域

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 来自同一个端口，同一个协议，同一个域名 -->
    <h2>同源策略</h2>
    <button>点击获取用户数据</button>
    <script>
        const btn=document.querySelector('button');
        btn.onclick=function(){
            const x = new XMLHttpRequest();
            // 这里因为满足的是同源策略  所以url可以简写
            x.open('GET','/data');
            x.send();
            x.onreadystatechange=function(){
                if(x.readyState===4) {
                    if(x.status>=200&&x.status<=300) {
                        console.log(x.response);
                    }
                }
            }
        }
    </script>
</body>
</html>

服务器端

const { request } = require('express');
const express=require('express');
const app=express();
app.get('/home',(request,response)=>{
    // 响应一个页面  这里/不要忘记加上
    response.sendFile(__dirname+'/index.html')
})
app.get('/data',(request,response)=>{
    response.send('用户数据');
})
app.listen(8000,()=>{
    console.log('服务器已经启动成功');
})

如何解决跨域问题

JSONP

  1. 简介：是一个非官方的跨域解决方案，只能支持get请求

  2. 工作原理：在网页中有些标签天生具有跨域能力，例如：img link iframe（规定一个内联框架，一个内联框架被用来在当前 HTML 文档中嵌入另一个文档） script。JSONP是利用script标签的跨域能力来发送请求的

  3. 使用

    1）动态的创建一个的script标签

    ​ var script = document.createElement("script");

    2)设置script的src，设置回调函数

    ​ script.src="http://localhost:3000/testAJAX?callback=abc";

JOSNP实践

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    用户名:<input type="text" id="username">
    <p></p>
    <script>
        // 获取元素
        const input=document.querySelector('input');
        const p=document.querySelector('p');
        // 声明handle函数
        function handle(data){
            p.innerHTML=data.msg;
        }
        // 绑定事件
        input.onblur=function(){
            let html=this.value;
            // 向服务器发送请求，检测用户名是否存在
            // 创建script标签
            var script = document.createElement("script");
            // 设置标签的src属性
            script.src='http://127.0.0.1:7000/username-server';
            // 把script插入到文档中
            document.body.appendChild(script); 
        }
    </script>
</body>
</html>

服务器端

const express = require("express");
// 创建应用对象
const app = express();
// 用户名检测是否存在
app.all('/username-server',(request,response)=>{
    const data={
        exist: 1,
        msg:'用户名已经存在'
    }
    // 将数据转换成为字符串
    let str = JSON.stringify(data);
    // 返回结果
    // end 相比send 不会加特殊响应头
    // 这里返回的结果就是函数的调用，函数的实参就是想给客户端返回的结果数据
    response.end(`handle(${str})`);
})
// 监听端口启动
app.listen(7000, () => {
    console.log("服务器启动成功");
})

jQuery-JSONP

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            width: 200px;
            height: 100px;
            border: 2px solid green;
        }
    </style>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<body>
    <button>点击发送jsonp请求</button>
    <div id="box">

    </div>
    <script>
        $('button').eq(0).click(function(){
            $.getJSON('http://localhost:7000/jquery-jsonp?callback=?',function(data){
                console.log(data);
                $('#box').html(`
                    名字:${data.name}</br>
                    爱好:${data.hobby}
                `)
            });
        })
    </script>
</body>
</html>

服务器端

const express = require("express");
// 创建应用对象
const app = express();
// 用户名检测是否存在
app.all('/jquery-jsonp',(request,response)=>{
    const data={
         name: 'seven',
        hobby:['sleeping','eating']
    }
    // 将数据转换成为字符串
    let str = JSON.stringify(data);
        response.setHeader('Access-Control-Allow-Origin',"*");
    // 接受callback参数  query就是获取url参数里面的数据
    let cb=request.query.callback;

    response.end(`${cd}(${str})`);
})
// 监听端口启动
app.listen(7000, () => {
    console.log("服务器启动成功");
})

localhost和127.0.0.1之间的区别

本质

localhost是本地服务器，127.0.0.1是本机地址也是本地服务器。localhost相当于域名，127.0.0.1代表IP地址。使用IP地址和域名可以访问某一网站。

工作原理

localhost：不通过网卡传输，不受网络防火墙和网卡的相关限制。

127.0.0.1：通过网卡传输，依赖网卡，并受到网卡和防火墙相关的限制

so 很有可能localhost访问时，系统带着本机当前的用户权限去访问，而用IP等于本机是通过网络再去访问本机，可能涉及到网络用户的权限。一般设置程序是localhost是最好的，localhost不会解析成ip也不会占用网卡和网络资源。

模板字符串的使用

简介

模板字符串是写在反引号中，一般的字符串卸载单引号或者双引号里。模板字符串更方便注入，使用${}注入。空格换行或缩进都会保留在输出中。

CORS

简介

CORS，跨域资源共享，CORS官方解决跨域方案，特点：不需要在客户端做出任何特殊的操作，完全在服务器中进行处理，支持get和post请求，跨域资源共享标准新增了一组HTTP首部字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源。

工作原理

通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应就会对该相应放行

使用方法

主要是服务端的设置响应头

response.setHeader('Access-Control-Allow-Origin',"*");

click和onclick的区别

onclick是绑定事件，告诉浏览器在鼠标点击时候要做什么，click本身是方法，作用是触发onclick事件，只要执行了元素的click（）方法。就会触发onclick事件。

click是一次简单的触发，只执行一次，找不到以后就不会执行了，onclick是给这个元素注册一种行为，可以重复触发。

avatar
文章
阅读
粉丝