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年10月17日
  • 赛尔号丽莎布布什么特性最好?赛尔号丽莎布布配招

    暗黑心魔·克梅纳 一、精灵介绍 赛尔号2013年,宇宙旅行团回归第二弹时登场的精灵。上期我们介绍过赛尔号的宇宙旅行团成员,想要挑战和获得克梅纳,我方必须携带精灵依兰特斯、格鲁斯特、艾迪斯诺、布鲁卡卡、狂暴电…

    2022年10月21日
  • 怎么样做电商销售

    怎样做电商销售 电商销售是当今社会最受欢迎的营销方式之一,它可以让您轻松地将产品和服务推广到全球市场,从而获得更多的收入。然而,要成功地进行电商销售,您需要掌握一些基本技能,以便更好地利用电子商务的优…

    投稿 2023年6月29日
  • 莱克吸尘器和戴森吸尘器哪个好(莱克吸尘器怎么样)

    又到了毛孩子疯狂掉毛的季节了,弥漫在空气中的零碎毛发仿佛一个个隐藏炸弹,一不小心就会被瞬间引爆,开启喷嚏模式。如何保障自己和家人的生活环境?无线吸尘器显然是最佳辅助工具。在无线吸

    2022年1月3日
  • lol上单英雄(lol上单solo最强英雄)

    英雄分为前中后期,对线分为上中下野区,那么,召唤师的实力差距也分高端局和低端局。我只是说得比较直白,大家不要介意,总归一点就是大家在玩游戏,千万不要让游戏玩你,懂了吧? 我的意思就是,不管是高端局还是…

    2022年10月11日
  • 凉粉怎么做?煮白凉粉的正确方法

    今天和大家分享的是一道夏季必备的凉拌菜——凉粉的制作方法。每当天热没有食欲的时候来一碗凉拌凉粉,清凉爽口特别的开胃又下饭,而且爽嫩有弹性特别的美味。相信大部分人吃到的凉粉都是从外面买来的,基本上都不太会…

    2022年12月3日
  • 紫色怎么调出来的

    紫色是一种非常神秘的颜色,它可以表达出许多不同的情绪,从悲伤到激情,从宁静到激动,紫

    投稿 2023年3月1日
  • 18年大众lavida外拉手怎么拆?拆外拉手

    随着社会的发展,汽车则是一种既上档次又实用的代步工具了。一辆汽车的组成也是复杂多样,汽车门把手就是汽车的组成部分之一。那么,汽车门把手有哪些类型呢?它们都各具有什么特点?当我们想要更换一个汽车门把手,…

    2021年11月15日
  • 杜鹃花的养殖方法推荐(杜鹃花的介绍)

    杜鹃花形秀美,花色丰富,一直以来深受广大花友们喜爱。但是有很多都说杜鹃比较难养,基本上买回来开花后就开始黄叶、落叶,最后整株出现枯萎。出现这些情况也基本和日常的养护方法不当有关。下面就来谈一下杜鹃的养…

    2022年11月16日
  • excel打勾(excel打勾的方框怎么删)

    表格中我们经常会看到许多"√"的设置,通过"√"可以将我们需要的数据进行选中。勾选操作有一种特殊的方式,那就是一键全选。今天我们就来学习,如何利用"√"进行一键全选设置。如图所示,我们通过最上方的按钮,勾选或者取消勾选后,可以实现

    2022年1月4日