ajax的原理(java入门基础知识)

一、ajax是什么?

Ajax 全称:asynchronous javascript and XML(异步javascript 和XML)。异步:向服务器发送请求,在等待响应的过程中,浏览器可以做自己的事情,等到成功获取响应后,浏览器才开始处理响应的数据。XML:可扩展标记语言,前后端通信时,传输数据的一种格式。

Ajax是前后端通信时一种异步通信工具。常用在网站注册检索,搜索提示等,可以不重新加载整个页面,只对页面的某部分进行更新的情况。

二、ajax的基本用法

1、创建xhr实例对象。const xhr =new XMLHttpRequest()。XMLHttpRequest,是一个构造函数,ajax实现浏览器与服务器之间异步通信的必要工具。

2、监听事件,处理响应。

xhr.onreadystatechange=()=>{

if (xhr.readyState!=4) return;

if((xhr.status>=200&&xhr.status<300)||xhr.status===304){

console.log(xhr.response)

}

}

Readystatechang:可以监听到readyState的状态变化,readyState的值:0-4。0:未初始化,尚未调用open()。1:启动。已经调用open(),还未调用send()。2:发送。已经调用send,还未收到响应。3:接收。已经收到部分响应。4:完成。已经收到全部响应,可以使用了。status:http状态码。

3。准备发送请求

xhr.open( “http方法”,“地址”,“true(是否异步)”)

4、发送请求

Xhr.send(数据)。携带的数据通过请求体发送,所以post方法可以发送数据,get请求不能发送数据。

三、json数据格式(Xhr.send(数据))

json:javascript object notation,前后端通信中的一种数据格式。json有三种形式,每一种形式都与js数据格式很像,,可以轻松的与js中的数据实现转换,通过json的转换,前后端通信时数据才能更好的识别。

Json储存在以.json为后缀的文件中。json的三种形式:1.简单值形式:数字,字符串,布尔值,null。2.对象形式:{ “name”:“张三”,”age”:18 }。3.数组形式:【1,“aaa”,null, true 】。注意:json中只要涉及到字符串都必须使用双引号,所有形式中,不包括undefined。

Json常用的方法

JSON.parse( ):将json格式的字符串解析成js中对应的值。

JSON.stringify( ):将js中的基本数据类型,对象,数组转化成json格式的字符串。

四、跨域请求(xhr.open( “http方法”,“地址”,“true(是否异步)”))

什么是跨域?https:(协议)www.imooc.com( 域名 ):443(端口号)/course/list(路径)。协议,域名,端口号,任何一个不一样就是不同域。

使用JSONP实现跨域。原理:Script标签跨域不会被浏览器阻止,JSONP主要就是利用script标签,加载跨域文件。

具体过程:

1.服务器端准备好JSONP接口。如:
https://www.imooc.com/api/http/jsonp?callback=handleResponse

2.加载JSONP接口

<script src=“https://www.imooc.com/api/http/jsonp?callback=handleResponse”></script>

3、声明函数

Const handleResponse=data=>{

console.log( data)

}

五、XMLHttpRequest对象(创建xhr实例对象:const xhr =new XMLHttpRequest())

1.XMLHttpRequest属性

⭐️responseText和response:响应的数据。

⭐️timeoout属性:设置请求的最长时间,单位是ms,毫秒。

2、XMLHttpRequest方法

Abort()方法:终止当前请求,一般配合XMLHttpRequest.abort()事件使用。

setRequestHeader( )方法:设置请求头信息。用法:xhr.setRequestHeader( 头部字段名称,头部字段的值 )。例:xhr.setRequestHeader(“Content-Type”,”application/json” ),xhr.send(JSON.stringify({ username:”Alex”,age:18}))。Content-Type:告诉服务器,浏览器发送的数据是什么格式的。

3、XMLHttpRequest事件

Load事件:响应数据可用时触发,可代替xhr.status==4

Error事件:请求发生错误时触发。

abort事件:调用abort()方法时触发。

Timeout事件:请求超时时触发。

