jquery ajax传xml,Ajax-day-03(XML的基本使用、xhr对象,数据交换格式、json数据、Jquery实现文件上传)...

XMLHttpRequest的基本使用

什么XMLHttpRequest

XMLHttpRequest(简称 xhr)是浏览器提供的 Javascript 对象,通过它,可以请求服务器上的数据资源。之前所学的 jQuery 中的 Ajax 函数,就是基于 xhr 对象封装出来的

jquery ajax传xml,Ajax-day-03(XML的基本使用、xhr对象,数据交换格式、json数据、Jquery实现文件上传)..._第1张图片

image.png

使用xhr发起GET请求

步骤

创建 xhr 对象

调用 xhr.open() 函数

调用 xhr.send() 函数

监听 xhr.onreadystatechange 事件

// 1. 创建 XHR 对象

var xhr = new XMLHttpRequest()

// 2. 调用 open 函数

xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks')

// 3. 调用 send 函数

xhr.send()

// 4. 监听 onreadystatechange 事件

xhr.onreadystatechange = function () {

if (xhr.readyState === 4 && xhr.status === 200) {

// 获取服务器响应的数据

console.log(xhr.responseText)

}

}

了解xhr对象的readyState属性

XMLHttpRequest 对象的 readyState 属性,用来表示当前 Ajax 请求所处的状态。每个 Ajax 请求必然处于以下状态中的一个:

jquery ajax传xml,Ajax-day-03(XML的基本使用、xhr对象,数据交换格式、json数据、Jquery实现文件上传)..._第2张图片

image.png

使用xhr发起带参数的GET请求

使用 xhr 对象发起带参数的 GET 请求时,只需在调用 xhr.open 期间,为 URL 地址指定参数即可:

68d0935fcf95b06a8ce79643b7085f7e.png

image.png

这种在 URL 地址后面拼接的参数,叫做

查询字符串。

var xhr = new XMLHttpRequest()

xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks?id=1')

xhr.send()

xhr.onreadystatechange = function () {

if (xhr.readyState === 4 && xhr.status === 200) {

console.log(xhr.responseText)

}

}

查询字符串

什么是查询字符串

定义:查询字符串(URL 参数)是指在 URL 的末尾加上用于向服务器发送信息的字符串(变量)。

格式:将英文的 ? 放在URL 的末尾,然后再加上 参数=值 ,想加上多个参数的话,使用 & 符号进行分隔。以这个形式,可以将想要发送给服务器的数据添加到 URL 中。

jquery ajax传xml,Ajax-day-03(XML的基本使用、xhr对象,数据交换格式、json数据、Jquery实现文件上传)..._第3张图片

image.png

GET请求携带参数的本质

无论使用 .get(),又或者直接使用 xhr 对象发起 GET 请求,当需要携带参数的时候,本质上,都是直接将参数以查询字符串的形式,追加到 URL 地址的后面,发送到服务器的。

jquery ajax传xml,Ajax-day-03(XML的基本使用、xhr对象,数据交换格式、json数据、Jquery实现文件上传)..._第4张图片

image.png

URL编码与解码

什么是URL编码

URL 地址中,只允许出现英文相关的字母、标点符号、数字,因此,在 URL 地址中不允许出现中文字符。如果 URL 中需要包含中文这样的字符,则必须对中文字符进行编码(转义)。

URL编码的原则:使用安全的字符(没有特殊用途或者特殊意义的可打印字符)去表示那些不安全的字符。

URL编码原则的通俗理解:使用英文字符去表示非英文字符

50e04d6c55579212b1288dc2de3c9b36.png

image.png

如何对URL进行编码与解码

浏览器提供了 URL 编码与解码的 API,分别是:

encodeURI() 编码的函数

decodeURI() 解码的函数

jquery ajax传xml,Ajax-day-03(XML的基本使用、xhr对象,数据交换格式、json数据、Jquery实现文件上传)..._第5张图片

image.png

使用xhr发起POST请求

步骤

创建 xhr 对象

调用 xhr.open() 函数

设置 Content-Type 属性(固定写法)

调用 xhr.send() 函数,同时指定要发送的数据

监听 xhr.onreadystatechange 事件

// 1. 创建 xhr 对象

var xhr = new XMLHttpRequest()

// 2. 调用 open 函数

xhr.open('POST', 'http://www.liulongbin.top:3006/api/addbook')

// 3. 设置 Content-Type 属性(固定写法)

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')

// 4. 调用 send 函数

xhr.send('bookname=水浒传&author=施耐庵&publisher=上海图书出版社')

// 5. 监听事件

xhr.onreadystatechange = function () {

if (xhr.readyState === 4 && xhr.status === 200) {

console.log(xhr.responseText)

}

}

数据交换格式

什么是数据交换格式

数据交换格式,就是服务器端与客户端之间进行数据传输与交换的格式

前端领域,经常提及的两种数据交换格式分别是 XML 和 JSON。其中 XML 用的非常少,所以,我们重点要学习的数据交换格式就是 JSON

jquery ajax传xml,Ajax-day-03(XML的基本使用、xhr对象,数据交换格式、json数据、Jquery实现文件上传)..._第6张图片

image.png

XML

什么是XML

XML 的英文全称是 EXtensible Markup Language,即可扩展标记语言。因此,XML 和 HTML 类似,也是一种标记语言。

jquery ajax传xml,Ajax-day-03(XML的基本使用、xhr对象,数据交换格式、json数据、Jquery实现文件上传)..._第7张图片

image.png

XML和HTML的区别

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

