AJAX2.0

Posted 一抒山河

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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

ajax2.0之拖拽上传

ajax2.0之文件上传加跨域

AJAX文件上传实践与分析,带HTML5文件上传API。

Ajax跨域CORS

FormData使用教程