目录
3.1、XMLHttpRequest
可以请求服务器上的数据资源
3.1.1 新旧版本区别
旧版缺点：
- 只支持文本数据的传输，无法用来读取和上传文件
- 传送和接收数据时，没有进度信息，只能提示有没有完成
新版新功能：
- 可以设置 HTTP 请求的时限
- 可以使用 FormData对象管理表单数据
- 可以上传文件
- 可以获得数据传输的进度信息
xhr.timeout属性：
let xhr = new XMLHttpRequest(); xhr.timeout = 3000; xhr.ontimeout = function(event){ alert("请求超时") } --后面接请求事件FormData对象：
- 不需要设置setRequestHeader的请求头
- 因为是构造函数需要先实例化在使用
- fd = new FormData()
- 利用fd.append('uname', 'zs')添加属性和值
- 快速获取表单数据：fd = new FormData(表单对象)
//手动获取 // 1. 创建 FormData 实例 // write here... let fd =new FormData(); // 2. 调用 append 函数，向 fd 中追加数据 // write here... fd.append('bookname',"zzz") var xhr = new XMLHttpRequest(); xhr.open('POST', 'URL地址'); xhr.send(fd); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { console.log(JSON.parse(xhr.responseText)); } };<!-- 自动获取 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>FormData自动获取数据</title> </head> <body> <form id="form1"> <input type="text" name="uname" autocomplete="off" /> <input type="password" name="upwd" /> <button type="submit">提交</button> </form> <script> // 1. 通过 DOM 操作，获取到 form 表单元素 var form = document.querySelector('#form1') form.addEventListener('submit', function (e) { // 阻止表单的默认提交行为 e.preventDefault() // 创建 FormData，快速获取到 form 表单中的数据 // write here... let fd = new FormData(form); var xhr = new XMLHttpRequest() xhr.open('POST', 'URL地址') xhr.send(fd) xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { console.log(JSON.parse(xhr.responseText)) } } }) </script> </body> </html>
3.1.2 xhr发起GET请求步骤：
// 1. 创建 XHR 对象（即小黄人对象） let xhr = new XMLHttpRequest() // 2. 调用 open 函数 xhr.open('GET', 'URL地址') // 3. 调用 send 函数 xhr.send() // 4. 监听 onreadystatechange 事件 xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { // 获取服务器响应的数据 console.log(xhr.responseText) } }if里是固定写法，判断服务器是否拿到数据
3.1.3xhr发起POST请求
//1、创建 xhr 对象 let xhr = new XMLHttpRequest(); //2、调用 xhr.open() 函数 xhr.open('post','URL地址'); //3、设置 Content-Type 属性（固定写法） xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded'); //4、调用 xhr.send() 函数，同时指定要发送的数据 xhr.send('id=1&bookname=冲冲冲&author=张三&publisher=上海');//根据参数传值， //5、监听 xhr.onreadystatechange 事件 xhr.onreadystatechange = function(){ if (xhr.readyState === 4 && xhr.status === 200) { console.log(xhr.responseText) } }readyState属性：
值 状态 描述 0 UNSENT XMLHttpRequest对象已被创建，但尚未调用open方法 1 OPENED open方法已被调用 2 HEADERS_RECEIVED send方法已被调用，响应头也已被接收 3 LOADING 数据接收中，此时response属性中已经包含部分数据 4 DONE Ajax请求完成，这意味着数据传输已经彻底完成或失败
3.2、 查询字符串
定义：查询字符串（URL 参数）是指在 URL 的末尾加上用于向服务器发送信息的字符串（变量）
格式：将英文的 ? 放在`URL` 的末尾，然后再加上参数＝值 ，想加上多个参数的话，使用 &符号进行分隔以这个形式，可以将想要发送给服务器的数据添加到 `URL` 中。
3.3、get请求携带参数的本质
无论使用$.ajax()，还是使用$.get()，又或者直接使用xhr对象发起GET请求，当需要携带参数的时候，本质上都是直接将参数以查询字符串的形式，追加到URL地址的而后面，发送到服务器。
$.get('url地址',{name:'zs',age:20},function(){})
//等价于
$.get('url?name=zs&age=20',function(){})
$.ajax({method:'GET',url:'URL地址',data:{name:'zs',age:'20'},success:function(){}})
//等价于
$.ajax({method:'GET',url:'url?name=zs&age=20',success:function(){}})3.4、URL编码与解码
URL地址中，只允许出现英文相关的字母、标点符号、数字，因此，在URL地址中不允许出现中文字符
原则：使用安全的字符（没有特殊用途或者特殊意义的可打印字符）去表示那些不安全的字符。
- encodeURI(‘’) 编码的函数
- decodeURI(‘’)解码的函数：三组百分号表示一个中文字符
console.log(encodeURI('张三'));
console.log(decodeURI('%E5%BC%A0%E4%B8%89'));3.5、数据交换格式
数据交换格式，就是服务器端与客户端之间进行数据传输与交换的格式
3.5.1 XML
XML的英文全称是EXtensible Markup Language，即可扩展标记语言
XML和HTML的区别：
- XML 和 HTML虽然都是标记语言，但是，它们两者之间没有任何的关系。
- HTML被设计用来描述网页上的内容，是网页内容的载体
- XML 被设计用来传输和存储数据，是数据的载体
缺点：
- XML格式臃肿，和数据无关的代码多，体积大，传输效率低
- 在JavaScript中解析 XML 比较麻烦
3.5.2 JSON
JSON 的英文全称是 `JavaScript Object Notation`，即JavaScript 对象表示法。简单来讲，JSON就是JavaScript 对象和数组的字符串表示法，它使用文本表示一个 JS对象或数组的信息，因此，JSON的本质是字符串。
作用：是一种轻量级的文本数据交换格式
两种结构：
对象：在 JSON中表示为 { } 括起来的内容。数据结构为 { key: value, key: value, … } 的键值对结构。其中，key 必须是使用英文的双引号包裹的字符串，value的数据类型可以是数字、字符串（必须使用双引号包裹）、布尔值、null、数组、对象6种类型。
数组：数组结构在 JSON中表示为[ ] 括起来的内容。数据结构为 [ "java", "JavaScript", 30, true … ]。数组中数据的类型可以是数字、字符串、布尔值、null、数组、对象6种类型。
注意：
- 属性名必须使用双引号包裹
- 字符串类型的值必须使用双引号包裹
- JSON中不允许使用单引号表示字符串
- JSON中不能写注释
- JSON的最外层必须是对象或数组格式
- 不能使用undefined或函数作为JSON的值
反序列化：JSON字符串转js对象JSON.parse(JSON字符串)
序列化：JS对象转JSON字符串JSON.stringify（JSON字符串）
3.6、文件上传进度
xhr.upload.onprogress事件
xhr.upload.onprogress = function (e) { if (e.lengthComputable) { var per = Math.ceil((e.loaded / e.total) * 100); $("#percent").css('width',`${per}%`).html(`${per}%`) }
- e.loaded已传输的字节
- e.total需要传输的总字节
3.7、jQuery上传文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>jQuery方式文件上传</title> <script src="./lib/jquery.js"></script> </head> <style> div{ position: relative; width: 600px; } #loading{ position: absolute; display: none; left: 50%; top: 50%; transform: translateX(-50%); /* transform: translateY(-50%); */ } #img{ width: 100%; } </style> <body> <input type="file" id="file1" /> <button id="btnUpload">上传文件</button> <br /> <div> <img src="images/loading.gif" alt="" id="loading" /> <img src="" alt="" id="img"> </div> <script> $(function() { $('#btnUpload').click(function() { // 上传URL // 参考步骤： // 1. 是否选择文件判断 // 1. 给上传按钮绑定点击事件 // 2. 通过 $('文件域选择器')[0].files 获取文件列表，判断长度是否大于0 let files = $("#file1")[0].files; if(files.length<=0){ return alert("请上传文件") } // 2. 利用 FormData 封装上传的文件 // 1. 初始化 FormData // 2. 利用 append 方法追加文件对象 let fd = new FormData(); fd.append("avatar",files[0]); // 3. 利用 $.ajax() 发起请求 // 1. 设置 contentType: false；不修改 Content-Type 属性，使用 FormData 默认的 Content-Type 值 // 2. 设置 processData: false；不对 FormData 中的数据进行 url 编码，而是将 FormData 数据原样发送到服务器 $.ajax({ method:"post", url:'URL地址', data:fd, contentType:false, processData:false, success:function(res){ if(res.status===200){ $("#img").attr('src',`URL根地址:3006${res.url}`) }else{ console.log(res.status); } } }) // 4. 监听 ajax 开始和结束的监听来显示loading效果 // 1. 在 ajaxStart(callback) 里面显示 loading // 2. 在 ajaxStop(callback) 里面隐藏loading $(document).ajaxStart(function(){ $("#loading").show() }) $(document).ajaxStop(function(){ $("#loading").hide() }) }); }); </script> </body> </html>
3.8、axios
网络数据请求库
语法：
axios.get('url',{params:{参数}}).then(function(){
})
axios({ method: '请求类型', url: '请求的URL地址', data: { /* POST数据 */ }, params: { /* GET参数 */ } }).then(callback)<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>上传文件</title> </head> <body> <!-- 1. 文件选择框 --> <input type="file" id="file1" multiple /> <!-- 2. 上传文件的按钮 --> <button id="btnUpload">上传文件</button> <br /> <!-- 3. img 标签，来显示上传成功以后的图片 --> <img src="" alt="" id="img" width="800" /> <script> document.querySelector('#btn1').addEventListener('click', function () { var url = 'URL地址' var paramsObj = { name: 'zs', age: 20 } axios.get(url, { params: paramsObj }).then(function (res) { console.log(res.data) }) }) document.querySelector('#btn2').addEventListener('click', function () { var url = 'URL地址' var dataObj = { address: '杉杉', location: '迟迟区' } axios.post(url, dataObj).then(function (res) { console.log(res.data) }) }) document.querySelector('#btn3').addEventListener('click', function () { var url = 'URL跟地址:3006/api/get' var paramsData = { name: '钢铁侠', age: 35 } axios({ method: 'GET', url: url, params: paramsData }).then(function (res) { console.log(res.data) }) }) document.querySelector('#btn4').addEventListener('click', function () { axios({ method: 'POST', url: 'URL地址', data: { name: '张三', age: 19, gender: '男' } }).then(function (res) { console.log(res.data) }) }) </script> </body> </html>
5144
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
