Ajax跨域与封装

菜鸟笔记 2022-08-26

Ajax

6.跨域

6.1 同源策略

  • 同源策略(Same-Origin Policy)最早由Netscape 公司提出，是浏览器的一种安全策略
  • 同源： 协议、域名、端口号必须完全相同
  • 跨域： 违背同源策略就是跨域

6.2 如何解决跨域

6.2.1JSONP

jsonp 只支持get请求不支持post请求

  1. JSONP 是什么

JSONP(JSON with Padding)，是一个非官方的跨域解决方案，纯粹凭借程序员的聪明
才智开发出来，只支持get 请求。

  1. JSONP 怎么工作的？

在网页有一些标签天生具有跨域能力，比如：img link iframe script。
JSONP 就是利用script 标签的跨域能力来发送请求的。

  1. JSONP 的使用

html代码

//1. 创建 script 标签
const script = document.createElement('script');
//2. 设置标签的 src 属性
script.src = 'http://127.0.0.1:8000/check-username?callback=abc';
//3. 将script 添加到body 中
document.body.appendChild(script);
function abc(data) {
    alert(data.name);
};

后端代码

app.get("/check-username" , function (req , res) {
	var callback = req.query.callback;
    const data = {
        name: '孙悟空'
    };
    //将数据转化为字符串
    let str = JSON.stringify(data);
    //返回结果(一段可执行的JavaScript代码)
    response.end(`${callback}(${str})`);
});

6.2.2 完整JSONP代码

<!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>JSONP</title>
</head>
<body>
    <button id="btn" >狗咬</button>
    <script>
        function fn(date){
            console.log('xjszsd');
            console.log(date);
        }
    </script>
    <!-- 将非同源服务器的请求地址写在script标签的src属性里面 -->
    <!-- <script src="http://localhost:3000/jsonp"></script> -->
    <script>
        var btn = document.getElementById('btn');
        btn.onclick=function(){
            // 创建script标签
            var script = document.createElement('script');
            // 添加src属性
            script.src='http://localhost:3000/jsonp?callback=fn';
            // 将script标签追加到页面中
            document.body.appendChild(script);
            //加载完删除script标签
            script.onload=function(){
                // 删除子节点
                document.body.removeChild(script);
            }
        }

        // 封装jsonp
        function jsonp(options){
             // 创建script标签
             var script = document.createElement('script');
            // 添加src属性
            script.src=options.url;
            // 将script标签追加到页面中
            document.body.appendChild(script);
            //加载完删除script标签
            script.onload=function(){
                // 删除子节点
                document.body.removeChild(script);
            }
        }
    </script>
</body>
</html>

6.3 CORS

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS

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

CORS 怎么工作的？
CORS 是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应
以后就会对响应放行。

CORS 的使用
主要是服务器端的设置：

router.get("/testAJAX" , function (req , res) {
	//通过res 来设置响应头，来允许跨域请求
	//res.set("Access-Control-Allow-Origin","http://127.0.0.1:3000");
	res.set("Access-Control-Allow-Origin","*");//允许所有来源访问
	res.send("testAJAX 返回的响应");
});

常见问题解决

IE缓存问题
问题：在一些浏览器中(IE),由于缓存机制的存在，ajax 只会发送的第一次请求，剩 余多次请求不会在发送给浏览器而是直接加载缓存中的数据。
解决方式：浏览器的缓存是根据 url 地址来记录的，所以我们只需要修改 url 地址 即可避免缓存问题。

xhr.open("get","/testAJAX?t="+Date.now());

ajax允许携带cookie访问要设置：withCredential=true

JQuery封装的ajax：

代码示意：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- <script type="text/javascript" src="/jquery.min.js"></script> -->
    <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Jquery中ajax</title>
</head>
<body>
    <button id= "btn">ajax请求</button>
</body>
<script>
    $('#btn').on('click',function(){
        $.ajax({
            // 请求方式
            type:'post',
            // 请求地址
            url:'http://localhost:3000/post',
            // 请求参数
            data:JSON.stringify({
                name:'xjszsd',
                age:20
            }),
            // 在请求发送之前
            beforeSend:function(){
                alert('xjszsd');
                // 请求不会被发送
                // return false;
            },
            // 请求参数类型
            contentType:'application/json',
            // 成功回调函数
            success:function(response){
                // 方法内部会自动将json字符串转化为json对象
                console.log(response);
            },
            // 失败回调函数
            error:function(xhr){
                console.log(xhr);
            }
        })
    })    
</script>
</html>

serialize() 方法

将表单中的数据自动拼接成为字符串类型的参数

var params = $('#form').serialize();

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>serialize方法</title>
</head>
<body>
    <!-- <form action="" ></form> -->
    <form id="form" >
        <input type="text" name="username" id="userName">
        <input type="password" name="password" id="passWord">
        <input type="submit" value="提交">
    </form>
    <script>
        $('#form').on('submit',function(){

            var params = $('#form').serialize();
            // 将form表单参数转换为参数数组
            var totals = $(this).serializeArray();
            console.log(totals);
            // 循环,将参数数组转换为对象
            var result = {};
            $.each(totals,function(index,value){
                result[value.name]=value.value;
                console.log(index);
                console.log(value);
            });
            console.log(result);
            console.log(params);
            $.ajax({
                // 请求方式
                type:'post',
                // 请求地址
                url:'http://localhost:3000/post',
                data:JSON.stringify(result),
                 // 在请求发送之前
                beforeSend:function(){
                    alert('xjszsd');
                    // 请求不会被发送
                    // return false;
                },
                // 请求参数类型
                contentType:'application/json',
                // 成功回调函数
                success:function(response){
                    // 方法内部会自动将json字符串转化为json对象
                    console.log(response);
                },
                // 失败回调函数
                error:function(xhr){
                    console.log(xhr);
                }
            })
            return false;
        });
    </script>
</body>
</html>

. g e t ( ) 、 .get()、 .get()、.post()方法

作用： . g e t ( ) 方法用于发送 g e t 请求， .get()方法用于发送get请求， .get()方法用于发送get请求，post方法用于发送post请求

$.get('url',{name:'xjszsd',age=20},function(response){})
$.post('url',{name:'xjszsd',age=20},function(response){})
javascript前端前端

相关文章

如何学习编程？新手菜鸟如何学编程？
学习编程是顺着互联网的发展潮流，是一件好事。新手如何学习...
it行业都是什么工作？it行业主要做什么？
IT行业是什么工作做什么？IT行业的工作有：产品策划类、页面...
女生学Java好就业吗？女生适合学Java编程吗？
女生学Java好就业吗？女生适合学Java编程吗？目前有不少女生...
mysql-connect-confused
Can’t connect to local MySQL server through socket \'/v...
oracle基本命令
oracle基本命令 一、登录操作 1.管理员登录 # 管理员登录 ...
shell判断服务是否启动
一、背景 因为项目中需要通北京网络，所以需要连vpn，但是服...