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

相关推荐

  • 海参是补什么的?海参的功效与作用

    我们都知道海参的营养价值很高,既是美食佳肴、又有滋补疗效,可谓是不可多得的天然食材。其在各类山珍海味中位尊"八珍之首"。 海参:全球有900多种,我国约140种。我国海参分布在温带区和热带区,温带区主要在黄渤…

    2022年12月3日
  • 双系统删除一个后怎么修复

    前段时间我们学会了用云骑士安装双系统教程,部分用户在安装完后,由于电脑配置差异,装上双系统后电脑经常卡顿,想要重装回单系统却不知道该怎么解决。所以今天小编教给你们一个超简单双系统还原单系统教程。 注:…

    2023年1月20日
  • 蜗牛吃什么?蜗牛食物介绍

    蜗牛属于软体动物,并不是生物学上一个分类的名称,一般是指腹足纲的陆生所有种类,包括许多不同科、属的动物,取食植物,产卵于土中或者树上,在热带岛屿比较常见,但有的也生存在寒冷地区,下面我们就一起来看一看…

    2022年11月23日
  • 微信红包怎么提现到银行卡?微信如何免费转到银行卡

      大家好,我是金芒美食,今天来给大家分享一个关于微信转账的小妙招。平常我们使用微信转账的时候,大多数都是进行扫码转账,但是如果我们的朋友没有空或者没有他的收款二维码的话,我们是无法转账的。  …

    2022年11月16日
  • 已完结网络小说大神巅峰之作(人气最高的网络小说)

    1.《遮天》——辰东(完本)   “冰冷与黑暗并存的宇宙深处,九具庞大的龙尸拉着一口青铜古棺,亘古长存。 这是太空探测器在枯寂的宇宙中捕捉到的一幅极其震撼的画面。九龙拉棺,究竟是回到了上古,还是来到了星空…

    2022年10月2日
  • 10部必看的迪士尼动画电影

    迪士尼动画电影是当今世界最富盛名的电影类型之一。自1937年经典动画片《白雪公主》问世以来,迪士尼工作室不断推出令人叹为观止的佳作,演绎着无数动人的故事,引领着动画艺术的不断进步。从儿时最喜欢的公主故事,到…

    投稿 2024年5月27日
  • 怎么免费设置定位店铺位置

    如何免费设置定位店铺位置 随着科技的发展,定位店铺位置已经成为一种日常的需求,它可以帮助商家获得更多的客户,同时也可以让客户更加方便地找到他们想要的店铺。本文将介绍如何免费设置定位店铺位置,帮助商家和…

    投稿 2023年7月2日
  • 十大故事片怀旧老电影-末代皇帝上榜(制作精良值得一看)

    三个世纪以来,电影作为艺术形式一直在不断发展与变革。许多经典老电影已经成为影响几代人的重要文化遗产。这些作品不仅在艺术表达上独树一帜,更凝聚了人类探索生命意义、探讨社会主题的智慧结晶。本文评选出十部代表…

    投稿 2024年5月27日
  • 鱼汤怎么做好吃?鱼汤要熬多长时间

    炖鱼汤时,不要直接煎或炖,教你3个技巧,鱼汤浓白鲜美,无腥味 意味着寒冷的天气就要来临了,对于抵抗力差的孩子和老人,切记要多穿点衣服,而且不要轻易脱衣服,不然很容易受凉。   除了穿衣要合适,还可以通…

    2022年11月30日
  • 开什么实体店好?自己创业开个小店好

    实话实说,现在社会上的实体店项目,倒闭关门的很多,还有一些正在经营的也是举步维艰。回答这个粉丝的问题,现在社会上的实体店,有哪些项目生意好做一些呢?我这里推荐这几个,仅供作为市场调研参考。 药店 社会上…

    2021年11月6日