XMLHttpRequest—

我们先来了解一下相对于旧版本更新了那些特性或功能，再对功能特性进行学习：

我们的老版本只支持文本数据的传送，无法用来读取和上传文件；传送和接受数据时，没有进度信息，只能提示有没有完成；受到同源限制的影响，只能向同一域名的服务器请求数据，针对同源限制，没有解决方案

相比于老版本，我们的新版本可以设置HTTP请求的时限；可以使用FormData对象管理表单数据；可以上传文件；可以请求不同域名下的数据（跨域请求）可以获取服务器端的二进制数据可以获得数据传输的进度信息

本章不涉及跨域请求，跨域请求另起章节阐述

一.设置HTTP请求时限

二.FormData对象管理表单数据

1.new一个FormData对象

2.添加表单项

3.提交到服务器

4.完整实现FormData提交数据

5.FormData直接获取表单内的value值

三.上传文件

四.显示文件上传进度

五.在jQuery中我们该如何上传文件？jQuery中又有那些有用的事件？

一.设置HTTP请求时限

有时Ajax的操作很耗时，而且没有办法预知要花多长时间，假如网速很慢的话，用户需要等很久，可以说是非常的不“银性”，我们新版本XMLHttpRequest对象增加了timeout属性，可以设置HTTP的请求时限

xhr.timeout = 3000;//3000毫秒（3秒）后没有请求成功就停止请求

不仅是timeout属性，还有配套timeout事件，好像越来越有全家桶那味儿了，timeout事件用来指定回调函数，代码示例解读：

xhr.ontimeout = function(e){alert("请求超时，请检查网络设置");
}

我们在实际应用中来看一下请求时限该怎么使用：

var xhr = new XMLHttpRequest();//在我们new完一个XMLHttpRequest时，设置一个请求时限xhr.timeout = 3000;xhr.ontimeout = function(e){alert("请求超时了，请检查您的网络设置");
}xhr.open("GET","http://www.XXXXXXXXXXXXXX");xhr.send();xhr.onreadystatechange = function(){if(xhr.readyState === 4 && xhr.status === 200){console.log(xhr.responseText);}}

二.FormData对象管理表单数据

我们所学习的Ajax经常用来提交表单的数据，为了方便表单的处理，HTML5新增了FormData对象来模拟表单的操作，获取网页表单的值，并提交到服务器

我们来完成这样一个获取表单的流程：

1.new一个FormData对象

var fd = new FormData();

2.添加表单项

fd.append("username", "giao哥");fd.append("age", 20);

3.提交到服务器

xhr.send(fd);

4.完整实现FormData提交数据

var fd = new FormData();fd.append("username", "giao哥");
fd.append("age", 20);var xhr = new XMLHttpRequest();xhr.open("POST","http://XXXXXXXXXXXXXXXXXXX");//xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//使用FormData构造函数，浏览器识别并添加请求头xhr.send(fd);xhr.onreadystatechange = function(){if(xhr.readyState === 4 && xhr.status === 200){console.log(JSON.parse(xhr.responseText));}}

5.FormData直接获取表单内的value值

