Ajax强化（二）

再学习一点

已于 2023-07-18 17:31:42 修改

阅读量77

点赞数

分类专栏： Ajax 文章标签： ajax 前端 javascript

于 2023-04-21 20:20:02 首次发布

本文链接：https://blog.csdn.net/a_xia_o/article/details/130235339

版权

Ajax 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

2.数据交换格式

2.1什么是数据交换格式

2.2XML

1.什么是XML

2.XML和HTML的区别

XML和HTML虽然都是标记语言，但是它们两者之间没有任何关系

HTML被设计用来描述网站上的内容，是网页内容的载体
XML被设计用来传输和存储数据，是数据的载体

3.XML的缺点

①XML格式臃肿，和数据无关的代码多，体积大，传输效率低

②在Javascript中解析XML比较麻烦

2.3JSON

1.什么是JSON

概念：JSON的英文全称是JavaScriptObjectNotation,即“JavaScript对象表示法”。简单来讲，JSON就是JavaScript对象和数组的字符串表示法，它使用文本表示一个JS对象或数组的信息，因此，JSON的本质是字符串。

作用：JSON是一种轻量级的文本数据交换格式，自作用上类似于XML，专门用于存储和传输数据，但是JSON比XML更小、更快、更易解析

2.JSON的两种结构

JSON就是用字符串来表示JavaScript的对象和数组。所以，JSON中包含对象和数组两种结构，通过这两种结构的相互嵌套，可以表示各种复杂的数据结构。

对象结构：对象结构在JSON中表示为{ }括起来的内容。数据结构为{key:value,key:value,....}的键值对结构。其中，key必须是使用英文的双引号包裹的字符串，value的数据类型可以是数字，字符串，布尔值，null，数组，对象。

数组结构：数组结构在JSON中表示为{ }括起来的内容。数组结构为[“java”,"javascript",30,true....]

数组中数据的类型可以是数字、字符串、布尔值、null、数组、对象6种类型

3.JSON语法注意事项

①属性名必须使用双引号包裹

②字符串类型的值必须使用双引号包裹

③JSON中不允许使用单引号表示字符串

④JSON中不能写注释

⑤JSON的最外层必须是对象或数组格式

⑥不能使用undefined或函数作为JSON的值

JSON的作用：在计算机与网络之间存储和传输数据

JSON的本质：用字符串来表示JavaScript对象数据或数组数据

4.JSON和JS对象的关系

JSON是JS对象的字符串表示法，它使用文本表示一个JS对象的信息，本质是一个字符串。例如：

5.JSON和JS对象的互转(将JSON对象转换为JS对象）

要实现从JSON字符串转换为JS对象，使用JSON.parse()方法：

编程中，parse是指将一段文本或代码解析成计算机可读的语言或数据结构

要实现JS对象转换为JSON字符串，使用JSON.stringify()方法：

var xhr = new XMLHttpRequest()
        xhr.open('GET', '请求地址')
        xhr.send()
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                console.log(xhr.responseText) //输出的是JSON字符串格式
                var result = JSON.parse(xhr.responseText)
                console.log(result)
            }
        }

6.序列化和反序列化

把数据对象转换为字符串的过程，就叫做序列化，例如：调用JSON.stringify( )函数的操作，叫做JSON序列化。

把字符串转化为数据对象的过程，叫做反序列化，例如：调用JSON.parse( )函数的操作，叫做JSON反序列化。

3.封装自己的Ajax函数

3.1要实现的效果

3.2定义options参数选项

itheima()函数是我们自定义的AJax函数，它接收一个配置对象作为参数，配置对象中可以配置如下属性：

method 请求的类型
url 请求的URL地址
data 请求携带的数据
success 请求成功之后的回调函数

3.3处理data参数

需要吧data对象，转化成查询字符串的格式，从而提交给服务器，因此提前定义resolveData函数如下：

3.4定义itheima函数

在itheima（）函数中，需要创建xhr对象，并监听onreadystatechange事件：

3.5判断请求类型

不同的请求类型，对应xhr对象的不同操作，因此需要对请求类型进行if...else...的判断：

4.XMLHttpRequest Level2的新特性

4.1认识 XMLHttpRequest Level2

1.旧版XMLHttpRequest的缺点

