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年1月2日
  • 怎么做品牌推广和宣传,手把手教你如何做品牌推广方案

    在当今竞争激烈的市场环境中,品牌推广和宣传是确保企业成功的关键因素之一。有效的品牌推广可以增加品牌知名度、吸引客户、提升销售额,进而确立在消费者心目中的地位。要打造成功的品牌推广方案,需要综合运用各种…

    投稿 2024年6月2日
  • 网络直播教育平台?如何做直播教育

    在前不久,很多在线教育机构转型职业教育,很大原因是国家支持大力发展职业教育,而且很多城市考取职业教育培训证件也可以获得补贴。同时,疫情和不一的工作时间就让人们不得不寻找线上平台来学习。 在此背景下,职…

    2021年11月13日
  • 怎么样做电商销售

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

    投稿 2023年6月29日
  • 火龙果上火吗?火龙果是不是上火

    一提到冬天,大多数人能想到的字眼就是“寒冷”,“干燥”,事实也的确如此,寒冷干燥的气候,构成了冬天的主旋律,而我们长期生活在这样的环境下,身体的健康状态也悄然发生了一些变化。 估计不少朋友都有印象:每到冬…

    2022年11月28日
  • dnf很卡怎么解决?dnf玩着玩着就卡屏了

    研究了一下午,终于搞明白了dnf16g内存情况下,为啥刚开内存占用率就能达到60%,然后dnf时间开的一长,周常,团本一打,内存占用率甚至能飙到80%。“memory compression.exe”这个程序是win10系统自带内嵌的内存压缩文…

    2022年11月18日
  • 聊天记录迁移到另一个手机上后在哪里寻找?迁移后的聊天记录在哪

    很多用户更换手机之后,想要把旧手机内的微信聊天记录导入到新的手机内,但又不知道该如何操作,本期文章教大家如何使用微信自带的功能“迁移聊天记录”。 一、设置 打开手机,点击“微信”图标,进入微信的主界面。如下…

    2021年11月14日
  • 印度老电影(印度大片)

    接连看了几部印度电影,都是去年和今年上线的,2021年的《杰伊·比姆》《白虎》《较量2》,2022年的《宿敌》和《一个星期四》。尽管我也知道,能够通过口碑和算法的重重关卡,能出现在我们面前的片子,已经是优中选优…

    2022年10月5日
  • 为什么输入法不见了?输入法不见了怎么设置

    最近更新了一下电脑中的输入法,把不常用的删掉了,安装了一些新的,这一折腾不要紧,发现桌面底部的工具条上怎么没有语言栏了?按了一下键盘上的“Ctrl+Shift”切换输入法也无法调出语言栏,这可怎么办?没有语言栏怎…

    2022年10月18日
  • 显卡排名图(图形显卡天梯图)

    目前大多数的显卡都在逐渐降价,但是恢复到原价还需要一定的时间,只要产能恢复了,市场货源充足那么就离原价不远了,当然不排除疫情期间出现缺货、涨价的行情。在显卡领域中,市场通常分为NVIDIA和AMD显卡,也就是N…

    2022年10月11日