AJAX2.0
Ajax2.0
早期的ajax技术不支持异步文件上传
在后面更新了ajax2.0版本 支持文件上传了 但需要借助一个对象----FormData对象
Ajax2.0大体的步骤跟以前是一样的 但也是有一点小区别
区别:
1. Ajax里不需要设置请求头,它内部已经自动设置了
2. 创建一个FormData对象,并且传入表单
3. 表单是不给“提交”按钮的-------------submit/<button></button>-------------没有submit按钮时button按钮相当于submit按钮
详细代码见下
<!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>Document</title>
</head>
<body>
<form>
<input type="file" id="file" name="icon">
<input type="text" id="user" name="user">
<input type="button" id="btn" value="发请求">
</form>
</body>
</html> <script>
//找到表单元素
var form = document.querySelector('form');
document.getElementById('btn').onclick = function(){ //点击事件里我需要发一个异步请求
//早期的ajax技术,是不支持异步上传文件的
//在后期更新了ajax2.0版本,支持上传文件!它需要借助于一个对象,这个对象叫FormData对象
//ajax2.0大体的步骤跟以前是一样的,区别 //1. 还是要创建个请求对象
var xhr = new XMLHttpRequest();
//2. 还是要设置请求行
xhr.open('post','data.php');//在这里data.php只是一个获取数据的页面,可以忽略
//3. ajax2.0 里不需要设置请求头,它内部会自动帮你设置
//创建一个FormData对象,并且传入一个表单
var fm = new FormData(form); //
xhr.send(fm);
xhr.onload = function(){
console.log(xhr.responseText);
}
}
</script>
<!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>Document</title>
</head>
<body>
<form>
<input type="file" id="file" name="icon">
<input type="text" id="user" name="user">
<input type="button" id="btn" value="发请求">
</form>
</body>
</html>
<script>
//找到表单元素
var form = document.querySelector('form');
document.getElementById('btn').onclick = function(){
//点击事件里我需要发一个异步请求
//早期的ajax技术,是不支持异步上传文件的
//在后期更新了ajax2.0版本,支持上传文件!它需要借助于一个对象,这个对象叫FormData对象
//ajax2.0大体的步骤跟以前是一样的,区别
//1. 还是要创建个请求对象
var xhr = new XMLHttpRequest();
//2. 还是要设置请求行
xhr.open('post','data.php');
//3. ajax2.0 里不需要设置请求头,它内部会自动帮你设置
//创建一个FormData对象,并且传入一个表单
var fm = new FormData(form); //
xhr.send(fm);
xhr.onload = function(){
console.log(xhr.responseText);
}
}
</script>
AJAX2.0的更多相关文章
- ajax2.0之拖拽上传
index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...
- ajax2.0之文件上传加跨域
express_server.js const express=require('express'); //主体 const body=require('body-parser'); //接收普通PO ...
- AJAX文件上传实践与分析,带HTML5文件上传API。
对于HTML5已经支持AJAX文件上传了,但如果需要兼容的话还是得用一点小技巧的,HTML5等等介绍,先来看看以前我们是怎么写的. 网上可能会有一些叫AJAX文件上传插件,但在AJAX2.0之前是不可 ...
- H5课程大纲
K1模块课程: 课程模块 课程阶段 课程内容 K1 模块 第1阶段 认识前端开发 环境配置.使用标签的分类.写法及使用规范CSS样式的使用.各类常见样式Photoshop使用16大常用样式盒模型.语义 ...
- 基于Blod的ajax进度条下载实现
普通的浏览器下载 在web开发中,如果要实现下载功能,往往都是使用新开web页面或者是使用iframe的形式.实现起来其实很简单: <a target="_blank" hr ...
- ajax上传文件及进度显示
之前在博文:原生ajax写法就提及过ajax2.0与1.0的差别是多了FormData和利用FormData文件上传(当然还有跨域,但不是本文的重点). 那么具体怎么样实现ajax上传文件呢? 一般来 ...
- 原生ajax写法
ajax1.0,ie9及以下,ie10+支持ajax2.0 ajax2.0比ajax1.0: 1.多了FormData对象,xhr.send(formData) //不能用GET 2.文件上传,文件 ...
- Ajax跨域CORS
在Ajax2.0中多了CORS允许我们跨域,但是其中有着几种的限制:Origin.Methods.Headers.Credentials 1.Origin 当浏览器用Ajax跨域请求的时候,会带上一个 ...
- Ajax上传文件注意事项
如图: 因为传进来的参数被预先处理了,所以才出现了illegal invocation报错,只要将processData的值改为false就能解决这个小问题: 因为JQ自动的帮我们设置了请求头,但是a ...
随机推荐
- 电阻 (resistance)
电阻 (resistance) 题目描述 每次小x物理作业没做完时,总是会去和老师交流感情,他们之间由此建立起来良好的师生关系.于是有一天,老师带着一道物理难题来见小x. 这道题给出了一个有n个电阻的 ...
- PotPlayer一款简洁好用的播放器
PotPlayer 是 KMPlayer 的原制作者姜龙喜先生(韩国)进入 Daum 公司后的新一代作品.PotPlayer 的优势在于强大的内置解码器:而 KMPlayer 的优势在于强大的定制能力 ...
- C++封装随笔
1接口的封装和设计思想入门 接口的封装和设计思想入门 第一套api函数 #ifndef _CLT_SOCKET_H__ #define _CLT_SOCKET_H__ //客户端初始化环境 int c ...
- vs mfc 静态文本 改变字体大小
VC的对话框字体设置对所有控件都有效,你不能单独地改变某个静态文本的字体.对于你的问题,需要首先用CreateFont来建立一个字体对象,然后调用控件的SetFont,就可以了. 例子: 1.改静态文 ...
- nginx+lua_module安装
1.LuaJit安装 # cd /usr/local/src # git clone http://luajit.org/git/luajit-2.0.git # cd luajit-2.0 # ma ...
- mysql故障(找不mysql命令)
[root@slave support-files]# mysql -uroot -p123-bash: mysql: command not found #我的mysql编译安装指定的路径是--ba ...
- Knockout 双向绑定的理解
今天做了个需求就是上传图片,然后在代码中通过jQuery给一个标签赋值,经过前台的debug,发现这个值赋值成功了,但是提交到后台的请求里就没了,然后经历了一顿度娘,结果中发现了问题. 既然knock ...
- Codeforces Gym100952 C. Palindrome Again !!-回文字符串 (2015 HIAST Collegiate Programming Contest)
C. Palindrome Again !! time limit per test 1 second memory limit per test 64 megabytes input sta ...
- HDU 6240 Server(2017 CCPC哈尔滨站 K题,01分数规划 + 树状数组优化DP)
题目链接 2017 CCPC Harbin Problem K 题意 给定若干物品,每个物品可以覆盖一个区间.现在要覆盖区间$[1, t]$. 求选出来的物品的$\frac{∑a_{i}}{∑b_ ...
- Codeforces Gym 101194G Pandaria (2016 ACM-ICPC EC-Final G题, 并查集 + 线段树合并)
题目链接 2016 ACM-ICPC EC-Final Problem G 题意 给定一个无向图.每个点有一种颜色. 现在给定$q$个询问,每次询问$x$和$w$,求所有能通过边权值不超过$w$的 ...