AJAX、

文章目录

    • AJAX
      • 1. AJAX简介
        • AJAX特点
      • 2. XML简介
      • 3. AJAX发送get请求
      • 4. post请求设置体参数
      • 5. 设置请求头信息
      • 6. AJAX请求服务端响应json数据
      • 7. ie缓存问题
      • 8. 请求超时问题和网络异常
      • 9. 取消请求
      • 10. 请求重复取消
      • 11. jQuery中的AJAX请求
      • 12. axios函数发送AJAX
      • 使用fetch函数发送AJAX请求
    • 跨域
      • 1. 同源策略
      • 2. 如何解决跨域：
      • 2.1 JSONP
        • JSONP 怎么工作的？
        • JSONP的使用
      • 2.2 jquery完成jsonp请求案例
      • 2.3 CORS
        • CORS怎么工作的？
        • CORS 的使用

AJAX

1. AJAX简介

Ajax全称为Asynchronous Javascript And XML，即异步JS和XML
AJAX不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式

通过Ajax可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据，先展示页面，需要时获取数据

AJAX特点

优点：
可以无刷新页面与服务端进行通信
允许你根据用户事件来更新部分页面内容
缺点：
没有浏览历史，不能回退
存在跨域问题（同源）
SEO不友好（爬虫获取不到信息）

2. XML简介

XML：可扩展标记语言，被设计用来传输和存储数据
XML和HTML类似，不同点：HTML中都是预定义标签，XML中没有预定义标签，全是自定义标签，用来表示一些数据
现在已被JSON取代

