（46）2020-03-08（同源策略和跨域、JQuery发送ajax请求、bootstrap插件的使用）

最新推荐文章于 2023-05-16 14:42:56 发布

weixin_53125613

最新推荐文章于 2023-05-16 14:42:56 发布

阅读量276

点赞数

本文链接：https://blog.csdn.net/weixin_53125613/article/details/114530809

版权

同源策略和跨域、JQuery发送ajax请求

一、同源策略

1、什么是同源?

所谓同源是指：域名、协议、端口相同。

检测以下地址和http://www.cnblog.com/ricolee是否同源：

URL 、结果、原因
http://www.cnblog.com/ricolee 、成功、域名、协议、端口相同
https://www.cnblog.com/ricolee 、失败、协议不同
http://www.cnblog.com:8888/ricolee 、失败、端口不同
http://www.cnblog.cn/ricolee 、失败、域名不同

2、为什么制定同源策略?

同源策略(Same origin policy)存在于浏览器端是一种约定，由Netscape(网景)提出，用来保护浏览器的数据安全。如果没有同源策略，A网站可以随意访问B网站的Cookie等信息是不安全的，现在所有支持JavaScript 的浏览器都会使用这个策略。

3、什么是跨域？

当协议，端口号，域名三者中只要有一个不同时，就会触发同源策略，即跨域。
如果没有同源策略，客户端可能会被攻击，比如说获取到cookie，使用cookie去登录别的网站。
浏览器不允许你请求这个地址的数据。

我们在开发过程中，可能会使用不同的服务器。每个服务器的功能是不同的，比如将HTML css文件图片资源专门放在一个服务器上。获取商品信息等等这些需要后端接口返回的数据放在另外一个服务器上。

4、解决跨域的三种方法

1.jsonp

src属性不会受到跨域的影响。

原理：

通过动态的创建Script标签，将src属性设置为请求路径。
服务器返回的是一段js代码格式的字符串。

<?php
//设置响应头，解决跨域问题。
// header('Access-Control-Allow-Origin:*');
// header('Access-Control-Allow-Methods:POST');
// header('Access-Control-Max-Age:60');
// header('Access-Control-Allow-Headers:x-requested-with,content-type');
// header('Content-Type:application/json;charset=utf-8');

// 接受浏览器发送过来的数据
$id = $_GET['id'];
$cb=$_GET['cb'];

// 返回给浏览器的数据
// json_encode 将数组转为json字符串
// echo json_encode(array(
//     'id' => $id,
//     'title' => 'hello word'
// ))
echo $cb . "({id:1,title:'hello word'})"
?>

    <style>
        #box {
            margin-top: 20px;
            background-color: skyblue;
        }
    </style>

</head>

<body>
    <button id="btn">发送请求</button>
    <div id="box">

    </div>
    <script>
        var btn = document.getElementById("btn");
        btn.onclick = function() {
            //创建一个Script标签。将标签加入到页面中，会自动去请求。
            var sc = document.createElement("script");
            // 将要执行的函数名作为参数传入。
            sc.src = "http://localhost/data.php?id=1&cb=fn";
            document.body.appendChild(sc);
            sc.remove();
        }

        function fn(obj) {
            //responseText 返回的数据
            var box = document.getElementById("box")
            box.innerHTML = `
                            <h2>编号为：${obj.id}</<h2>
                            <h2>标题为：${obj.title}</<h2>
                        `;
        }
    </script>
    <!-- <script src="http://localhost/data.php?id=1&cb=fn"></script> -->
</body>

【注意】jsonp只能发送get请求。不能发送post请求。因为post请求的参数是在requestBody中，而get请求的参数是可以拼接在url中的

2.cors

跟前端没有任何关系，这是后端的工作。

//设置响应头，解决跨域问题。
header('Access-Control-Allow-Origin:*');
header('Access-Control-Allow-Methods:POST');
header('Access-Control-Max-Age:60');
header('Access-Control-Allow-Headers:x-requested-with,content-type');
header('Content-Type:application/json;charset=utf-8');