2. XMLHttpRequest Level2的新特性

①可以设置HTTP请求的时限

②可以使用FormData对象管理表单数据

③可以上传文件

④可以获得数据传输的进度信息3

4.2设置HTTP请求时限

有时，Ajax操作很耗时，而且无法预知要花多少时间。如果网速很慢，用户可能要等很久。新版本的XMLHttpRequest对象，增加了timeout属性，可以设置HTTP请求的时限：

xhr.timeout=3000

上面的语句，将最长等待时间设为3000毫秒。过了这个时限，就自动停止HTTP请求。与之配套的还有一个tiimeout事件，用来指定回调函数：

4.3FormData对象管理表单数据

Ajax操作往往用来提交表单数据。为了方便表单处理，HTML5新增了一个FormData对象，可以模拟表单操作：

4.4上传文件

新版XMLHttpRequest对象，不仅可以发送文本信息，还可以上传文件

实现步骤：

①定义UI结构

②验证是否选择文件

③向FormData中追加文件

④使用xhr发起上传文件的请求

⑤监听onreadystatechange事件

1.定义UI结构

2.验证是否选择了文件

3.向FormData中追加文件

4.使用xhr发起上传文件请求

5.监听onreadystatechange事件

4.5显示文件上传进度

新版本的XMLHttpRequest对象中，可以通过监听xhr.upload.onprogress事件，来获取到文件的上传进度。语法格式如下：

将进度条显示出来：

1.导入需要的库

bootstrapt

5.JQuery的高级用法

5.1jQuery时限文件上传

1.定义UI结构

2. 验证是否选择了文件

3.向FormData 中追加文件

4.使用jQuery发起上传文件的请求

<body>
    <input type="file" id="file1" />
    <button id="btnUpload">上传文件</button>

    <script>
        $(function() {
            $('#btnUpload').on('click', function() {
                //1.将jQuery对象转化为DOM对象，并获取选中的文件列表
                var files = $("#file1")[0].files
                    //2.判断是否选择了文件
                if (files.length <= 0) {
                    return alert('请选择图片后再上传！')
                }
                var fd=new FormData()
                fd.append("avatar",files[0])
                //发起jquery的Ajax请求，上传文件
                $.ajax({
                    method:'POST',
                    url:'http://www.liulongbin.top:3006/api/upload/avatar',
                    data:fd,
                    processData:false,
                    contentType:false,
                    success:function(res){
                        console.log(res)
                    }
                })
            })
        })
    </script>

5.2Jquery实现loading效果

1.ajaxStart(callback)

Ajax请求开始时，执行ajaxStart函数。可以在ajaxStart的callback中显示loading效果，示例代码如下：

//自jquery版本1.8起，该方法只能被附加到文档
$(document).ajaxStart（function（）{
$('#loading').show()
}）

注意：$(document).ajaxStart()函数会监听当前文档内所有的Ajax请求。

2.ajaxStop(callback)

Ajax请求结束时，执行ajaxStop函数。可以在ajaxStop的callback中隐藏loading效果，示例代码如下：

6.axios（导包）

6.1什么是axios

Axios是专注于网络数据请求的库。

相比于原生的AMLHttpRequest对象，axios简单易用

相比于jquery，axios更加轻量化，只专注于网络数据请求。

6.2axios发起GET请求

axios.get('url',{params:{/*参数*/}}).then(callback)

6.3axios发起POST请求

axios发起post请求的语法：

6.4直接使用axios发起请求

axios也提供了类似于jQuery中$.ajax（）的函数，语法如下：

1. 直接使用axios发起GET请求

2.直接使用axios发起POST请求

再学习一点

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Ajax强化（二）

1.什么是XML 2.XML和HTML的区别XML和HTML虽然都是标记语言，但是它们两者之间没有任何关系3.XML的缺点①XML格式臃肿，和数据无关的代码多，体积大，传输效率低②在Javascript中解析XML比较麻烦 1.什么是JSON概念：JSON的英文全称是JavaScriptObjectNotation,即“JavaScript对象表示法”。简单来讲，JSON就是JavaScript对象和数组的字符串表示法，它使用文本表示一个JS对象或数组的信息，因此，JSON的本质是字符串。作用：JSON是一
复制链接

扫一扫