原创文章,作者:跳跳,如若转载,请注明出处:https://ziliaobaba.com/1920.html

(0)
跳跳跳跳
上一篇 2021年11月2日 15:26
下一篇 2021年11月2日 15:35

相关推荐

  • 什么是起司猫?起司猫的特征

    大家日常生活中说到猫咪时,很可能都听过“起司猫”这个称呼吧。“起司猫”听起来就给我们一种非常甜美、非常可爱的印象!起司猫的品种其实是美国短毛猫哦!也就是大家平常说的美短,最常见的美短是黑色虎斑纹的,但其实…

    2022年11月17日
  • wap是一种什么技术?wap技术

    无线应用协议。无线应用协议(WAP)是开展移动电子商务的核心技术之一。通过WAP,手机可以随时随地、方便快捷地接入互联网,真正实现不受时间和地域约束的移动电子商务。WAP是一种通信协议,它的提出和发展是基于在…

    2022年10月15日
  • 暗黑三为什么不更新了?暗黑三更新

    发布《暗黑破坏神3》第27赛季“圣光呼唤”预览,介绍了赛季主题、奖励,以及从2.7.4 PTR到现在的平衡性变动。第27赛季“圣光的呼唤”将在8月26日下午5点(服务器时间)展开。 第27 赛季主题 为了在圣光与黑暗的战争中扭转…

    2022年11月8日
  • steam账号名称是邮箱吗

    Steam账号名称是邮箱吗? 一、Steam账号的概念 Steam是一个由Valve Corporation开发的全球最大的数字游戏发行平台,它拥有超过3000万活跃用户,拥有众多热门游戏,包括《反恐精英》、《DOTA2》、《CSGO》等。Steam账…

    投稿 2023年3月19日
  • 空调制热和电辅热区别

    空调制热和电辅热的区别 ==================== 空调制热和电辅热是家庭中常见的两种采暖方式,它们有着明显的区别。下面我们就来深入了解一下它们之间的区别。 ## 空调制热 空调制热是指利用空调的制冷功能,将室内…

    投稿 2023年6月28日
  • 卡梭尔手表是什么档次?卡梭手表是杂牌嘛

    腕表本身没有定式,每一个男人都有自己的偏好,都需要一块适合自己的腕表。一个人的穿搭往往会反映出很多细节,腕表作为男性引领时尚潮流的风向标,或商务或休闲或运动,凸显出佩戴者的生活态度。卡梭手表,是这两年…

    2022年10月14日
  • 四十岁女人做什么生意

    四十岁的女人,在职场上有着不可忽视的地位,她们拥有丰富的经验,更有着独特的视角,可以把握时机,把握机遇,把握趋势,把握未来。因此,四十岁的女人在做生意方面也有着不可忽视的优势。 一、把握时机 四十岁的女…

    投稿 2023年7月12日
  • 微信亲密付怎么开通?微信亲密付消费

    那么大家听过双十一最帅的一句话是什么?没错!!就是“刷我滴卡”! 很多尾款人可能没注意,就在双十一前一天,微信支付正式升级了亲属卡功能,新增“其他亲人”选项。 真是一人派发,全家有份! 大家都清楚,以往微信里…

    2021年11月13日
  • 魔兽世界战斗宠物训练师在哪?魔兽世界宠物对战训练师攻略

    但是怀旧服的猎人宠物机制这一块和正式服差别特别大,导致很多没玩过怀旧服的玩家,对于猎人宠物技能和宠物训练点这一块一头雾水。这期小编总结了新人朋友经常遇到的各种问题,然后进行一一解答,赶紧收藏吧! 本篇…

    2022年11月18日
  • 创新思维的特征是什么?创新思维的特点具体有哪些

    创造性思维是指有创见的思维,即通过思维不仅能揭示客观事物的本质及内在联系,而且要在此基础上产生新颖的、前所未有的思维成果。在创造性思维中起主要作用的是非逻辑思维形式、如想象、灵感、直觉思维等。 创造性…

    投稿 2022年11月18日