Ajax 学习

文章目录

  • 1. 前置知识
    • 1.1 ajax 介绍
    • 1.2 XML 简介
  • 2. AJAX 学习
    • 2.1 AJAX基础学习
      • (1)AJAX的特点
      • (2)AJAX 初体验
      • (3)服务端响应json 数据
    • 2.2 IE 缓存问题
    • 2.3 请求超时和网络异常
    • 2.4 手动取消请求
    • 2.5 重复请求
    • 2.6 jQuery 中的AJAX
    • 2.7 axios 中的AJAX
    • 2.8 fetch() 发送AJAX
  • 3. 跨域
    • 3.1 同源策略
    • 3.2 如何解决跨域
      • (1)JSONP
      • (2)CORS

1. 前置知识

1.1 ajax 介绍

AJAX全称为Asynchronous JavaScript And XML,就是异步的JS和XML。
通过AJAX可以在浏览器中向服务器发送异步请求,最大的优势:无刷新获取数据
AJAX不是新的编程语言,而是一种将现有的标准组合在一起使用的新方式。

用处:

  • 懒加载
  • 页面滚动到底之后在进行刷新新的内容
  • 用户名已被其他用户设置
  • 小米商城网页上端下拉表单的内容显示

1.2 XML 简介

XML可扩展标记语言。
XML被设计用来传输和存储数据。
XML和HTML类似,不同的是HTML中都是预定义标签;XML中没有预定义标签,
全都是自定义标签,用来表示些数据。
比如说我有一个学生数据:
name=“孙悟空”;age=18; gender=“男”;
用XML表示:

 <student>
<name>孙悟空</name>
<age>18</age>
<gender></gender>
</student>

现在已经被json 取代了

json({
name:'孙悟空',
age:18,
gender:'男'
})

2. AJAX 学习

2.1 AJAX基础学习

(1)AJAX的特点

  1. AJAX的优点
  • 可以无需刷新页面而与服务器端进行通信;
  • 允许你根据用户事件来更新部分页面内容。
  1. AJAX的缺点
  • 没有浏览历史,不能回退
  • 存在跨域问题(同源)
  • SEO不友好

(2)AJAX 初体验

**readystate:**是xhr对象中的属性,有0,1,2,3,4五个属性值;

  • 0:xhr 对象还未初始化完成;
  • 1:open()调用完成
  • 2:send()调用完成
  • 3:返回部分响应结果
  • 4:服务已返回全部响应结果

onreadystatechange事件就是指readystate改变一次就触发一次事件

let btn = document.getElementsByTagName('button')[0]let result = document.getElementById('result')btn.onclick = () => {// 创建ajax 请求// 1. 创建xhr 对象const xhr = new XMLHttpRequest()// 2. 初始化 设置请求方法和url xhr.open('GET','http://127.0.0.1:8000/server')// 3. 发送xhr.send()// 4. 事件绑定 处理服务端返回的结果xhr.onreadystatechange = ()=>{if(xhr.readyState === 4){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}}}}

在这里插入图片描述

  1. get()
 // 2. 初始化 设置请求方法和url xhr.open('GET','http://127.0.0.1:8000/server')
  1. post()
 // 2. 初始化 设置请求方法和url xhr.open('POST','http://127.0.0.1:8000/server')
  1. 设置请求头
xhr.setRequestHeader('name','cherry')

(3)服务端响应json 数据

xhr.onreadystatechange = ()=>{if(xhr.readyState === 4){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}}}

2.2 IE 缓存问题

IE 浏览器存在一个问题:就是某个网站第二次刷新时会将缓存中的内容拿过来,也就是如果第一次刷新后我们更新了形影提数据,那么该网站在ie浏览器中呈现时将不会得到刷新后的内容,对于这种问题我们可以使用时间戳来实现。

xhr.open('post','http://127.0.0.1:8000/ie?t='+Date.now())

2.3 请求超时和网络异常

const xhr = new XMLHttpRequest()// 超时设置xhr.timeout = 2000// ms 2s之后无结果响应就不在向下执行xhr.ontimeout=()=>{alert('网络异常')}xhr.onerror=()=>{alert('网络连接异常')}

2.4 手动取消请求

上小节我们尝试了自动取消请求,这节来学习手动取消请求。

