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

相关推荐

  • 女生开大众高尔夫怎么样

    女生开大众高尔夫:一种自由自在的体验 大众高尔夫是一种普及性很强的运动,它可以让人们在放松的同时,也能锻炼身体,尤其是女性。女性开大众高尔夫,不仅可以放松身心,还可以让她们获得自由自在的体验。 一、放松…

    投稿 2023年7月7日
  • 骑士十五世最新款

    网友在辽宁省大连市偶遇了一辆很特别的车,价值不菲的骑士十五世防弹车。骑士十五世比劳斯莱斯幻影贵,而且保有量特别少,能见到是一种缘分。 骑士十五世是由加拿大多伦多汽车厂商Conquest Vehicles制造的超豪华装甲…

    2022年11月9日
  • 青年节是什么节日?青年节的来历

    无论过去、现在还是未来,中国青年始终是实现中华民族伟大复兴的先锋力量。今天是五四青年节,祝愿每一位青年节日快乐!那么这个节日有着怎样的历史由来? 五四青年节源于中国1919年反帝爱国的“五四运动”,是为了纪…

    2022年11月22日
  • 为什么睡觉流口水?每天晚上睡觉都流口水

    很多人似乎存在误区,觉得睡觉时流口水是小问题,尤其是睡得特别香,持续处于深度睡眠状态,也会不知不觉流口水。 特别是小孩子流口水,看起来还非常的可爱,但是实际上经常性的流口水,可能是身体出现了问题,一部…

    2022年11月29日
  • 投影仪怎么用手机投屏?投影仪 手机投屏

    相信很多人跟我一样平常喜欢看一些韩剧或者玩游戏的时候投屏,但是很多人都是不会投屏的,那么投影仪怎么用手机去投屏呢? 我们这里用当贝X3投影仪举例怎么投屏 一、安卓手机通用教程 1、首先我们要保证投影设备是跟…

    2022年12月11日
  • 性能好的笔记本电脑排行2022(高端笔记本电脑)

    1、惠普 ZBook Studio G5 最佳建筑师移动工作站   ZBook 系列长期以来一直是移动工作站的领跑者,而 ZBook Studio 型号被惠普吹捧为“世界上同尺寸最强大的工作站”。G5 型号是功能最强大的机器之一。 其英特尔酷…

    2022年11月9日
  • 黑芝麻丸哪个牌子好 四大最正宗的黑芝麻丸品牌

    在众多黑芝麻丸品牌中,选择最优质、最正宗的成为许多消费者的追求。凭借着其独特口感、丰富营养和历史悠久的传统,黑芝麻丸在市场上备受瞩目。下面将为您介绍四大最正宗的黑芝麻丸品牌,从品质、口感、知名度等方面…

    投稿 2024年6月2日
  • 联想台式机一键恢复怎么弄?lenovo一键还原

    联想电脑在目前市场上来说是特别畅销的,它的总体性能是不错的,质量也是比较有保证的,那么,今天,小编为大家介绍一下联想电脑的一键还原功能及使用方法。希望大家可以深入了解,同时也希望大家可以掌握学会一键还…

    2022年11月21日
  • 网络监控录像机安装(远程网络监控接入录像机)

    监控一直是弱电行业中的一个大类,我们弱电VIP群中每天讨论大部分问题也与监控有关,有很多的朋友对监控的安装有

    2022年1月2日
  • 诛仙3职业(诛仙3职业输出排名)

    只说我了解的职业。【人族】1.青云:装备细节做到位打架不弱,群战刷屏机器之一。中低端的号算是被完美遗弃了,技能设计过于陈旧,最低的攻击频率,无药可治,好在掌握

    投稿 2022年1月2日