3. AJAX发送get请求

  <style>
        .result{
            height: 150px;
            width: 250px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <button>发送请求</button>
    <div class="result"></div>
    <script>
        const btn=document.getElementsByTagName('button')[0];
        const result=document.querySelector('.result');
        btn.onclick=function(){
            // 1.创建对象
            const xhr=new XMLHttpRequest();
            // 2.初始化 设置请求方法和url
            xhr.open('GET','http://127.0.0.1:3000/server');
            // 3.发送
            xhr.send();
            // 4.时间绑定 处理服务返回的结果
            // on when 当。。。的时候、readystate是xhr对象的属性表示状态0 1 2 3 4
            // change改变
            xhr.onreadystatechange=function(){
                // 判断（服务器返回了所有结果）
                if(xhr.readyState===4){
                    // 判断响应状态码 200 404 403 401 500
                    // 2xx成功
                    if(xhr.status>=200 && xhr.status<300){
                        // 处理响应结果 行 头 空行 体
                        // console.log(xhr.status);
                        // console.log(xhr.statusText);
                        // console.log(xhr.getAllResponseHeaders());
                        // console.log(xhr.response);
                        result.innerHTML= xhr.response;
                    }else{

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

4. post请求设置体参数

在send中设置

xhr.open('POST','http://127.0.0.1:3000/server');
// 3.发送
xhr.send('a=100&b=200&c=300');
xhr.send('a:100&b:200&c:300');

5. 设置请求头信息

在open后面设置
一般把身份校验的信息放在这里传递给服务器，由服务器对参数提取，校验用户身份

xhr.open('POST','http://127.0.0.1:3000/server');
// 设置请求头
xhr.setRequestHeader('','');

6. AJAX请求服务端响应json数据

            // 设置响应体数据类型
            xhr.responseType='json';
   result.innerHTML= xhr.response.name;

7. ie缓存问题

IE浏览器会对ajax结果缓存，下一次发送请求时会直接走本地缓存返回的不是浏览器的最新数据

解决：获取当前的时间戳

xhr.open('GET','http://127.0.0.1:3000/ie?t='+Date.now());

8. 请求超时问题和网络异常

        const xhr=new XMLHttpRequest();
        // 请求超过两秒就取消
        xhr.timeout=2000;
        // 超时回调
        xhr.ontimeout=function(){
            alert('网络异常，请稍后再试');
        };
        // 网络异常回调
        xhr.onerror=function(){
           alert('您的网络似乎出了些问题，请稍后再试')
        };
        xhr.open('GET','http://127.0.0.1:3000/delay');
        xhr.send();

9. 取消请求

调用abort方法

<button>点击发送请求</button>
    <button>点击取消</button>
    <script>
        const btns=document.querySelectorAll('button');
        let x=null;
        btns[0].onclick=function(){
            x=new XMLHttpRequest();
            x.open('GET','http://127.0.0.1:3000/delay');
            x.send();
        }
        // abort
        btns[1].onclick=function(){
            x.abort();
        }
    </script>

10. 请求重复取消

	const btn=document.querySelector('button');
        let x=null;
        // 标识变量，判断是否正在发送请求
        let isSending=false;
        btn.onclick=function(){
            // 判断
            if(isSending) x.abort();//如果正在发送请求，取消上一次
            x=new XMLHttpRequest();
            isSending=true;
            x.open('GET','http://127.0.0.1:3000/delay');
            x.send();
            x.onreadystatechange=function(){
                if(x.readyState===4){
                    isSending=false;
                }
            }
        }

11. jQuery中的AJAX请求

$.get(url, [data], [callback], [type])
url: 请求的URL地址
data: 请求携带的参数
callbac: 载入成功时回调函数
type：设置返回内容格式，xml、html、script、json、text、_default

<button>GET</button>
    <button>POST</button>
    <button>通用型方法ajax</button>
    <script>
        $('button').eq(0).click(function(){
     $.get('http://127.0.0.1:3000/jquery',{a:100,b:200},function(data){
                console.log(data);
            },'json');
        })
        $('button').eq(1).click(function(){
            //   （请求路径，对象参数，回调data响应体）
            $.post('http://127.0.0.1:3000/jquery',{a:100,b:200},function(data){
                console.log(data);
            });
        })
        $('button').eq(2).click(function(){
            $.ajax({
                // url
                url:'http://127.0.0.1:3000/jquery',
                // 参数
                data:{a:100,b:200},
                // 请求类型
                type:'GET',
                // 响应体格式设置
                dataType:'json',
                // 成功回调
                success:function(data){
                    console.log(data);
                },
                // 超时时间
                timeout:2000,
                // 错误回调
                error:function(){
                    console.log('出错了');
                },
                headers:{
                    c:300,
                    d:400}
            })  
        })
    </script>

12. axios函数发送AJAX

axios是ajax的工具库

<button>GET</button>
<button>POST</button>
<button>ajax</button>
<script>
    const btns=document.querySelectorAll('button');
    axios.defaults.baseURL='http://127.0.0.1:3000';
    btns[0].onclick=function(){
        // GET     
        axios.get('/axios',{
            // url参数
            params:{
                id:100,
                vip:7
            },
            // 请求头信息
            Headers:{
                name:'atguigu',
                age:20
            }
        }).then(value=>{
            // 对数据处理jquery用的是回调函数，axios基于promise方法
        });
    };
    btns[1].onclick=function(){
        // post 第二个是对象的话会直接作为请求体
        axios.post('/axios',{
            // 请求体：
            username:'admin',
            password:'admin',
        },{
            // url参数
            // 请求头信息
        })
    };
    btns[2].onclick=function(){
        axios({
            // 请求方法
            method:'POST',
            // url
            url:'/axios',
            // url参数
            // 请求头信息
            // 请求体参数
            data:{
                username:'admin',
                password:'admin',
            }
        }).then(res=>{
            console.log(res);
        })
    }

使用fetch函数发送AJAX请求

fetch号称是AJAX的替代品,是在ES6出现的,使用了ES6中Promise对象

fetch的代码结构笔记ajax简单多了,但fetch不是ajax的进一步封装,而是原生js,没有使用XMLHttpRequest对象

跨域

1. 同源策略

同源策略（Same-Origin Policy）最早由 Netscape 公司提出，是浏览器的一种安全策略。违背同源策略就是跨域

同源：协议、域名、端口号 必须完全相同

AJAX默认遵循同源策略，跨域没有办法直接发送AJAX请求

            // 满足同源策略 url可以简写
            x.open('GET','/data');

2. 如何解决跨域：

2.1 JSONP

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

JSONP 怎么工作的？

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

JSONP的使用
 // 1.创建script标签
            const script=document.createElement('script');
            // 2.设置script.src属性
            script.src='http://127.0.0.1:3000/check-username';
            // 3.将script标签插入到文档中
            document.body.appendChild(script);

返回的一般是一串js代码，这样浏览器才能识别解析并执行里面的内容
在这里插入图片描述

2.2 jquery完成jsonp请求案例

在这里插入图片描述

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
    <button>点击发送请求</button>
    <div class="result"></div>
    <script>
        $('button').eq(0).click(function(){
            // 这里一定要写?callback=?固定写法 
            // jquery内置一个处理json数据的函数，在服务端调用该函数就不用再特地写出函数名
            $.getJSON('http://127.0.0.1:3000/jquery-jsonp?callback=?',function(data){
                $('.result').html(`
                名称:${data.name}<br>
                校区：${data.city},
                `)
            })
        })
    </script>

app.all('/jquery-jsonp',(req,res)=>{
    res.setHeader('Access-Control-Allow-Origin','*')
    const data={
        name:'尚硅谷',
        city:['北京','上海','深圳'],
    };
    let str=JSON.stringify(data);
    let cb=req.query.callback;// jquery内置一个处理json数据的函数，在服务端调用该函数就不用再特地写出函数名
    res.end(`${cb}(${str})`);
})

2.3 CORS

推荐阅读：
http://www.ruanyifeng.com/blog/2016/04/cors.html
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS

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

CORS怎么工作的？

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

CORS 的使用

主要是服务端的设置：

rounter.get(“/testAJAX”,function(req, res){

})
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/635065.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

PostgreSQL学习：关于PostgreSQL以及认证

PostgreSQL学习：关于PostgreSQL以及认证

1、关于PostgreSQL PostgreSQL&#xff08;简称PG&#xff09;是强大的企业级开源关系数据库&#xff0c;世界排名第四&#xff0c;前三位Oracle 、SQLServer、MySQL都是商业数据库或受商业主体的控制&#xff0c;PG是学术社区开源数据库&#xff0c;开源协议自由度非常高&…
阅读更多...
【oracle的安装记录】

【oracle的安装记录】

oracle安装记录 一、下载以后&#xff0c;解压到同一路径下面 二、双击可执行安装文件&#xff0c;等待文件加载 三、双击以后&#xff0c;弹出信息 四、提示该窗口&#xff0c;点击【是】即可 五、未填写配置安全更新信息 六、弹出小窗口&#xff0c;选择【是】 七、安装选项…
阅读更多...
机器学习之决策树算法

机器学习之决策树算法

使用决策树训练红酒数据集 完整代码&#xff1a; import numpy as np import matplotlib.pyplot as plt from matplotlib.colors import ListedColormap from sklearn import tree, datasets from sklearn.model_selection import train_test_split# 准备数据&#xff0c;这里…
阅读更多...
一个通过ADC采集NTC热敏电阻的温度传感器

一个通过ADC采集NTC热敏电阻的温度传感器

前言： 如何设计一个电路，使用具有逐次逼近寄存器（SAR）模数转换器（ADC）的热敏电阻直接监测温度呢？温度传感电路需要使用负温度系数（NTC）热敏电阻与电阻器串联形成分压器，监测-25C至100C的温度范围。分压器具有产生与监测的温度成反比的输出电压的效果。电阻器分压器的…
阅读更多...
面试准备-项目【面试准备】

面试准备-项目【面试准备】

面试准备-项目【面试准备】 前言面试准备自我介绍&#xff1a;项目介绍&#xff1a; 论坛项目功能总结简介数据库表设计注册功能登录功能显示登录信息功能发布帖子评论私信点赞功能关注功能通知搜索网站数据统计热帖排行缓存 论坛项目技术总结Http的无状态cookie和session的区别…
阅读更多...
程序语言基础知识

程序语言基础知识

文章目录 1.程序设计语言2. 程序设计语言的特点和分类3. 编译程序&#xff08;编译器&#xff09;的工作原理4. 程序语言的数据成分4.1 数据成分4.2 运算成分4.3 控制成分4.4 传输成分 1.程序设计语言 低级语言&#xff1a;机器语言和汇编语言。 机器语言&#xff1a;二进制代…
阅读更多...
解决脚本刷服务器导致卡顿宕机的问题

解决脚本刷服务器导致卡顿宕机的问题

在互联网服务领域&#xff0c;自动化脚本的不当使用或恶意攻击可能会导致服务器资源被过度消耗&#xff0c;从而引发服务响应缓慢甚至系统崩溃。特别是在电商、游戏、社交平台等领域&#xff0c;这种现象尤为常见。本文将深入探讨脚本刷服的常见形式、其对服务器性能的影响&…
阅读更多...
Sentinel的隔离和降级

Sentinel的隔离和降级

文章目录 1、概念简介2、FeignClient整合Sentinel2.1、修改配置&#xff0c;开启sentinel功能2.2、编写失败降级逻辑2.3、总结 3、线程隔离&#xff08;舱壁模式&#xff09;3.1、线程隔离的实现方式3.2、sentinel的线程隔离1&#xff09;配置隔离规则2&#xff09;Jmeter测试 …
阅读更多...
蓉耀·时尚双子星------Yestar艺星首家星美学概念院璀璨启航

蓉耀·时尚双子星------Yestar艺星首家星美学概念院璀璨启航

在医美行业的璀璨星空中&#xff0c;一颗新星于蓉城冉冉升起&#xff0c;点亮了求美者的道路。5月21日&#xff0c;蓉耀•时尚双⼦星--Yestar艺星首家星美学概念院在成都复城国际璀璨启幕&#xff0c;标志着Yestar艺星全球战略布局在蓉城迈出了重要一步&#xff0c;也意味着其在…
阅读更多...
【linux系统学习教程 Day03】网络安全之Linux系统学习教程，用户和用户组管理，创建用户，删除用户，创建组，删除组....

【linux系统学习教程 Day03】网络安全之Linux系统学习教程，用户和用户组管理，创建用户，删除用户，创建组，删除组....

1.7 用户和用户组管理 1.7.1 用户管理 1-1 创建用户 #创建用户 useradd #创建一个用户 例子1&#xff1a;useradd test1 #创建用户 useradd #创建一个用户 例子1&#xff1a;useradd dilnur 1-2 设置密码 passwd 例子1&#xff1a;passwd dilnur #用root用户给…
阅读更多...
【Python小案例】Python+mysql+PyQt5健康体检报告查询

【Python小案例】Python+mysql+PyQt5健康体检报告查询

下载安装Python3.7.8 python官网&#xff1a;https://www.python.org/ PyQt5配置 安装PyQt5 pip install PyQt5pip install qt5_toolspytcharm创建项目 配置外部工具 QTDesigner的Arguments语句不用填 QTDesigner的Working directory语句:$ProjectFileDir$ Pyuic的Argume…
阅读更多...
BGP配置

BGP配置

配置 r1 建立EBGP对等体 [r1]bgp 100 [r1-bgp]router-id 1.1.1.1 [r1-bgp]peer 12.0.0.2 as-number 200 [r1]ip route-static 2.2.2.2 32 12.0.0.2 [r1]bgp 100 [r1-bgp]router-id 1.1.1.1 [r1-bgp]peer 2.2.2.2 as-number 200 [r1-bgp]peer 2.2.2.2 connect-interface LoopBa…
阅读更多...
军工单位如何做到安全跨网文件交换与导出的

军工单位如何做到安全跨网文件交换与导出的

在现代信息化战争中&#xff0c;军工单位在信息安全方面的需求尤为突出。跨网文件交换与导出作为军工单位日常运营的重要环节&#xff0c;面临着网络带宽限制、数据安全风险、合规性要求和传输稳定性等挑战。下面&#xff0c;我们将从以下几个方面探讨军工单位如何实现安全、高…
阅读更多...
深度学习之基于Tensorflow卷积神经网络脑肿瘤分类识别系统

深度学习之基于Tensorflow卷积神经网络脑肿瘤分类识别系统

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 一、项目背景 脑肿瘤是医学领域的一个重要问题&#xff0c;对人类的健康构成了严重威胁。传统的脑肿瘤分类识别方法…
阅读更多...
Thingsboard规则链：Entity Type Switch节点详解

Thingsboard规则链：Entity Type Switch节点详解

在物联网&#xff08;IoT&#xff09;领域&#xff0c;随着设备数量的爆炸式增长和数据复杂性的增加&#xff0c;高效、灵活的数据处理机制变得至关重要。作为一款先进的物联网平台&#xff0c;ThingsBoard提供了强大的规则链&#xff08;Rule Chains&#xff09;功能&#xff…
阅读更多...
提升代码简洁，MVEL 表达式和责任链设计模式应用实践

提升代码简洁，MVEL 表达式和责任链设计模式应用实践

导读 本文主要讲解了MVEL表达式和责任链设计模式相结合一起的消息处理解决方案设计、解耦消息处理节点以及方便代码维护扩展。通过“订单拆单消息”的接入作为具体实践案例&#xff0c;简要阐述了MVEL表达式和Apache Chain职责链设计模式应用场景。希望通过本文&#xff0c;读…
阅读更多...
实战Java虚拟机-高级篇

实战Java虚拟机-高级篇

一、GraalVM 什么是GraalVM GraalVM是Oracle官方推出的一款高性能JDK&#xff0c;使用它享受比OpenJDK或者OracleJDK更好的性能。GraalVM的官方网址&#xff1a;https://www.graalvm.org/官方标语&#xff1a;Build faster, smaller, leaner applications。 更低的CPU、内存…
阅读更多...
力扣第206题-反转链表

力扣第206题-反转链表

反转链表的效果示意图 要改变链表结构时&#xff0c;通常加入一个创建的临时头结点会更容易操作 时间复杂度&#xff1a;遍历2遍&#xff0c;2n 空间复杂度&#xff1a;额外创建一个栈&#xff0c;n (空间创建一个数组长度最大为5000&#xff0c;你说这个数组是栈也可以&…
阅读更多...
5.17 作业+思维导图+模拟面试

5.17 作业+思维导图+模拟面试

// tcp_ser.c #include <myheader.h>#define SER_PORT 8888 #define SER_IP "192.168.125.109"int newfd, sfd;int main(int argc, const char *argv[]) {//1、为通信创建一个端点sfd socket(AF_INET, SOCK_STREAM, 0);//参数1&#xff1a;说明使用的是ipv4通…
阅读更多...
2024中青杯数学建模C题：“X 疾病”在人群中的传播代码论文思路分析

2024中青杯数学建模C题：“X 疾病”在人群中的传播代码论文思路分析

2024中青杯数学建模C题论文和代码已完成&#xff0c;代码为C题全部问题的代码&#xff0c;论文包括摘要、问题重述、问题分析、模型假设、符号说明、模型的建立和求解&#xff08;问题1模型的建立和求解、问题2模型的建立和求解、问题3模型的建立和求解&#xff09;、模型的评价…
阅读更多...
最新文章

Copyright @ 2022~2023