HTML 被设计用来描述网页上的内容,是网页内容的载体

XML 被设计用来传输和存储数据,是数据的载体

jquery ajax传xml,Ajax-day-03(XML的基本使用、xhr对象,数据交换格式、json数据、Jquery实现文件上传)..._第8张图片

image.png

XML的缺点

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

在 Javascript 中解析 XML 比较麻烦

JSON(⭐⭐⭐)

什么是JSON

概念:JSON 的英文全称是 JavaScript Object Notation,即“JavaScript 对象表示法”。简单来讲,

JSON 就是 Javascript 对象和数组的字符串表示法,它使用文本表示一个 JS 对象或数组的信息,因此,

JSON 的本质是字符串。

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

现状:JSON 是在 2001 年开始被推广和使用的数据格式,到现今为止,JSON 已经成为了主流的数据交换格式

JSON的两种结构

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

对象结构

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

jquery ajax传xml,Ajax-day-03(XML的基本使用、xhr对象,数据交换格式、json数据、Jquery实现文件上传)..._第9张图片

image.png

数组结构

数组结构在 JSON 中表示为 [ ] 括起来的内容。数据结构为 [ "java", "javascript", 30, true … ] 。数组中数据的类型可以是数字、字符串、布尔值、null、数组、对象6种类型。

jquery ajax传xml,Ajax-day-03(XML的基本使用、xhr对象,数据交换格式、json数据、Jquery实现文件上传)..._第10张图片

image.png

JSON语法注意事项

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

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

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

④ JSON 中不能写注释

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

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

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

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

JSON和JS对象的关系

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

jquery ajax传xml,Ajax-day-03(XML的基本使用、xhr对象,数据交换格式、json数据、Jquery实现文件上传)..._第11张图片

image.png

JSON和JS对象的互转

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

de76845e95584351a1d9a04bea0eda29.png

image.png

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

51fa14ecc17741c9fc0239014d14e66d.png

image.png

应用场景

var xhr = new XMLHttpRequest()

xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks')

xhr.send()

xhr.onreadystatechange = function () {

if (xhr.readyState === 4 && xhr.status === 200) {

console.log(xhr.responseText)

console.log(typeof xhr.responseText)

var result = JSON.parse(xhr.responseText)

console.log(result)

}

}

序列化和反序列化

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

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

jQuery高级用法- jQuery实现文件上传

定义UI结构

上传

验证是否选择了文件

$('#btnUpload').on('click', function() {

// 1. 将 jQuery 对象转化为 DOM 对象,并获取选中的文件列表

var files = $('#file1')[0].files

// 2. 判断是否选择了文件

if (files.length <= 0) {

return alert('请选择图片后再上传!‘)

}

})

向FormData中追加文件

// 向 FormData 中追加文件

var fd = new FormData()

fd.append('avatar', files[0])

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

$.ajax({

method: 'POST',

url: 'http://www.liulongbin.top:3006/api/upload/avatar',

data: fd,

// 不修改 Content-Type 属性,使用 FormData 默认的 Content-Type 值

contentType: false,

// 不对 FormData 中的数据进行 url 编码,而是将 FormData 数据原样发送到服务器

processData: false,

success: function(res) {

console.log(res)

}

})

jQuery实现loading效果

ajaxStart(callback)

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

// 自 jQuery 版本 1.8 起,该方法只能被附加到文档

$(document).ajaxStart(function() {

$('#loading').show()

})

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

ajaxStop(callback)

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

// 自 jQuery 版本 1.8 起,该方法只能被附加到文档

$(document).ajaxStop(function() {

$('#loading').hide()

})

什么是axios

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

相比于原生的 XMLHttpRequest 对象,axios 简单易用。

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

axios发起GET请求

axios 发起 get 请求的语法:

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

具体的请求示例如下:

// 请求的 URL 地址

var url = 'http://www.liulongbin.top:3006/api/get'

// 请求的参数对象

var paramsObj = { name: 'zs', age: 20 }

// 调用 axios.get() 发起 GET 请求

axios.get(url, { params: paramsObj }).then(function(res) {

// res.data 是服务器返回的数据

var result = res.data

console.log(res)

})

axios发起POST请求

axios 发起 post 请求的语法:

axios.post('url', { /*参数*/ }).then(callback)

具体的请求示例如下:

// 请求的 URL 地址

var url = 'http://www.liulongbin.top:3006/api/post'

// 要提交到服务器的数据

var dataObj = { location: '北京', address: '顺义' }

// 调用 axios.post() 发起 POST 请求

axios.post(url, dataObj).then(function(res) {

// res.data 是服务器返回的数据

var result = res.data

console.log(result)

})

直接使用axios发起请求

axios 也提供了类似于 jQuery 中 $.ajax() 的函数,语法如下:

axios({

method: '请求类型',

url: '请求的URL地址',

data: { /* POST数据 */ },

params: { /* GET参数 */ }

}).then(callback)

发起get请求

document.querySelector('#btn3').addEventListener('click', function () {

var url = 'http://www.liulongbin.top:3006/api/get'

var paramsData = { name: '钢铁侠', age: 35 }

axios({

method: 'GET',

url: url,

params: paramsData

}).then(function (res) {

console.log(res.data)

})

})

发起post请求

document.querySelector('#btn4').addEventListener('click', function () {

axios({

method: 'POST',

url: 'http://www.liulongbin.top:3006/api/post',

data: {

name: '娃哈哈',

age: 18,

gender: '女'

}

}).then(function (res) {

console.log(res.data)

})

})

你可能感兴趣的:(jquery,ajax传xml)