【Javascript】ajax(阿甲克斯)

目录

什么是ajax?

同步与异步

原理

注意

写一个ajax请求 

创建ajax对象

设置请求方式和地址

发送请求

设置响应HTTP请求状态变化的函数


什么是ajax?

是基于javascript的一种用于创建快速动态网页的技术,是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术,主要用来在前端页面中向服务器后端请求数据。

以前的ajax:

前后端不分离(前后端写在一起),后端返回整个html 

每次更新⼀些数据,他都会整个⽹⻚刷新

现在的ajax:

ajax帮助我们向服务器发异步请求

同步与异步

事件A,事件B

同步: 完成了A事件才能去处理B事件

异步:在事件A进行中可以进行B事件

原理

通过XmlHttpRequest对象向服务器发异步请求,从服务器获取数据

然后通过js来操作DOM⽽更新⻚⾯

它是在 IE5 中⾸先引⼊的,是⼀种⽀持异步请求的技术

简单的说,也就是 javascript 可以及时向服务器提出请求和处理响应,⽽不阻塞程序运行,达到⽆刷新的效果

注意

JavaScript是单线程的,会阻塞代码运⾏,所以引⼊XmlHttpRequest请求处理异步数据

console.log(1);
console.log(2);
console.log(3);
alert(6);
console.log(4);

4没有打印出来,因为同一个时间只能做同一件事。

当我们点击确定的时候,才能打印出4

 

避免上述的阻塞, 引⼊XmlHttpRequest请求处理异步数据

onsole.log(1);
console.log(2);
console.log(3);
setTimeout(function (){console.log(6);
},4000)
console.log(5);

 setTimeout(function (){
    console.log(6);
},4000)

4秒之后打印6

这里的5不用等setTimeout处理完再打印出来

经过4秒之后

 

写一个ajax请求 

创建ajax对象

var aif(window.XMLHttpRequest){a=XMLHttpRequest;}else{a=new ActiveXObject("Microsoft.XML HTTP");}

首先判断当前的环境下的window全局下有没有 XMLHttpRequest

设置请求方式和地址

 a.open('GET',"http://localhost:xxx");

或 

  a.open('POST',"http://localhost:xxx");

发送请求

  a.send()

设置响应HTTP请求状态变化的函数

/* 
注册事件。 onreadystatechange事件,状态改变时就会调用。
如果要在数据完整请求回来的时候才调用,我们需要手动写一些判断的逻辑。
*/
xhr.onreadystatechange = function () {
  // 为了保证数据完整返回,我们一般会判断两个值
  if (xhr.readyState === 1 && xhr.status === 200) {
    alert(xhr.responseText);
  } else {
    alert('出错了,Err:' + xhr.status);
  }
};

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

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

相关文章

计算机网络【CN】IPV4报文格式

版本(4bit):IPV4/IPV6首部长度(4bit):标识首部的长度 单位是4B最小为:20B最大为:60(15*4)B总长度(16bit):整个数据报&…

vue使用smooth-signature实现移动端电子签字,包括横竖屏

vue使用smooth-signature实现移动端电子签字&#xff0c;包括横竖屏 1.使用smooth-signature npm install --save smooth-signature二.页面引入插件 import SmoothSignature from "smooth-signature";三.实现效果 四.完整代码 <template><div class&quo…

LVS集群-DR模式

概念&#xff1a; LVS-DR模式&#xff0c;也是最常用的lVS负载方式&#xff0c;DR DIRECT ROUTING 直接路由模式 负载均衡器lVS调度器&#xff0c;只负责请求和转发到后端的真实服务器&#xff0c;但是影响结果&#xff0c;由后端服务器直接转发给客户端&#xff0c;不需要经…

2023年第四届MathorCup大数据竞赛(A题)|坑洼道路检测和识别|数学建模完整代码+建模过程全解全析

当大家面临着复杂的数学建模问题时&#xff0c;你是否曾经感到茫然无措&#xff1f;作为2021年美国大学生数学建模比赛的O奖得主&#xff0c;我为大家提供了一套优秀的解题思路&#xff0c;让你轻松应对各种难题。 希望这些想法对大家的做题有一定的启发和借鉴意义。 让我们来…

LLM系列 | 22 : Code Llama实战(下篇):本地部署、量化及GPT-4对比

引言 模型简介 依赖安装 模型inference 代码补全 4-bit版模型 代码填充 指令编码 Code Llama vs ChatGPT vs GPT4 小结 引言 青山隐隐水迢迢&#xff0c;秋尽江南草未凋。 小伙伴们好&#xff0c;我是《小窗幽记机器学习》的小编&#xff1a;卖热干面的小女孩。紧接…

微信小程序设计之主体文件app-ts/js

一、新建一个项目 首先&#xff0c;下载微信小程序开发工具&#xff0c;具体下载方式可以参考文章《微信小程序开发者工具下载》。 然后&#xff0c;注册小程序账号&#xff0c;具体注册方法&#xff0c;可以参考文章《微信小程序个人账号申请和配置详细教程》。 在得到了测…

新的iLeakage攻击从Apple Safari窃取电子邮件和密码

图片 导语&#xff1a;学术研究人员开发出一种新的推测性侧信道攻击&#xff0c;名为iLeakage&#xff0c;可在所有最新的Apple设备上运行&#xff0c;并从Safari浏览器中提取敏感信息。 攻击概述 iLeakage是一种新型的推测性执行攻击&#xff0c;针对的是Apple Silicon CPU和…

