AJAX尚硅谷学习笔记（二）

最新推荐文章于 2024-05-19 15:52:07 发布
最新推荐文章于 2024-05-19 15:52:07 发布
阅读量348 收藏 9
点赞数 10
分类专栏： 基础 文章标签： 学习 笔记 ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52841164/article/details/136878319
版权

接（一）

<!-- index.html -->


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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
</head>

<body>
    <h1>ABC</h1>
    <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>
//1-同源策略>server.js


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(9000, () => {
    console.log("9000服务已经启动");
})
//app.js


const data = {
    name: 'Donna1'
};
// console.log(data);
// function handle(data) {
//     //获取result元素
//     const result = document.getElementById('result');
//     result.innerHTML = data.name;
// }

handle(data);
<!-- 原理.html -->


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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>原理演示</title>
    <style>
        #result {
            width: 300px;
            height: 200px;
            border: 3px solid pink;
        }
    </style>
</head>

<body>
    <div id="result"></div>
    <script>
        //处理数据
        function handle(data) {
            //获取result元素
            const result = document.getElementById('result');
            result.innerHTML = data.name;
        }

    </script>
    <!-- <script src="./js/app.js"></script> -->
    <!-- <script src="http://127.0.0.1:5500/AJAX/7-%E8%B7%A8%E5%9F%9F/2-JSONP/1-%E5%8E%9F%E7%90%86.html"></script> -->
    <script src="http://127.0.0.1:8000/jsonp-server"></script>
</body>

</html>
<!-- JSONP实践.html -->


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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSONP案例</title>
</head>

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

        //声明handle函数
        function handle(data) {
            input.style.border = "solid 2px #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://127.0.0.1:8000/check-username';
            //3.将script插入到文档中
            document.body.appendChild(script);//插入到body标签的最后
        }
    </script>
</body>

</html>
<!-- jQuery-jsonp.html -->


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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery-jsonp</title>
    <style>
        #result {
            width: 300px;
            height: 200px;
            border: 2px solid pink;
        }
    </style>
    <script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
</head>

<body>
    <button>点击发送jsonp请求</button>
    <div id="result"></div>
    <script>
        $('button').eq(0).click(function () {
            $.getJSON('http://127.0.0.1:8000/jquery-jsonp-server?callback=?', function (data) {
                // console.log(data);
                $('#result').html(`
                名称：${data.name}<br>
                城市：${data.city}
                `)
            });
        });
    </script>
</body>

</html>
<!-- cors.html -->


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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CORS</title>
    <style>
        #result {
            width: 300px;
            height: 200px;
            border: 2px solid pink;
        }
    </style>
</head>

<body>
    <button>发送请求</button>
    <div id="result"></div>
    <script>
        const btn = document.querySelector('button');
        btn.onclick = function () {
            //1.创建对象
            const x = new XMLHttpRequest();
            //2.初始化设置
            x.open("GET", "http://127.0.0.1:8000/cors-server");
            //3.发送
            x.send();
            //4.绑定事件
            x.onreadystatechange = function () {
                if (x.readyState === 4) {
                    if (x.status >= 200 && x.status < 300) {
                        //输出响应体
                        console.log(x.response);
                    }
                }
            }
        }
    </script>
</body>

</html>
//server.js


//1.引入express
const express = require('express');

//2.创建应用对象
const app = express();

//3.创建路由规则
//request是对请求报文的封装；response是对响应报文的封装
//以下也可以改成app.post(....)，app.gett(....)

//可以接受任意类型的请求
app.all('/server', (request, response) => {
    //设置响应头，允许跨越
    response.setHeader('Access-Control-Allow-Origin', '*');
    //设置响应头，允许接收自定请求头
    response.setHeader('Access-Control-Allow-Headers', '*');
    //设置响应体
    response.send('HELLO AJAX ALL33');
});