<?php
//设置响应头，解决跨域问题。
header('Access-Control-Allow-Origin:*');
header('Access-Control-Allow-Methods:POST');
header('Access-Control-Max-Age:60');
header('Access-Control-Allow-Headers:x-requested-with,content-type');
header('Content-Type:application/json;charset=utf-8');

// 接受浏览器发送过来的数据
$id = $_GET['id'];

// 返回给浏览器的数据
// json_encode 将数组转为json字符串
echo json_encode(array(
    'id' => $id,
    'title' => 'hello word'
))
?>

 <style>
        #box {
            margin-top: 20px;
            background-color: skyblue;
        }
    </style>
    <script>
        function sendMsg() {
            //1.创建一个xmlhttpRequset对象
            var xhr = new XMLHttpRequest();
            // 2.调用open方法
            //open方法有三个参数：
            // 1.请求的方式  method get/post
            // 2.请求的url  
            // 3.是否异步,默认值true,可选参数.
            // https://cnodejs.org/api/v1/topics
            xhr.open("get", "http://localhost/data.php?id=1");
            //3.调用send方法
            xhr.send();
            //4.监听状态的改变。
            xhr.onreadystatechange = function() {
                //状态值 ：0-4 4表示完成
                if (xhr.readyState === 4) {
                    //判断状态码
                    if (xhr.status === 200) {
                        //responseText 返回的数据
                        var box = document.getElementById("box")
                        var res = JSON.parse(xhr.responseText);
                        box.innerHTML = `
                            <h2>编号为：${res.id}</<h2>
                            <h2>标题为：${res.title}</<h2>
                        `;
                    }
                }
            }
        }
        window.onload = function() {
            var btn = document.getElementById("btn");
            btn.onclick = sendMsg;
        }
    </script>
</head>

<body>
    <button id="btn">发送请求</button>
    <div id="box">

    </div>
</body>

3.代理

同源策略是浏览器为了安全设置的保证。而服务器与服务器之间是可以正常互相访问的。

正向代理

服务器不知道是谁来访问到。保护了用户的信息。

1.运行模式中选择 php版本，选择 Nginx+MySQL

2.其他选项菜单 — 打开配置文件 — Nginx.conf

3.在server的闭合标签前加上一行代码

location = /ym {
       proxy_pass http://localhost:80/data.php;
}

在这里插入图片描述

4.重启服务器

5.将文件放入网站根目录

6.使用localhost/文件名的形式进行访问。此时就可以进行跨域请求了。

二、JQuery发送ajax请求

1、get请求

用来发送ajax的get请求。

1）url 请求地址

2）参数：

3）回调函数：请求成功之后执行的代码。

4）dataType：期望返回的数据类型 json 解析为json，text 按照字符串输出。

    <style>
        #box {
            margin-top: 20px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <button id="btn">发送请求</button>
    <div id="box">

    </div>
    <script src="js/jquery-3.5.1.js"></script>
    <script>
        $("#btn").click(function() {
            $.get("http://localhost/data.php", {
                id: 1
            }, function(res) {
                console.log(res);

            })
        })
    </script>
</body>

在这里插入图片描述

第一种写法：两个参数 url请求地址（参数拼接在url后面）回调函数

$("#btn").click(function(){
    $.get("http://localhost/data.php?id=1",function (res){
    	console.log(res);
    })
});

第二种写法：

三个参数， url请求地址参数字符串多个参数用&连接回调函数

        $("#btn").click(function(){
            $.get("http://localhost/data.php","id=1",function (res){
                console.log(res);
            })
        });

第三种写法：

三个参数： url请求地址，参数对象回调函数

        $("#btn").click(function(){
            $.get("http://localhost/data.php",{id:1},function (res){
                console.log(res);
            })
        });

2、post请求

四个参数：