var form = document.querySelector('form');form.addEventListener("submit",function(even){
//监听表单元素submit事件even.preventDefault();//阻止表单默认提交行为var fd = new FormData(form);var xhr = new XMLHttpRequest();xhr.open("POST","http://XXXXXXXXXXXXXXXXXXX");xhr.send(fd);xhr.onreadystatechange = function(){if(xhr.readyState === 4 && xhr.status === 200){console.log(JSON.parse(xhr.responseText));}}})

三.上传文件

老版本的XMLHttpRequest对象，只能从服务器取回文本数据、，新版本则可以取回二进制数据

例子：假如我们现在想上传一张照片到服务器，然后通过服务器的响应，再将图片渲染到我们的网页中

思路：先判断用户是否上传了照片，没有上传我们提示用户应该先上传照片，不对服务器发起请求；如果用户上传了照片，我们将数据提交到服务器，等待服务器响应之后渲染到页面中（判断用户是否上传了文件，可以使用表单属性 files 的长度来判断用户是否上传了文件，如果长度小于等于0，那么就判断用户并没有输入数据，大于0则将数据给到FormData对象，然后传给xhr对象的send（）来进行POST提交请求，如果请求上传成功，那我们就可以把HTML页面中提前设置好的img的src属性改为API地址头+data.url（服务器返回的图片url地址），这样我们就可以将图片渲染到HTML页面中了，我们利用代码实现一下：

先初始化HTML页面：

<input type="file" id="inp">
<button id="btn">提交</button>
<img src="" id="img">

JS操作：

var inp = document.querySelector('#inp');var btn = document.querySelector('#btn');var img = document.querySelector("#img");//当我们想去执行提交事件时，判断用户是否上传了文件btn.addEventListener('click',function(){if(inp.files.length <= 0){return alert("请您上传文件之后再执行提交操作");}else{var fd = new FormData();//判断到用户上传了文件，我们传给formdata表单对象fd.append("img",inp.files[0]);//成功之后，我们再将数据提交到xhr对象var xhr = new XMLHttpRequest();xhr.open("POST","http://XXXXXXXXXXX");xhr.send(fd);xhr.onreadystatechange = function(){//返回状态码请求成功if(xhr.readyState === 4){if(xhr.status >= 200 && xhr.status < 300){var data = JSON.parse(xhr.responseText);// console.log(data);if(xhr.status === 200){img.src = "http://API响应头" + data.url;}else{alert("上传失败，请检查您的网络设置或向我们反馈");}}}}}})

这样我们就成功的将图片上传到了服务器并让服务器将图片渲染到了HTML页面中

四.显示文件上传进度

新版本的XMLHttpRequest对象，传递数据的时候，有一个progress事件，通过监听xhr.upload.onprogress事件来返回进度信息

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><input type="file" id="inp"><button id="btn">提交</button><br><div></div><br><img src="" id="img">
</body>
<script>var inp = document.querySelector('#inp');var btn = document.querySelector('#btn');var img = document.querySelector("#img");//当我们想去执行提交事件时，判断用户是否上传了文件btn.addEventListener('click',function(){if(inp.files.length <= 0){return alert("请您上传文件之后再执行提交操作");}else{var fd = new FormData();//判断到用户上传了文件，我们传给formdata表单对象fd.append("img",inp.files[0]);//成功之后，我们再将数据提交到xhr对象var xhr = new XMLHttpRequest();xhr.upload.onprogress = function(e){if(e.lengthComputable){//.lengthComputable是一个布尔值，表示当前上传的数据是否有可计算的长度var percentComplete = Math.ceil((e.loaded / e.total)*100) + "%";//e.loaded:已传输字节//e.total:总共需传输字节document.querySelector('div').innerHTML = percentComplete;xhr.upload.onload = function(){//上传完毕之后document.querySelector('div').style.color = 'green';document.querySelector('div').style.fontWeight = 'bold';}}}xhr.open("POST","http://XXXXXXXXXXXXXXXXXXXXXXXXXX");xhr.send(fd);xhr.onreadystatechange = function(){//返回状态码请求成功if(xhr.readyState === 4){if(xhr.status >= 200 && xhr.status < 300){var data = JSON.parse(xhr.responseText);// console.log(data);if(xhr.status === 200){img.src = "API响应头" + data.url;}else{alert("上传失败，请检查您的网络设置或向我们反馈");}}}}}})
</script>
</html>

我们在xhr对象创建完成之后开始监听请求信息，完成显示进度的功能

五.在jQuery中我们该如何上传文件？jQuery中又有那些有用的事件？

在JQuery中实现文件的上传请求时，除了较为方便，还需要再Ajax函数中添加俩个必要值：

contentType:false;

processDate:false;

在 ajax 中 contentType 设置为 false 是为了避免 JQuery 对其操作，从而失去分界符，而使服务器不能正常解析文件

在使用jQuery的$.ajax()方法的时候参数processData默认值为true，会将发送的数据序列化以适应默认的内容类型application/x-www-form-urlencoded

如果想发送不想转换的的信息的时候需要手动将其设置为false

我们这里做了解就好，我们在使用jQuery上传文件请求时只要将这俩个值添加上就好

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./bootstrap.min.css"><script src="./jQuery-min.js"></script>
</head>
<body><input type="file" id="userfile"><button id="btnfile">点击上传</button><br><img src="" id="image">
</body>
<script>$(function(){$("#btnfile").on("click",function(){var haveor = $("#userfile")[0].files;if(haveor.length <= 0){return alert("请选择文件后上传");}var fd = new FormData();fd.append('avatar',haveor[0]);$.ajax({method:"POST",url:"http://www.XXXXXXXXXXXXX",data:fd,contentType:false,processData:false,success:function(res){// console.log(res);$("#image").attr("src","API响应头" + res.url);}})})})
</script>
</html>

jQuery中还可以实现loading效果

我们可以监听全局的Ajax请求，如果发起Ajax发起或者结束Ajax请求，就会触发指定事件，执行回调函数

ajaxStart(callback):当Ajax发起请求时，执行callback回调函数

ajaxStop(callback):当Ajax结束请求时，执行callback回调函数

该方法只能被附加到文档，意思除了书写代码需要注意document外，它的监听范围时是当前文档内的所有Ajax请求结束动作

$(document).ajaxStart(function(){$("div").show();
})//当有Ajax请求发起时，div就会显示出来

XMLHttpRequest——Level2相关推荐

什么是xhr？XMLHttpRequest的基本使用及xhr Level2的新特性详解及案例
目录一.XMLHttpRequest概念 1.定义 2.能否直接使用xhr对象发起Ajax请求 3.什么是Ajax 二.xhr发起GET请求 1.创建xhr对象 2.调用xhr.open()函数 3 ...
xhr XMLHttpRequest 简介
XHR全称XMLHttpRequest XMLHTTP是一组API函数集,可被JavaScript.JScript.VBScript以及其它web浏览器内嵌的脚本语言调用,通过HTTP在浏览器和web ...
XMLHttpRequest API
jquery ajax就是根据XMLHttpRequest level1进行封装异步请求,可惜目前它的版本不支持接收和传送二进制数据.XMLHttpRequest level2的诞生引入了很多新的ap ...
XMLHttpRequest + JSON + 文件上传 + axios
目标能够知道如何使用 XMLHttpRequest 发起 Ajax 请求能够知道如何封装自己的 Ajax 函数能够使用 XMLHttpRequest Level2 中提供的新特性能够知道 jQ ...
Ajax学习（3）XMLHttpRequest的使用+数据交换格式（JSON）
XMLHttpRequest的使用 XMLHttpRequest(简称 xhr)是浏览器提供的 Javascript 对象,可以请求服务器上的数据资源.(jQuery 中的 Ajax 函数,就是基于 ...
只有ajax会跨域吗_ajax处理跨域有几种方式
jQuery 使用 JSONP 缺点: 1.这种方式无法发送post请求(这里) 2.另外要确定jsonp的请求是否失败并不容易,大多数框架的实现都是结合超时时间来判定. 跨域的几种方式在项目中可能 ...
php编译工具知乎,关于知乎回答问题编辑框用Ctrl+V 粘贴图片是如何实现的详解...
貌似我没有像QQ邮箱之类的装知乎的插件是用HTML5的新功能实现的吗? 看了@朱利安的回答,发现我描述的不够清楚我是用QQ截图之类的工具截的图,然后图片本身是保存在剪切板里的,剪切板中保存的*不 ...
JavaScript怎么上传图片
在XMLHttpRequest Level2出台之前,大多数的异步上传图片都是利用iframe去实现的. 至于具体的实现细节,我就不在这边啰嗦的,Google一下就有文章谈这个东西. 这次主要说说,怎 ...
layui删除后刷新表格_LayUi前端框架删除数据缓存问题（解决删除后刷新页面内容又会显示问题）...
[HDOJ5952]Counting Cliques(DFS,剪枝) 题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5952 题意:求图中规模为s的团的 ...

XMLHttpRequest——Level2

一.设置HTTP请求时限

二.FormData对象管理表单数据

1.new一个FormData对象

2.添加表单项

3.提交到服务器

4.完整实现FormData提交数据

5.FormData直接获取表单内的value值

三.上传文件

四.显示文件上传进度

五.在jQuery中我们该如何上传文件？jQuery中又有那些有用的事件？

XMLHttpRequest——Level2相关推荐

最新文章

热门文章