//JSON响应
app.all('/json-server', (request, response) => {
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.setHeader('Access-Control-Allow-Headers', '*');
    //响应一个数据
    const data = {
        name: 'atguigu'
    };
    //对对象进行字符串转换（因为send只能接收字符串和buffer）
    let str = JSON.stringify(data);
    //设置响应体
    response.send(str);
});

//专门针对IE缓存
app.get('/ie', (request, response) => {
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.setHeader('Access-Control-Allow-Headers', '*');
    //设置响应体
    response.send('HELLO IE---');
});

//延时响应
app.all('/delay', (request, response) => {
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.setHeader('Access-Control-Allow-Headers', '*');
    setTimeout(() => {
        //设置响应体
        response.send('延时响应');
    }, 3000)
});

//jQuery服务
app.all('/jquery-server', (request, response) => {
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.setHeader('Access-Control-Allow-Headers', '*');
    // response.send('Hello jQuery AJAX');
    const data = { name: 'Donna' };
    response.send(JSON.stringify(data));
});

//axios服务
app.all('/axios-server', (request, response) => {
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.setHeader('Access-Control-Allow-Headers', '*');
    // response.send('Hello axios AJAX');
    const data = { name: 'Donna' };
    response.send(JSON.stringify(data));
});

//fetch服务
app.all('/fetch-server', (request, response) => {
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.setHeader('Access-Control-Allow-Headers', '*');
    // response.send('Hello fetch AJAX');
    const data = { name: 'Donna' };
    response.send(JSON.stringify(data));
});

//jsonp服务
app.all('/jsonp-server', (request, response) => {
    // response.send('Hello jsonp AJAX');//对比这两个的控制台和网络response
    //response.send('console.log("hello jsonp")');//script请求要的是函数调用的内容（js代码）返回
    const data = {
        name: 'Donna1'
    };
    //将数据转换为字符串
    let str = JSON.stringify(data);
    //返回结果
    response.end(`handle(${str})`);//end不会加特殊响应头,`是tab键上面的，而不是单引号
    //总结：返回结果的形式是函数调用，函数的参数是我们想给客户端返回的结果数据，注意函数需提前声明
});

//用户名检测是否存在
app.all('/check-username', (request, response) => {
    // response.send('Hello jsonp');//对比这两个的控制台和网络response
    //response.send('console.log("hello jsonp")');//script请求要的是函数调用的内容（js代码）返回
    const data = {
        exist: 1,
        msg: '用户名已经存在'
    };
    //将数据转换为字符串
    let str = JSON.stringify(data);
    //返回结果
    response.end(`handle(${str})`);//end不会加特殊响应头,`是tab键上面的，而不是单引号
    //总结：返回结果的形式是函数调用，函数的参数是我们想给客户端返回的结果数据，注意函数需提前声明
});

//jquery-jsonp
app.all('/jquery-jsonp-server', (request, response) => {
    // response.send('Hello jsonp');//对比这两个的控制台和网络response
    //response.send('console.log("hello jsonp")');//script请求要的是函数调用的内容（js代码）返回
    const data = {
        name: 'Donna',
        city: ['北京', '上海', '深圳']
    };
    //将数据转换为字符串
    let str = JSON.stringify(data);
    //接收callback参数
    let cb = request.query.callback;
    //返回结果
    response.end(`${cb}(${str})`);//end不会加特殊响应头,`是tab键上面的，而不是单引号
    //总结：返回结果的形式是函数调用，函数的参数是我们想给客户端返回的结果数据，注意函数需提前声明
});

//cors
app.all('/cors-server', (request, response) => {
    //设置响应头
    // response.setHeader("Access-Control-Allow-Orign","http://127.0.0.1:5500");只有5500这个端口才可以向网页发送请求
    response.setHeader("Access-Control-Allow-Origin", "*");//*表示所有端口
    response.setHeader("Access-Control-Allow-Headers", "*");
    response.setHeader("Access-Control-Allow-Methods", "*");
    response.send('hello CORS');
});