url：请求地址
参数：
- 字符串拼接 id=2&name=yasuo
- 对象 {id:1,name:jianhao}
回调函数：请求成功之后执行的代码
期望的返回数据类型：默认为json 可选。

  <script src="js/jquery-3.5.1.js"></script>
    <script>
        $("#btn").click(function() {
            $.post("http://localhost/post.php", "id=2", function(res) {
                console.log(res);

            })
        })
    </script>

在这里插入图片描述

3、Ajax请求

语法：	
$.ajax(params)
//params是一个参数（对象）

params 是一个对象数据类型，里面是本次请求的参数。

它里面有这些属性：

url：请求地址。必填。
async：是否异步。可选的，默认为true，表示异步。
type/method: 表示请求方式默认为get 可选get post等。支持大小写。
data：可以是对象类型，也可以是字符串类型。本次请求的参数。
dataType：期望返回的数据类型。默认为json. 值为json会对返回值进行JSON.parse()
success: 函数数据类型。表示成功之后执行的回调函数
error: 函数数据类型.表示请求失败之后执行的回调函数.
timeout: 超时时间。从发送请求开始计时，如果时间到了，请求未得到响应，则执行error回调函数。单位是ms
cache：是否缓存布尔值，默认为true。
- 设置为false后，每次请求都会携带一个参数，这个参数为当前请求的时间戳.
- 时间戳：距离1970年1月1日 0点0分0秒0毫秒的毫秒数。
- 请求缓存的原理：查看你当前的请求地址是否与之前的请求地址相同。
context 上下文。指定回调函数中的this指向 jQuery中回调函数默认的this指向是谁？指向的是xhr对象。

   <script src="js/jquery-3.5.1.js"></script>
    <script>
        var obj = {};
        $("#btn").click(function() {
            $.ajax({
                url: "http://localhost/data.php",
                type: "get",
                data: {
                    id: 1,
                },
                dataType: "json",
                success: function(res) {
                    console.log(this);
                    console.log(res);
                },
                error: function(xhr, info, err) {
                    //   xhr 是jQuery封装ajax请求的对象。
                    // info 是本次失败的错误信息
                    // err 详细的错误信息。
                    console.log("xhr=" + xhr);
                    console.log("info=" + info);
                    console.log("err=" + err);
                },
                timeout: 1000,
                context: obj,
                cache: true
            });
        })
    </script>

成功，则返回：
在这里插入图片描述

三、bootstrap插件的使用

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="css/bootstrap.css">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->


    <style>
        .row,
        .row>div {
            height: 100px;
        }
    </style>
</head>

<body>
    <h1>你好，世界！</h1>

    <div class="row">
        <div class="col-md-8" style="background-color:chocolate">.col-md-8</div>
        <div class="col-md-4" style="background-color:cornflowerblue">.col-md-4</div>
    </div>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src=" js/jquery-3.5.1.js "></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.js "></script>
</body>

</html>

bootstrap栅格布局

屏幕分辨率在1200以上，称为大屏 lg
992-1200 中屏 md
768-992 小屏 sm
768以下超小屏 xs

栅格布局：
页面宽分为12等份。
container容器版心
row 一行 magrin：-15px
col-xx-n
xx 就表示屏幕大小
n 表示该屏幕大小下div所占的宽度。n/12

hidden-xx 表示在xx屏幕大小下会隐藏。

列偏移：
col-xx-offset-n:
xx：屏幕大小
n：偏移的列数。

weixin_53125613

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
（46）2020-03-08（同源策略和跨域、JQuery发送ajax请求、bootstrap插件的使用）

同源策略和跨域、JQuery发送ajax请求一、同源策略1、什么是同源?2、为什么制定同源策略?3、什么是跨域？4、解决跨域的三种方法1.jsonp原理：2.cors3.代理正向代理二、JQuery发送ajax请求1、get请求2、post请求3、Ajax请求一、同源策略1、什么是同源?所谓同源是指：域名、协议、端口相同。检测以下地址和http://www.cnblog.com/ricolee是否同源：URL 、结果、原因http://www.cnblog.com/ric
复制链接

扫一扫