Ajax — 第四天

数据交换格式

XML

写法：

一个文档有且只有一个根标签
标签必须闭合
属性值必须加引号

如果说服务器返回的数据是xml格式的

前端需要把服务器返回的xml当做document对象来处理
目前无法演示，自己写接口的时候，我们可以测试一下。

JSON

写法：

一个json文件（数据），最大的括号只能有一个
字符串，必须使用双引号

JSON的数据类型：

number
string
null
bool
array
object

json中不能有 undefined。也不能加注释

XHR（level2）新特性

设置请求超时处理

// 在发送请求之前，设置
xhr.timeout = 10; // 单位：毫秒
xhr.ontimeout = function () {// 如果请求响应整个过程超过10毫秒，触发该函数，可以给一个提示alert('请求超时，请稍后再试');
}

如果请求超过10毫秒还没有完成，则会取消这次请求

FormData

h5新增的一个对象
Form-表单、Data-数据。所以他用来收集表单数据

jQuery中的serialize() 和 FormData的区别

serialize() 只能收集到表单中的文本数据，不能收集文件，也就不能实现文件上传
FormData，既能收集表单中的文本数据，也能收集文件，就能够实现文件上传
serialize() 得到的数据格式是查询字符串 id=11&name=zs&age=22...
FormData() 得到的数据格式是 对象，传输的数据我们看不到，是二进制形式的数据

使用方法

let fd = new FormData(表单的DOM对象) fd对象中就包含了表单中所有的数据

注意事项

实例化的时候，参数必须是表单的DOM对象
FormData收集表单数据的时候，也是根据表单各项的name属性来收集，也就是表单各项必须有name属性
- select>option （name要设置给select标签，value要设置给每个option）

FormData相关API

get(name) — 获取到该项的值
getAll() — 获取到该项所有的值
append(key, value) — 向fd对象中追加一个值
set(key, value) — 设置一个值，主要用于改变fd对象中的一个值

提交fd数据到接口

使用原生的xhr对象提交
- 必须使用POST方式
- 使用支持FormData的接口（之前使用的全部接口，都不支持FormData）
- 提交数据，直接 send(fd);
- 不用指定请求头，浏览器会自动添加合适的请求头。
使用$.ajax()提交
- 提交的数据 data: fd
- 必须加 contentType: false
- 必须加 processData: false

使用的接口

上传文件的接口
- /api/upload/avatar
- 请求参数：fd 对象
  - 必须有文件上传，并且文件域的name属性值必须是 avatar
- 返回值：上传后的图片路径
用于测试FormData的接口
- /api/formdata
- 不能用于上传文件，可以设置任何文本类型的值

文件上传

使用的接口，上面的 /api/upload/avatar

通过输出文件域的DOM对象，得到如下信息：

可以根据 文件域DOM对象.files.length 来判断是否选择了文件。

上传进度条

了解axios

GET和POST的区别

同步和异步

跨域问题

Ajax — 第四天相关推荐

ajax省市联动案例,AJAX案例四：省市联动(示例代码)
1 2 3 4 5 6 7 8 My JSP \'ajax5.jsp\' starting page 9 10 11 12 13 14 15 18 19 functioncreateXMLHttpRe ...
ajax总结(四):原生js封装a和jQurey版ajax介绍
一.为什么要封装? 发现很多地方都要用ajax请求,但是大部分代码都是一样的,所以根据封装的思想,相同的代码封装成函数,在需要用的地方来调用,这样会很方便. 二.js封装ajax过程: 1.先了解结构 ...
Ajax实战：Ajax的四个基本原则
我们用到的很多框架中都已经固化了基于页面的传统应用模式,同时这些应用模式也已经深深进入了我们的思想中.我们花几分钟来揭示出哪些核心概念是我们需要重新思考的,以及如何从Ajax的角度来重新思考. 浏览器 ...
js ajax通用方法,ajax的四种实现方式介绍
1.使用原生JavaScript实现 var xhr; if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else { xhr = ...
前端学习（1429）：ajax封装四
ajax.js // 引用expess框架 const express = require('express'); // 处理路径 const path = require('path');const ...
Mr.J---重拾Ajax（四）-- 跨域
跨域域名地址的组成 http:// www . abc.com : 8080 / script/jquery.js 协议子域 ...
AJAX开发简略（转）
AJAX开发简略... 1 一.AJAX定义... 3 二.现状与需要解决的问题... 3 三.为什么使用AJAX. 4 四.谁在使用AJAX. 6 五.用AJAX改进你的设计... 6 例子1:数据 ...
JavaWeb：AJAX
1. AJAX概述 1.1 什么是AJAX AJAX(Asynchronous Javascript And XML)翻译成中文就是"异步Javascript和XML".即使用Ja ...
Python自动化运维之25、Ajax
一.概述对于WEB应用程序:用户浏览器发送请求,服务器接收并处理请求,然后返回结果,往往返回就是字符串(HTML),浏览器将字符串(HTML)渲染并显示浏览器上. 通过在后台与服务器进行少量数据交换 ...