let btn =document.querySelectorAll('button')let xhr = nullbtn[0].onclick=()=>{xhr = new XMLHttpRequest()xhr.open('GET','http://127.0.0.1:8000/delay')xhr.send()}btn[1].onclick=()=>{xhr = new XMLHttpRequest()xhr.abort()}

2.5 重复请求

上个请求未响应就发送下个请求,服务器就需要频繁去处理,我们一般设置先去查询是否有相似的请求发送,如果有就先关闭上次请求,再发送新的请求。

let btn = document.querySelectorAll('button')let xhr = null// 标识变量let isSending = falsebtn[0].onclick = () => {if(isSending) x.abort()xhr = new XMLHttpRequest()isSending = truexhr.open('GET', 'http://127.0.0.1:8000/delay')xhr.send()xhr.onreadystatechange=()=>{if(xhr.readyState === 4){isSending=false}}}btn[1].onclick = () => {xhr.abort()}

2.6 jQuery 中的AJAX

$('button').eq(0).click(()=>{$.get('http://127.0.0.1:8000/jquery',{a:100,b:20},(data)=>{console.log(JSON.parse(data));// data指的是响应体},'json')// 第二个参数设置的是请求参数// 第四个参数设置的是响应格式})$('button').eq(1).click(()=>{$.post('http://127.0.0.1:8000/jquery',{a:100,b:20},(data)=>{console.log(data);// data指的是响应体})})// 自定义程度强时使用ajax()     
$('button').eq(2).click(()=>{$.ajax({url:'http://127.0.0.1:8000/delay',data:{a:100,b:20},// 请求参数type:'GET',// type/method 都可以// 响应体结果dataType:'json',// 成功的回调success:(data)=>{console.log(data);},timeout:2000,// ms 超时时间error:()=>{console.log('出错了');},// 请求头信息headers:{d:100,b:20}})})

2.7 axios 中的AJAX

// 配置之后 下面的get和post请求的路径会与之拼接axios.defaults.baseURl = 'http://127.0.0.1:8000'const btns = document.querySelectorAll('button')btns[0].onclick = () => {axios.get('/axios-server', {//Urlparams: {id: 100,cherry: 1},headers: {name: 'cherry',CharacterData: 'new bee'}}).then(value => {// axios 使用then() 返回响应体console.log(value);})}btns[1].onclick = () => {axios.post('/axios-server', {//请求体data: {name: 'cherry',CharacterData: 'new bee'}}, {//Urlparams: {id: 100,cherry: 1},//请求头headers: {name: 'cherry',CharacterData: 'new bee'}}).then(value => {// axios 使用then() 返回响应体console.log(value);})}// axios函数发送请求btns[2].onclick = () => {axios({method: 'post',url: '/axios-server',params: {a: 100,b: 200},headers: {name: 'cherry',purpose: '养好作息!认真学习'},data: {name: 'cherry',purpose: '养好作息!认真学习'}}).then(response => {console.log('养好作息!认真学习');})}

2.8 fetch() 发送AJAX

在这里插入图片描述

 let btn = document.querySelector('button')btn.onclick = () => {fetch('http://127.0.0.1:8000/fetch-server?cherry=NO.1',{method: 'POST',headers: {name: 'cherry',purpose: 'early to bed and early to up'},body: 'name=cherry&purpose=early to bed and early to up'  }).then(response => {return response.text()// return response.json()})}

3. 跨域

3.1 同源策略

同源策略(Same-Origin Policy)最早由Netscape公司提出,是浏览器的一种安全策略。
同源协议域名端口号必须完全相同。(当前页面和ajax 请求两者之间)

违背同源策略就是跨域。

3.2 如何解决跨域

(1)JSONP

JSONP是什么

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

JSONP怎么工作的?

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

原生JSONP的使用

  1. 动态的创建一个script标签
var script = document.createElement("script");
  1. 设置script的src,设置回调函数
script.src =  "http://localhost:3000/testAJAX?callback=abc";

检测用户名是否可用

    username:<input type="text" name="username" id=""><p></p><script>const username = document.querySelector('input')const p= document.querySelector('p')function handle(data){p.innerHTML=data.msg}username.onblur = ()=>{let data = this.valuelet script = document.createElement('script')script.src = 'http://127.0.0.1:8000/checkUsername'document.body.appendChild(script)}
app.get('/checkUsername', (req, res) => {data = {name: 'cherry',msg:'NO USE'}str = JSON.stringify(data)// script 标签发请求时 send() 返回的内容应该是js 代码res.send(`handle(${str})`)
})

在这里插入图片描述

使用jQuery 发送JSONP 请求

 $('button').eq(0).click(() => {// 这个地方要注意 使用jsonp 发送请求 Url参数必须要有callback=? 固定语法 $.getJSON('http://127.0.0.1:8000/jsonpTest?callback=?', function (data) {$('#test') .html(`name:${data.name},<br>msg:${data.msg}`)})})

(2)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", (req,res)=>{res.setHeader('Access-Control-Allow-Origin','*')res.send('hello')
}

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

流畅的python-学习笔记_序列修改+散列+切片

vector第一版 reprlib.repr用于选取有限长度较长变量 vector第二版切片 注意切片还有indices属性&#xff0c;它可以入参一个序列长度&#xff0c;根据此序列长度&#xff0c;转化不规矩的start stop stride&#xff0c; vector第三版动态存取属性 obj.attra时&#xff0c;先…

Day 46 139.单词拆分

单词拆分 给定一个非空字符串 s 和一个包含非空单词的列表 wordDict&#xff0c;判定 s 是否可以被空格拆分为一个或多个在字典中出现的单词。 说明&#xff1a; 拆分时可以重复使用字典中的单词。 你可以假设字典中没有重复的单词。 示例 1&#xff1a; 输入: s “leet…

【35分钟掌握金融风控策略26】定价策略

目录 定价策略 定价策略的开发、部署、监控和调优 定价策略开发 定价策略部署 定价策略监控 定价策略调优 定价策略 定价是对授信审批通过的客户给予合适利率的过程。如何定价、定价多少是由定价策略来决定的。定价策略的制订要遵循“收益覆盖风险”原则&#xff0c;对于…

基于Docker的JMeter分布式压测

一个JMeter实例可能无法产生足够的负载来对你的应用程序进行压力测试。如本网站所示&#xff0c;一个JMeter实例将能够控制许多其他的远程JMeter实例&#xff0c;并对你的应用程序产生更大的负载。JMeter使用Java RMI[远程方法调用]来与分布式网络中的对象进行交互。JMeter主站…

goroutine调度策略

Golang的调度器采用M:N调度模型&#xff0c;其中M代表用户级别的线程(也就是goroutine)&#xff0c;而N代表的事内核级别的线程。Go调度器的主要任务就是N个OS线程上调度M个goroutine。这种模型允许在少量的OS线程上运行大量的goroutine。 Go调度器使用了三种队列来管理gorout…

HTML常用标签-多媒体标签(图片、音频、视频)

多媒体标签 1 图片标签2 音频标签3 视频标签 1 图片标签 img(重点) 图片标签,用于在页面上引入图片 代码 <!-- src用于定义图片的连接 title用于定义鼠标悬停时显示的文字 alt用于定义图片加载失败时显示的提示文字 --> <img src"路径" title"悬停显…

考研数学|李林《880》做不动,怎么办!?看这一篇!

在考研数学的备考过程中&#xff0c;遇到难题是很常见的情况&#xff0c;尤其是当你尝试解决李林880习题集中的问题时。他以其难度和深度著称&#xff0c;旨在帮助考生深入理解数学分析的复杂概念。 如果你在解题过程中感到困难&#xff0c;这并不是你个人的问题&#xff0c;而…

办公园区建筑科技风效果(html+threejs)

办公楼科技风(Htmlthreejs) 初始化三维场景 function init() {container document.getElementById(container);camera new THREE.PerspectiveCamera(65, window.innerWidth / window.innerHeight, 0.1, 150000000);camera.position.set(550, 600, 690);scene new THREE.Sce…

【系统运维】如何查找用户账号锁定位置

【问题】AD环境下&#xff0c;经常会遇到用户账号因输错密码次数超限而被锁的情况。 如果AD环境较简单还好说&#xff0c;但如果域控很多&#xff0c;要定位用户账号被锁在哪里就有点小麻烦了&#xff0c;比如开发人员可能会频繁登录多台服务器&#xff0c;如果某台服务器缓存了…

谷歌邮箱2024最新注册教程

大家好&#xff0c;我是蓝胖子&#xff0c;今天教大家如何注册谷歌邮箱 谷歌邮箱的注册后面的用途会经常用得到 首先&#xff0c;需要魔法自行解决 第一步&#xff1a;打开谷歌官网 www.google.com 确保谷歌官网能正常打开 第二步&#xff1a;创建账号 接下来可能会遇到这…

零基础学Java第十三天之math类

Math - 数学类 1、理解 Math 类是 Java 中的一个内置类&#xff0c;它位于 java.lang 包中&#xff0c;因此无需显式导入即可使用。Math 类提供了许多用于执行基本数学运算和操作的静态方法&#xff0c;如三角函数、指数函数、对数函数、舍入函数等。由于 Math 类中的方法都是…

Day 32 shell变量及运算

一&#xff1a;变量概述 1.什么是变量 ​ 变量来源于数学&#xff0c;是计算机语言中能储存计算结果或能表示值的抽象概念 ​ 变量可以通过变量名访问&#xff0c;在指令式语言中&#xff0c;变量通常是可变的&#xff1b;在某些条件下也是不可变的 2.变量的规则 ​ 命名只…

中国的“AI四小龙”能否与OpenAI的ChatGPT一争高下?

中国的“AI 四小龙”和 OpenAI 的 ChatGPT 都在人工智能领域有一定的影响力&#xff0c;但它们在不同方面可能具有各自的优势和局限性。 中国的“AI 四小龙”指的是云从科技、商汤科技、旷视科技和依图科技。这些公司在人工智能的多个领域进行研究和开发&#xff0c;包括计算机…

kafka基础知识

kafka架构 producer -> kafka cluster(broker>topic>partition) -> consumer -> zookeeper kafka压测 kafka-producer-perf-test.sh kafka-consumer-perf-test.sh kafka日志保存位置及消息保存时间 /tpdata/client/Kafka/kafka/config/server.properties log.…

FreeRTOS 第十一章 通知

从v8.2.0版本开始&#xff0c;FreeRTOS新增了任务通知(Task Notification)功能。可以使用任务通知拉代替信号量、消息队列、事件标志等。使用任务通知效率会高些。 任务通知是一个可选的功能&#xff0c;FreeRTOS的每个任务都有一个32位的通知值。任务控制块的成员变量ulBotif…

图的表示(利用边结构描述的图来构建图结构)

#include<iostream> #include<vector> #include<map> #include<set> using namespace std;//边结构的描述 class Edge { public://边的起始节点Node from;//边的终点节点Node to;//边的权重int weight; public:Edge(Node from, Node to, int weight){t…

52岁「豹嫂」代夫尽孝送花畀奶奶被赞

歌手胡蓓蔚与「豹哥」单立文相爱28年&#xff0c;两人曾上节目分享婚姻之道&#xff0c;指婚姻最紧要有忍耐力&#xff0c;要抗拒引诱。其实除了忍耐力&#xff0c;胡蓓蔚和奶奶相处都有一套。 早前单立文带胡蓓蔚及妈妈到米芝连一星餐厅叹美食&#xff0c;庆祝奶奶89岁生日&am…

macOS Sonoma 14.5(23F79)发布

系统介绍 黑果魏叔5 月 14 日快报&#xff0c;苹果今日向 Mac 电脑用户推送了 macOS 14.5 正式版更新&#xff08;内部版本号&#xff1a;23F79 同 RC&#xff09;。这是去年 9 月发布的 macOS Sonoma 操作系统的第五次更新&#xff0c;距离上一次的 macOS Sonoma 14.4 更新已…

Mysql 隔离级别

MySQL的事务隔离级别是指在处理并发事务时&#xff0c;为保证数据的一致性和事务的独立性&#xff0c;数据库系统提供的不同级别控制策略。根据ACID特性中的隔离性&#xff08;Isolation&#xff09;&#xff0c;MySQL支持四种标准的事务隔离级别&#xff0c;每种级别有不同的并…

RustGUI学习(iced)之小部件(十):如何使用tooltip部件来制作文字提示?

前言 本专栏是学习Rust的GUI库iced的合集,将介绍iced涉及的各个小部件分别介绍,最后会汇总为一个总的程序。 iced是RustGUI中比较强大的一个,目前处于发展中(即版本可能会改变),本专栏基于版本0.12.1. 概述 这是本专栏的第十篇,主要讲述tooltip部件的使用,会结合实例来…