博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
AJAX2.0
阅读量:6549 次
发布时间:2019-06-24

本文共 1326 字,大约阅读时间需要 4 分钟。

 

Ajax2.0

早期的ajax技术不支持异步文件上传

在后面更新了ajax2.0版本  支持文件上传了 但需要借助一个对象----FormData对象

Ajax2.0大体的步骤跟以前是一样的  但也是有一点小区别

 

区别:

1.  Ajax里不需要设置请求头,它内部已经自动设置了

2.  创建一个FormData对象,并且传入表单

3.  表单是不给“提交”按钮的-------------submit/<button></button>-------------没有submit按钮时button按钮相当于submit按钮

 

详细代码见下

       
Document

<!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>

 

转载于:https://www.cnblogs.com/mlw1814011067/p/9302050.html

你可能感兴趣的文章
程序员杂记系列
查看>>
【树莓派】制作树莓派所使用的img镜像(一)
查看>>
理解网站并发量
查看>>
spring整合elasticsearch之环境搭建
查看>>
TensorFlow 架构与设计-编程模型【转】
查看>>
如何运行Struts2官网最新Demo?
查看>>
'ascii' codec can't decode byte 0xe6 in position 0: ordinal not in range(128)
查看>>
XDebug 教程
查看>>
js 去html 标签
查看>>
好久不见
查看>>
小tips:JS中的children和childNodes
查看>>
二叉树的遍历
查看>>
Oracle的FIXED_DATE参数
查看>>
NDK配置
查看>>
(转)@ContextConfiguration注解说明
查看>>
[置顶] ※数据结构※→☆线性表结构(queue)☆============队列 顺序存储结构(queue sequence)(八)...
查看>>
Linux 系统的单用户模式、修复模式、跨控制台登录在系统修复中的运用
查看>>
JQuery UI Widget Factory官方Demo
查看>>
Atlas揭秘 —— 绑定(Binding)
查看>>
install xcode_3.2.5_and_iOS_sdk_4.2 _final with mac lion10.7.3
查看>>