//4.监听端口启动服务
app.listen(8000, () => {
    console.log("服务已经启动，8000端口监听中....");
})

鱼丸子蛋汤
关注
  • 10
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
尚硅谷Ajax笔记（word）
01-10
尚硅谷ajax视频课程同步笔记绝对是可以使用的哦，这个是自己总结的笔记
Ajax学习笔记整理
12-09
Ajax: Asynchronous JavaScript and Xml , 异步js脚本和xml , 常用来实现页面局部的异步刷新, 对提高用户体验有很大帮助. Xml在多语言时较有优势, 但Ajax技术实际上较多采用Json对象而不是Xml来处理数据. Ajax历史…...
ajax学习笔记
11-30
ajax学习笔记。。。。。。。。。。。。。。。。。。。。。。
jquery中ajax学习笔记3
10-28
由于很多知识都已经做了详细介绍，本节只介绍需要修改的代码，使用jqery封装的ajax使用XML格式接收服务器端的数据，web.xml、后台的servet都不用改
FME学习之旅---day27
summer_corner的博客
05-17 191
我们付出一些成本，时间的或者其他，最终总能收获一些什么。
使用多实例学习进行乳腺癌组织病理学图像分类和定位
qq_47896523的博客
05-16 1086
乳腺癌是女性最主要的死亡原因，病理学家根据病理切片中观察到的各种视觉特征（例如细胞核的形态特征、细胞核的微观和宏观结构等）做出决定。计算机辅助诊断（CAD）系统可以帮助病理学家自动做出决策。卷积神经网络是最广泛使用的深度学习框架，用于学习图像类别之间的复杂判别特征。多年来，VGG16 [3] 和 ResNet18 [4] 等各种 CNN 架构在海量 ImageNet 数据集上产生了出色的结果。CNN 被用于医学图像以产生最先进的结果。为图像中存在的所有类别提供了定位信息。
Page对象的学习
2301_77523055的博客
05-14 1002
ASP.NET允许开发者创建自定义控件和用户控件来扩展页面的功能。自定义控件是从现有的ASP.NET控件派生出来的新控件，而用户控件则是将多个控件组合成一个可重用的单元。这些控件可以像其他ASP.NET控件一样在页面上使用，并通过Page对象进行交互。Page_Init主要用于在控件加载之前进行初始化设置和添加事件处理程序。Page_Load主要用于处理页面回发和加载数据，以及执行其他需要在页面加载时完成的逻辑。由于Page_Init在Page_Load之前触发，因此在Page_Init。
学习kong官方文档
好好学习日记
05-17 270
当然，我会用更简洁的方式重新解释这两个概念：Helm和Kubectl是Kubernetes生态系统中常用的两个工具，它们各自有不同的用途：
推荐系统学习笔记（一）
weixin_44880995的博客
05-15 143
同类策略（精排中的两种模型）天然互斥，并且（两条召回通道）效果会相互影响，避免干扰。反转：有的指标立刻影响，有的需要长期观测-------尽快推全也可以长期观测。10%作为holdout桶，实验使用剩余的90%，做diff（需要归一化）不同策略（添加召回通道，优化粗排模型）通常不会干扰，可以作为正交的两层。保留10%，完全不受实验影响，可以考察整个部门对业务指标的贡献。同层互斥----避免一个用户被两个实验影响。不同层正交----每层独立随机分配用户。推全：新层，与其他层正交，90%用户。
RustGUI学习（iced/iced_aw）之扩展小部件（十九）：如何使用context_menu部件来创建右击菜单？
用沸腾的热血，支付我们的人生吧！
05-15 66
本专栏是学习Rust的GUI库iced的合集，将介绍iced涉及的各个小部件分别介绍，最后会汇总为一个总的程序。iced是RustGUI中比较强大的一个，目前处于发展中（即版本可能会改变），本专栏基于版本0.12.1.
DB类的学习
2301_77523055的博客
05-15 365
"不返回结果集" 意味着执行 SQL 语句后，你不会得到一个可以逐行读取的数据集。相反，你可能会得到一个表示受影响的行数的整数，或者只是一个表示命令是否成功执行的确认。
docker学习和常用命令
OutRoading的博客
05-14 181
镜像仓库datahub。
ptrade从零开始学习量化交易第3期【如何写一个简单但是完整的策略】
GJ57017_wx的博客
05-17 130
开始写策略 简单但是完整的策略 先来看一个简单但是完整的策略: def initialize(context): set_universe('600570.SS') def handle_data(context, data): pass 一个完整策略只需要两步: set_universe: 设置我们要操作的股票池，上面的例子中，只操作一支股票: '600570.SS'，恒生电子。所有的操作只能对股票池的标的进行。 实现一个函数: handle_data。 这是一个完整的策略，但
【AI学习】简单聊聊后训练（Post-Training）的重要性
bylander的博客
05-17 629
模型生成的输出质量比网上的大多数内容都要高。因此，让模型自己思考似乎更有道理，而不仅仅是训练来模仿网络上的内容。所以，我认为从第一性原理上来说，这是有说服力的。我会说，我们通过后训练取得了很多进步。
Android OpenMAX（八）如何学习OMXNodeInstance
青山渺渺
05-15 234
OMXNodeInstance学习技巧
线性回归学习笔记
julyclj55555的博客
05-15 264
换句话说，多元线性回归可以有足够的精确性，但对于该精确性的合理解释会比较难，因为在多个属性中，可能有其中多组子属性的组合都能拟合到近似最优的模型效果，但对不同组的子属性的组合解释，会因为属性不同而有很大区别，这就是统计学家莱奥·布雷曼口中的“罗生门”（Rashomon）。它的值越大代表，拟合的结果越可信；将“罗生门”深挖一步，就是机器学习和统计学在认识论上的差异：统计学讲究的是“知其然，知其所以然”，它不仅要找出数据之间的关联性，还要挖出背后的因果性，给计算出的结果赋予令人信服的解释才是统计的核心。
canvas学习笔记-透明度
m0_51181022的博客
05-17 446
在上面画一系列半径递增的半透明圆。圆叠加得越多，原先所画的圆的透明度会越低。通过增加循环次数，画更多的圆，从中心到边缘部分，背景图会呈现逐渐消失的效果。方法类似，就多了一个用于设置色彩透明度的参数。它的有效范围是从 0.0（完全透明）到 1.0（完全不透明）。里所有图形的透明度，有效的值范围是0.0（完全透明）到1.0（完全不透明），默认值是1.0。第二个例子和上面的那个类似，不过不是画圆，而是画矩形。可以分别设置轮廓和填充样式，因而具有更好的可操作性和使用灵活性。
来学习线程啦
Islucas的博客
05-15 814
1，线程由进程创建的，是进程的一个实体。比如：在迅雷中正在下载的一个文件 就是一个进程2，一个进程可以拥有多个线程1，Java语言中，引入了对象互斥锁的概念，来保证共享数据操作的完整性2，每个对象都对应于一个可称为“互斥锁”的标记，这个标记用来保证在任一时刻，只能有一个线程访问该对象3，关键字Synchronized来与对象的互斥锁联系，当某个对象用Synchronized修饰时，表面该对象在任一时刻只能由一个线程访问4，同步的局限性：导致程序的执行效率要降低。
Java入门基础学习笔记41——实体类
最新发布
CCH2024的专栏
05-19 78
Java入门基础学习笔记
Ajax学习笔记pink老师
07-29
对于学习Ajax，我可以为您提供一些学习笔记。以下是一份简要的Ajax学习笔记，希望对您有所帮助： 1. 什么是Ajax？ - Ajax全称为Asynchronous JavaScript and XML（异步JavaScript和XML），是一种用于创建交互式Web...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值