简单了解一下:NodeJS的WebSocket网络编程

NodeJS的webSocket网络编程。 那什么是WebSocket呢&#xff1f;WebSocket是HTML5提供的一种浏览器和服务器进行通信的网络技术。两者之间&#xff0c;只需要做一个握手动作&#xff0c;就可以在浏览器和服务器之间开启一条通道&#xff0c;就可以进行数据相互传输。 实现WebS…

c++的4中类型转换操作符(static_cast,reinterpret_cast,dynamic_cast,const_cast),RTTI

目录 引入 介绍 static_cast 介绍 使用 reinterpret_cast 介绍 使用 const_cast 介绍 使用 dynamic_cast 介绍 使用 RTTI(运行时确定类型) 介绍 typeid运算符 dynamic_cast运算符 type_info类 引入 原本在c中,我们就已经接触到了很多类型转换 -- 隐式类型转…

线程安全问题

线程安全 简单来说&#xff0c;在多个线程访问某个方法或者对象的时候&#xff0c;不管通过任何的方式调用以及线程如何去交替执行。在程序中不做任何同步干预操作的情况下&#xff0c;这个方法或者对象的执行/修改都能按照预期的结果来反馈&#xff0c;那么这个类就是线程安全…

YOLOv7优化:感受野注意力卷积运算(RFAConv),效果秒杀CBAM和CA等 | 即插即用系列

💡💡💡本文改进:感受野注意力卷积运算(RFAConv),解决卷积块注意力模块(CBAM)和协调注意力模块(CA)只关注空间特征,不能完全解决卷积核参数共享的问题 提供多种卷积变体供使用:CBAMConv,CAMConv,CAConv,RFAConv,RFCAConv RFAConv | 亲测在多个数据集能够实现…

buuctf_练[CISCN2019 华东南赛区]Web4

[CISCN2019 华东南赛区]Web4 文章目录 [CISCN2019 华东南赛区]Web4掌握知识解题思路代码分析正式解题 关键paylaod 掌握知识 ​ 根据url地址传参结构来判断php后端还是python后端&#xff1b;uuid.getnode()函数的了解&#xff0c;可以返回主机MAC地址十六进制&#xff1b;pyt…

Golang 自定义函数库(个人笔记)

1.用字符串连接切片元素&#xff08;类似php implode&#xff09; package mainimport ("fmt""strconv""strings" )func main() {data : []int{104, 101, 108, 108, 111}fmt.Println(IntSliceToString(data, ",")) }func IntSliceToS…

汽车4S店如何在数字化管理下,提高市场竞争力

在所有人都认为疫情过后&#xff0c;经济形势会一路向阳&#xff0c;但是&#xff0c;实际情况出乎所有人的意料&#xff0c;各行各业举步维艰。 新闻爆出的各大房地产&#xff0c;恒大的2.4万亿让人瞠目结舌&#xff0c;还有碧桂园和融创&#xff0c;也是债台高筑了&#xff…

ToLua使用原生C#List和Dictionary

ToLua是使用原生C#List 介绍Lua中使用原生ListC#调用luaLua中操作打印测试如下 Lua中使用原生DictionaryC#调用luaLua中操作打印测试如下 介绍 当你用ToLua时C#和Lua之间肯定是会互相调用的&#xff0c;那么lua里面使用List和Dictionary肯定是必然的&#xff0c;在C#中可以调用…

shell的执行流控制

目录 1.for语句 2.条件语句 while...do语句 until...do 语句 if...then...elif...then...else...fi 语句 3.case语句 4.expect 5.break,continue,exit 1.for语句 作用&#xff1a;为循环执行动作 for语句结构 for //定义变量 do //使用变量&#xff0…

python+requests+unittest执行自动化接口测试!

1、安装requests、xlrd、json、unittest库 <1>pip 命令安装&#xff1a; pip install requests pip install xlrd pip install json pip install unittest <2> pycharm里安装 2、利用Page Object Model 设计理念创建六类Python Package(也可根据项目要求具体实施…

企业安全—DevSecOps概述详情

0x00 前言 SDL存在的问题在于体量过于庞大&#xff0c;不利于快速进行适配和进行&#xff0c;所以就有了DevSecOps&#xff0c;实际上是因为敏捷开发也就是DevOps的推进&#xff0c;并且坐上了云服务模式的火车&#xff0c;所以这一系列的东西都开始普及。DevSecOps作为DevOps…

什么是蓝桥杯?什么是蓝桥STEMA考试?

第十五届蓝桥大赛赛事安排? STEMA考试11月(考试时间11月26日) STEMA考试1月(2024年1月) STEMA考试3月(2024年3月) 第十五届蓝桥杯省赛(2024年4月待定) 第十五届蓝桥杯国赛(2024年5月待定) 注:以上时间具体以组委会官方发布为准。 01.蓝桥杯 蓝桥杯全国软件和…

强化学习------PPO算法

目录 简介一、PPO原理1、由On-policy 转化为Off-policy2、Importance Sampling&#xff08;重要性采样&#xff09;3、off-policy下的梯度公式推导 二、PPO算法两种形式1、PPO-Penalty2、PPO-Clip 三、PPO算法实战四、参考 简介 PPO 算法之所以被提出&#xff0c;根本原因在于…