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的更多相关文章

  1. ajax2.0之拖拽上传

    index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...

  2. ajax2.0之文件上传加跨域

    express_server.js const express=require('express'); //主体 const body=require('body-parser'); //接收普通PO ...

  3. AJAX文件上传实践与分析，带HTML5文件上传API。

    对于HTML5已经支持AJAX文件上传了,但如果需要兼容的话还是得用一点小技巧的,HTML5等等介绍,先来看看以前我们是怎么写的. 网上可能会有一些叫AJAX文件上传插件,但在AJAX2.0之前是不可 ...

  4. H5课程大纲

    K1模块课程: 课程模块 课程阶段 课程内容 K1 模块 第1阶段 认识前端开发 环境配置.使用标签的分类.写法及使用规范CSS样式的使用.各类常见样式Photoshop使用16大常用样式盒模型.语义 ...

  5. 基于Blod的ajax进度条下载实现

    普通的浏览器下载 在web开发中,如果要实现下载功能,往往都是使用新开web页面或者是使用iframe的形式.实现起来其实很简单: <a target="_blank" hr ...

  6. ajax上传文件及进度显示

    之前在博文:原生ajax写法就提及过ajax2.0与1.0的差别是多了FormData和利用FormData文件上传(当然还有跨域,但不是本文的重点). 那么具体怎么样实现ajax上传文件呢? 一般来 ...

  7. 原生ajax写法

    ajax1.0,ie9及以下,ie10+支持ajax2.0 ajax2.0比ajax1.0: 1.多了FormData对象,xhr.send(formData)  //不能用GET 2.文件上传,文件 ...

  8. Ajax跨域CORS

    在Ajax2.0中多了CORS允许我们跨域,但是其中有着几种的限制:Origin.Methods.Headers.Credentials 1.Origin 当浏览器用Ajax跨域请求的时候,会带上一个 ...

  9. Ajax上传文件注意事项

    如图: 因为传进来的参数被预先处理了,所以才出现了illegal invocation报错,只要将processData的值改为false就能解决这个小问题: 因为JQ自动的帮我们设置了请求头,但是a ...

随机推荐

  1. 理解javascript的闭包,原型,和匿名函数及IIFE

    理解javascript的闭包,原型,和匿名函数(自己总结) 一 .>关于闭包 理解闭包 需要的知识1.变量的作用域 例1: var n =99; //建立函数外的全局变量 function r ...

  2. 用VS2010编写的C++程序，在其他电脑上无法运行的问题

    问题:在自己电脑上用VS2010编写的VC++程序(使用MFC库),不能在其他电脑上运行.双击提示: “无法启动此程序,因为计算机中丢失mfc100u.dll 尝试重新安装该程序以解决此问题. 解决方 ...

  3. Fiddler配置代理hosts的方法

    1 背景 fiddler本身代理hosts配置表,修改后,可以省去在手机等代理使用者的系统中修改hosts 2 使用场景 客户端升级测试 3 修改方法 3.1 打开fiddler,工具栏-->T ...

  4. 结构型设计模式之享元模式(Flyweight)

    结构 意图 运用共享技术有效地支持大量细粒度的对象. 适用性 一个应用程序使用了大量的对象. 完全由于使用大量的对象,造成很大的存储开销. 对象的大多数状态都可变为外部状态. 如果删除对象的外部状态, ...

  5. 行为型设计模式之策略模式(Strategy)

    结构 意图 定义一系列的算法,把它们一个个封装起来, 并且使它们可相互替换.本模式使得算法可独立于使用它的客户而变化. 适用性 许多相关的类仅仅是行为有异.“策略”提供了一种用多个行为中的一个行为来配 ...

  6. [ CodeVS冲杯之路 ] P1576

    不充钱,你怎么AC? 题目:http://codevs.cn/problem/1576/ 这和上一道题十分的类似,所以直接秒杀 ( 上一题:http://www.cnblogs.com/hadilo/ ...

  7. Use NSArray to specify otherButtonTitles?

    http://stackoverflow.com/questions/1602214/use-nsarray-to-specify-otherbuttontitles UIAlertSheet's c ...

  8. off charging mode flow

    /system/core/init/init.cpp ..... ..... ..... int main(int argc, char** argv) { ..... ..... ..... // ...

  9. python+requests接口自动化完整项目设计源码【转载】

    本篇转自博客:上海-悠悠 原文地址:http://www.cnblogs.com/yoyoketang/tag/python%E6%8E%A5%E5%8F%A3%E8%87%AA%E5%8A%A8%E ...

  10. 使用bottle进行web开发（3）：静态文件的获取

    静态文件(比如css啊,需要下载的各位文件等),需要通过static_file来操作,首先记得要在import中导入 @route('/static/<filename>') def se ...