前端小白的学习之路(Ajax 二)

吃清心的椰羊

已于 2024-03-13 20:17:37 修改

阅读量870

点赞数 21

分类专栏：前端文章标签：学习 ajax javascript

于 2024-03-09 14:10:42 首次发布

本文链接：https://blog.csdn.net/weixin_245249828/article/details/136577834

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

提示：本文讲我在学习ajax中遇到的一些问题，如同源策略，JSON与JSONP，get与post等问题

文章目录

一、Ajax请求数据过程
二、Ajax同源策略
- 1.概念
- 2.示例
三、JSON与JSONP
- 1.JSON（JavaScript Object Notation）
  - 1)概念
  - 2)转化方法
- 2.JSONP（JSON with Padding）
  - 1)概念
  - 2)用JSONP请求数据
四、GET请求与POST请求

提示：以下是本篇文章正文内容，下面案例可供参考

一、Ajax请求数据过程

一些网络基础知识

* 服务器

服务器就是一个设备，可以理解为是一台电脑。

* 服务端

在电脑上运行一个后台项目(java/php/nodejs)

项目运行成功可以提供的一个服务环境

这个环境可以处理数据。

* 服务端软件

运行后端项目的软件，例如: jdk 阿帕奇 nodejs等等

* 客户端

是一个有界面的软件，例如浏览器、QQ、微信等等

* 协议

一种网络协议例如: http:// (超文本传输协议)

* IP/域名

IP就是一个地址

IP可以和域名进行解析绑定

* 端口

是指设备与外界的出口

* 前端

用户看到视觉效果(界面)

* 后端

看不见、一种处理数据、处理资源的服务环境

ajax 可以做数据前后端交互的事情

二、Ajax同源策略

1.概念

同源策略是浏览器安全策略的一部分，它限制了一个网页上的文档或脚本如何能与来自不同源的资源进行交互。前端和后端的协议、ip(域名)、端口这三者一致，就是同源。我们可以叫做同源策略。

2.示例

页面地址：http://127.0.0.1:5500/demo.html

数据地址: http://127.0.0.1:5500/1.txt (同源策略地址)

数据地址: http://127.0.0.1:3000/1.txt 跨域地址(端口不同)

数据地址: http://192.167.27.1:5500/1.txt 跨域地址(ip不同)

数据地址: https://127.0.0.1:5500/1.txt 跨域地址(协议不同)

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>jQuery</title>
    <style></style>
</head>
<body>
    <h3></h3>

    <script src="./libs/jQuery/jQuery.min.js"></script>
    <script>

        // 调用ajax函数读取文档
        $.ajax({
            url: "03_data.txt",//同源策略下可以直接请求数据
            type: "get",
            success: function(content){
                // 判断content是字符串，还是object
                console.log(content);
                // 渲染文档数据
                $("h3").html(obj.message);
            },
            error: function(err){
                $("h3").html("请求失败");
                console.log("请求失败:",err);
            }
        })

    </script>
</body>
</html>

三、JSON与JSONP

JSON和JSONP虽然只有一个字母的差别，但是它们之间扯不上什么关系。JSON是一种数据交换格式，而JSONP是一种非官方跨域数据交互协议。

1.JSON（JavaScript Object Notation）

1)概念

JSON是一种数据格式，用于在客户端和服务器之间传输数据。由于JS中的对象等数据只能被JS自己认识，而不能被其他语言所识别，这时候就需要把对象转化为所有语言都能理解的JSON格式。其本质就是文本格式（string类型）。

示例：

"{'name' : 'zhangsan', 'age' : 18 , 'sex' : 'man', 'result' : [1,2,3]}"//这是JSON格式数据

*注：JSON中的对象的键名必须用引号包裹，而且数据可以互相嵌套如对象包数组

2)转化方法

js提供了两个方法来使其在obj与json格式之间互换

JSON.stringify(obj);//将数据转化为JSON格式

JSON.parse(json)//将json转化为obj

2.JSONP（JSON with Padding）

1) 概念

JSONP是一种利用 <script> 标签来实现跨域请求的技术，它允许在不受同源策略限制的情况下从其他域加载数据。
JSONP通过在请求中指定一个回调函数的名称，服务器端将JSON数据包装在该函数调用中返回，从而使得数据可以被跨域的页面接收和处理。
由于浏览器允许通过<script>标签加载跨域脚本，因此JSONP可以绕过同源策略的限制，但是它存在一些安全风险，例如无法保证返回数据的完整性和安全性。

2)用JSONP请求数据

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

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

<body>
    <div class="search">
        <input type="text">
    </div>
    <div class="list">
        <ul>
           
        </ul>
    </div>

    <script src="./libs/jQuery/jQuery.min.js"></script>
    <script>

        // jsonp: 是处理跨域访问数据的一种手段。 (jsonp的原理)
        // 在网页开发中，往往是指服务端返回一段脚本。把数据放在脚本当前
        // 例如： callback(数据)
        // 缺的是函数体 function callback(data){// 处理数据  }


        // tb 搜索接口 （跨域的接口）
        // https://suggest.taobao.com/sug?k=1&area=c2c&code=utf-8&ts=1709889524560&callback=__jp2&q=iphone
        var url2 = "https://suggest.taobao.com/sug?k=1&area=c2c&code=utf-8&ts=1709889524560&callback=__jp2"

        $(".search input").on("input", function () {
            //  获取输入的值
            var v = $(this).val();

            // 判断是否为空
            if (v == "") {
                return false;
            }

            // 有值
            $.ajax({
                url: url2,
                type: "get",
                data: {
                    q: v
                },
                // 设置跨域属性 (必选)
                dataType: "jsonp",
                // 设置回调函数名称(可选)
                // jsonp: "callback",
                // jsonpCallback: "callback",
                success: function (content) {
                    // console.log(content);
                    // 调用模板函数 渲染数据
                    template(content.result);
                },
                error: function (err) {
                    console.log(err);
                }
            })
        })

        // 模板函数
        function template(arr){
            // 字符串拼接
            var str = '';
            for(var i = 0 ; i < arr.length ;  i++){
                // 填充数据
                str +=`<li>${arr[i][0]}</li>`
            }
            // 把数据表现在页面上
            $(".list ul").html(str);
        }
    
    
    
    
    </script>



</body>

</html>

四、GET请求与POST请求

GET请求和POST请求是HTTP协议中常用的两种请求方法，它们在使用时有一些重要区别：

数据传输方式：
- GET请求：通过URL传递数据，在URL中可以看到参数和其对应的数值。GET请求的参数会以键值对的形式附加在URL的末尾，例如：http://example.com/page?name=value。
- POST请求：通过请求体（Request Body）传递数据，数据不会显示在URL中，而是作为请求的一部分隐含发送。
数据大小限制：
- GET请求：受URL长度的限制，因此传输的数据量通常较小，一般在几 KB 到几百 KB 之间。
- POST请求：由于数据在请求体中，相对于GET请求，POST请求可以传输较大量的数据，一般限制在几 MB 到几 GB 之间，具体限制取决于服务器和客户端的配置。
安全性：
- GET请求：因为参数直接暴露在URL中，对于敏感信息（如密码）不适合使用GET请求，因为它们可能会被浏览器保存在历史记录或服务器日志中。
- POST请求：由于数据在请求体中，相对更安全，适合用于传输敏感信息。
缓存机制：
- GET请求：可以被缓存，可以被书签收藏，可以被历史记录保存。
- POST请求：不会被缓存，不会被书签收藏，不会被历史记录保存。