ajaxfileupload.js在ie9,ie10中不兼容，求解决办法,急急急！
[问题点数：40分，结帖人lizhen_1130]
本版专家分：0
结帖率 93.33%
CSDN今日推荐
本版专家分：95
本版专家分：0
本版专家分：0
本版专家分：0
本版专家分：0
本版专家分：0
匿名用户不能发表回复！
其他相关推荐在上一篇文章中我们知道，AJAX是一系列技术的统称。在本篇中我们将更进一步，详细解释如何使用Ajax技术在项目中获取数据。而为了解释清楚，我们首先要搞清楚我们是从哪里获取数据的，其次我们关注的才是获取数据的具体方式。
一、获取数据
我们知道AJAX用来在项目中以阻止页面刷新的方式获取数据，那么数据从哪里来呢？我们又怎么知道如何获取这些数据？答案是我们通常使用API与各式各样的数据库交互。
“API”是“Application Programming Interface”(即：应用程序接口)的缩写，你可以想象一些数据是开放的并且在等待被使用，而我们获取这些数据的方式便是使用API。API通常的形式是一个URL，并提供指定的参数名和参数值用来帮助你定位所要获取的数据。
还记得我们提过AJAX需要服务器端的相应设置吗？我们之后会再来谈这一点。
二、AJAX技术的核心 - XMLHttpRequest对象
让我们先把服务器端的设置抛在一边，聚焦AJAX技术的核心环节：XMLHttpRequest对象。
XMLHttpRequest对象是浏览器提供的一个API，用来顺畅地向服务器发送请求并解析服务器响应，当然整个过程中，浏览器页面不会被刷新。它将是本文接下来的主角，让我们先站在较高的层次，对该对象有一个全局的概览：
XMLHttpRequest只是一个JavaScript对象，确切的说，是一个构造函数。换句话说，它一点也不神秘，它的特殊之处只在于它是由客户端(即浏览器)提供的（而不是JavaScript原生的），除此之外，它有属性，有方法，需要通过new关键字进行实例化，我们只需掌握它们就好；
XMLHttpRequest对象是不断被扩展的。随着XML对象被广泛的接收，W3C也开始着手制定相应的标准来规范其行为。目前，XMLHttpRequest有两个级别：1级提供了XML对象的实现细节，2级进一步发展了XML对象，额外添加了一些方法，属性和数据类型。但是，并不是所有浏览器都实现了XML对象2级的内容（并不意外，对吧？）；
让我们先从剖析XMLHttpRequest实例的属性和方法开始，先创建一个XML对象的实例：
const xhr = new XMLHttpRequest()
该实例的属性，方法有：
.open()：准备启动一个AJAX请求；
.setRequestHeader()：设置请求头部信息；
.send()：发送AJAX请求；
.getResponseHeader(): 获得响应头部信息；
.getAllResponseHeader()：获得一个包含所有头部信息的长字符串；
.abort()：取消异步请求；
.responseText：包含响应主体返回文本；
.responseXML：如果响应的内容类型时text/xml或application/xml，该属性将保存包含着相应数据的XML DOM文档；
.status：响应的HTTP状态；
.statusText：HTTP状态的说明；
.readyState：表示“请求”/“响应”过程的当前活动阶段
另外，浏览器还为该对象提供了一个onreadystatechange监听事件，每当XML实例的readyState属性变化时，就会触发该事件的发生。
至此，关于XMLHttpRequest实例对象的属性方法就全部罗列完毕了，接下来，我们将更进一步的探究如何使用这些方法，属性完成发送AJAX请求的流程。
三、准备AJAX请求
要想与服务器交互，我们首先需要回答以下问题：
我们是要获取数据还是存储数据？ --表现为请求方式的不同：GET或POST；
向哪里发出请求？ --即相应API地址；
以何种方式等待响应？ --有“同步”和“异步”两种选择；（网络传输是一个过程，请求和响应不是同时发生的。）
而XMLHttpRequest实例的.open()方法的作用就是用来回答以上三个问题。.open()方法接收三个参数：请求方式，请求URL地址和是否为异步请求的布尔值。
下面是一个.open()方法调用的例子：
// 该段代码会启动一个针对“example.php”的GET同步请求。
xhr.open(&get&, &example.php&, false)
相当于开始做饭前，将工具准备齐备，将菜洗好，.open()方法也同样出色地完成了发送AJAX请求的准备工作。
现在，让我们再深入聊聊一些准备工作的细节：
（一）GET请求 与 POST请求
GET请求用于获取数据，有时候我们需要获取的数据需要通过“查询参数”进行定位，在这种情况下，我们会将查询参数追加到URL的末尾，令服务器解析。
查询参数是指一个由?号起始，由&符号分割的包含相应键值对的字符串。用来告知浏览器所要查询的特定资源。
const query = &example.php?name=tom&age=24& // &?name=tom&age=24&即是一个查询参数
需要注意的是，查询字符串中每个参数的名和值都必须使用encodeURIComponent()进行编码（这是因为URL中有些字符会引起歧义，例如“&”）。
POST请求用于向服务器发送应该被保存的数据，因此POST请求天然比GET请求多需要一份需要被保存的数据。那么这些数据应该放在何处呢？毕竟，我们的.open()方法接收的三个参数都没有合适的位置。
答案是需要发送的数据会作为.send()方法的参数最终被发往服务器，该数据可以是任意大小，任意类型。
这里需要注意以下两点：
.send()方法的参数是不可为空的，也就是说，对于不需要发送任何数据的GET请求，也需要在调用.send()方法时，向其传入null值；
目前为止，我们知道了两种向服务器发送数据的方式：表单提交以及发送POST请求，要注意服务器对待这两种方式并不一视同仁，这意味着服务器需要有相应的代码专门处理POST请求发送来的原始数据。
但好在我们可以通过POST请求模拟表单提交，只需要简单两步：
设置请求头参数：Content-Type: application/x-www-form-urlencoded（表单提交时的内容类型）；
将表单数据序列化为查询字符串形式，传入.send()方法；
（二）请求URL地址
这里需要注意若使用相对路径，请求URL是相对于执行代码的当前页面。
（三）同步请求与异步请求
人们通常认为AJAX是异步的，实际上并非如此，AJAX是避免页面在获取数据后刷新的一种技术，至于等待服务器响应的方式是同步还是异步，需要开发人员结合业务需求进行配置（虽然通常是异步的）。
你可能会好奇，什么时候我们需要使用同步的AJAX？就我个人经验而言，似乎很难找到相应的场景。Stack Overflow上有一个类似的问题，有兴趣的不妨点击。
最后我们再简单解释一下“同步”等待响应与“异步”等待响应的区别：“同步”意味着一旦请求发出，任何后续的JavaScript代码不会再执行，“异步”则是当请求发出后，后续的JavaScript代码会继续执行，当请求成功后，会调用相应的回调函数。
四、设置请求头
每个HTTP请求和响应都会带有相应的头部信息，包含一些与数据，收发者网络环境与状态等相关信息。XMLHttpRequest对象提供的.setRequestHeader()方法为开发者提供了一个操作这两种头部信息的方法，并允许开发者自定义请求头的头部信息。
默认情况下，当发送AJAX请求时，会附带以下头部信息：
Accept：浏览器能够处理的内容类型；
Accept-Charset: 浏览器能够显示的字符集；
Accept-Encoding：浏览器能够处理的压缩编码；
Accept-Language：浏览器当前设置的语言；
Connection：浏览器与服务器之间连接的类型；
Cookie：当前页面设置的任何Cookie；
Host：发出请求的页面所在的域；
Referer：发出请求的页面URI；
User-Agent：浏览器的用户代理字符串；
注意，部分浏览器不允许使用.setRequestHeader()方法重写默认请求头信息，因此自定义请求头信息是更加安全的方法：
// 自定义请求头
xhr.setRequestHeader(&myHeader&, &MyValue&)
五、发送请求
到此为止，我们已经完全做好了发送请求的所有准备：利用.open()方法确定了请求方式，等待响应的方式和请求地址，甚至还通过.setRequestHeader()自定义了响应头，接下来就到了最激动人心的时刻：使用.send()方法，发送AJAX请求！
// 发送AJAX请求！
const xhr = new XMLHttpRequest()
xhr.open(&get&, &example.php&, false)
xhr.setRequestHeader(&myHeader&, &goodHeader&)
xhr.send(null)
呃，简单的有些令人尴尬不是吗？换个POST请求试试看：
// 发送AJAX请求！
const xhr = new XMLHttpRequest()
xhr.open(&post&, &example.php&, false)
xhr.setRequestHeader(&myHeader&, &bestHeader&)
xhr.send(some_data)
额..，总觉得还是差点什么？放轻松伙计，因为我们只是发出了请求，还没有处理响应，我们这就来看看它。
六、处理响应
让我们直接看看如何处理一个同步的GET请求响应：
const xhr = new XMLHttpRequest()
xhr.open(&get&, &example.php&, false)
xhr.setRequestHeader(&myHeader&, &goodHeader&)
xhr.send(null)
// 由于是同步的AJAX请求，因此只有当服务器响应后才会继续执行下面的代码
// 因此xhr.status的值一定不为默认值
if ((xhr.status &= 200 && xhr.status & 300) || xhr.status == 304) {
alert(xhr.responseText)
alert(&Request was unsuccessful: & + xhr.status)
上面的代码不难理解，我们通过之前提到的xhr.status属性（如果你忘记了，它存储着响应的HTTP状态）判断请求是否成功，如果成功的话，我们将读取xhr.responseText属性中存储的返回值。但是，当我们的请求为异步时，问题就稍微变得复杂了，由于是异步的请求，在xhr.send(null)语句被执行后，JavaScript引擎会紧接着执行下面的判断语句，而这时由于尚未来得及响应，我们注定会得到一个默认的xhr.status值，因此，我们永远都不可能获取请求的资源了。
如何解决这个问题？答案是通过为XMLHTTPRequest实例添加onreadystatechange事件处理程序（当然你也可以直接使用DOM2级规范规定的.addEventListener()方法，但是注意，IE8是不支持该方法的）。
xhr实例的readystatechange事件会监听xhr.readyState属性的变化，你可以将这个属性想象为一个计数器，随着AJAX流程的推进而不断累加，其可取的值如下：
0：未初始化 -- 尚未调用.open()方法；
1：启动 -- 已经调用.open()方法，但尚未调用.send()方法；
2：发送 -- 已经调用.send()方法，但尚未接收到响应；
3：接收 -- 已经接收到部分响应数据；
4：完成 -- 已经接收到全部响应数据，而且已经可以在客户端使用了；
有了这个时间处理程序对AJAX进程做监听，剩下的事就简单多了，一个异步的GET请求代码如下：
const xhr = new XMLHttpRequest()
xhr.onreadystatechange = () =& {
if (xhr.readystate == 4) {
if ((xhr.status &= 200 && xhr.status & 300) || xhr.status == 304) {
alert(xhr.responseText)
alert(&Request was unsuccessful: & + xhr.status)
xhr.open(&get&, &example.php&, true)
xhr.send(null)
注意：为了确保跨浏览器的兼容性，必须要在调用.open()方法之前指定事件处理程序，仔细想想也有道理，毕竟.open()方法的执行也包含在该事件处理程序的监听范围之内对吧？
七、取消异步请求
有时候，你可能需要在接收到响应之前取消异步请求，这时候，你需要调用.abort()方法。
该方法会令XHR对象实例停止触发事件，并且不再允许访问任何和响应有关的对象属性。没了监控器，我们再也没法判断响应了不是吗？
但是需要注意的是，当终止AJAX请求后，你需要手动对XHR对象实例进行解绑以释放内存空间。
?? 恭喜你！到这里你已经学会了所有的AJAX基础知识，你知道了AJAX是什么，存在的意义以及如何真正发起一个AJAX请求并接收响应，你已经是一个AJAX大师！祝贺你！太棒了！??
? 真棒，尊敬的AJAX大师，你居然还没有离开，那么我将传授你最后一部分AJAX秘籍，帮助你成为一个真正的AJAX忍者，这是你的坚持赢得的！
八、秘籍：XMLHttpRequest 2级
还记得我们一开始有提到，W3C提出了XMLHttpRequest 2级规范吗？虽然并非所有的浏览器都实现了该规范所规定的内容，但还是有一些内容被全部或大多数浏览器所实现。想成为AJAX忍者？往下看吧。
提示：在这一部分，你将会看到很多有关浏览器兼容性的文字，希望你不要觉得枯燥，毕竟这可是忍者的修行，对吧？
（一）FormData 类型
FormData是XMLHttpRequest 2级为我们提供的新的数据类型（构造函数），还记的我们之前是如何伪装一个POST请求为一个表单提交吗？FormData令这一过程变得更加轻松，因为XHR对象能够识别传入的数据类型是FormData的实例，并自动配置适当的头部信息。
FormData的使用方式如下：
// 添加数据
let data1 = new FormData()
data1.append(&name&, &Tom&)
xhr.send(data1)
// 提取表单数据
let data2 = new FormData(document.forms[0])
xhr.send(data2)
除此之外，FormData的另一个好处是相较于传统的AJAX请求，它允许我们上传二进制数据（图片，视频，音频等），具体详情可查看该。
FormData的浏览器兼容性：
IE 10+ 与其他浏览器均支持
Android，Firefox Mobile，OperaMobile均支持，其余浏览器未知
（二）超时设定
当我们发送一个AJAX请求，却迟迟得不到服务器响应，这种感觉是很糟糕的。为了缓解这种糟糕的感觉，XMLHttpRequest 2级规范为我们提供了一个额外的属性和事件监听事件：
timeout属性：设置超时时间，单位为毫秒；
timeout事件：当响应时间超出实例对象timeout属性时被触发；
使用方式如下：
// 当响应时间超过1秒时，请求中止，弹出提示框
xhr.timeout = 1000
xhr.ontimeout = () =& { alert(&Request did not return in a second.&) }
注意，当请求终止时，会调用ontimeout事件处理程序，此时xhr的readyState属性的值可能已变为4，这意味着会继续调用onreadystatechange事件处理程序，但是当超时中止请求后再访问xhr的status属性会使浏览器抛出一个错误，因此需要将检查status属性的语句放入try-catch语句中。
虽然带来了一些麻烦，但是我们却对XMLHttpRequest对象有了更多的控制。
浏览器兼容性：
IE 10+ 与其他浏览器均支持
IE Mobile 10+ 与其他浏览器均支持
（三）overrideMimeType()方法
响应返回的响应头里，描述了返回数据的MIME类型，浏览器通过识别该类型，告知XMLHttpRequest实例处理该数据的方式。然而有时候（例如将XML类型数据当做纯文本处理），我们想要以我们想要的方式处理响应的数据，在XMLHttpRequest 2级规范中，我们可以使用.overrideMimeType()方法，从方法名也可以轻松猜出，该方法可以覆写响应头所描述数据的MIME类型。
其写法如下：
const xhr = new XMLHttpRequest()
xhr.open(&get&, &example.php&, true)
xhr.overrideMimeType(&text/xml&) // 强迫浏览器将响应数据以指定类型方式解读
xhr.send(null)
至此，我们掌控了响应数据的处理方式。
浏览器兼容性：
IE 7+ 与其他浏览器均支持
Firefox Mobile，Chrome for Android 均支持，其余浏览器未知
（四）进度事件
Progress Events规范是W3C制定的一个工作草案。该规范定义了与客户端与服务器通信相关的一系列事件，这些事件监听了通信进程中的各个关键节点，使我们能够以更细的颗粒度掌控数据传输过程中的细节。目前共有6个进度事件，他们会随数据传输进展被顺序触发（除了error，abort事件），让我们看看他们的定义和浏览器兼容情况：
loadstart：在接收到响应数据的第一个字节时触发；
桌面端：除 Safari Mobile 未知外，其他浏览器均支持
移动端：除 Safari Mobile 未知外，其他浏览器均支持
progress：在接收响应期间持续不断地触发；
桌面端：IE10+ 与其他浏览器均支持
移动端：均支持
error：在请求发生错误时触发；
桌面端：所有浏览器均支持（）
移动端：除IE Mobile不支持外，其他浏览器均支持（）
abort：再因为调用abort()方法时触发；
桌面端：未知
移动端：未知
load：在接收到完整的响应数据时触发；
桌面端：IE7+ 与其他浏览器均支持
移动端：Chrome for Android，Edge，Firefox Mobile支持，其余浏览器未知
loadend：在通信完成或者触发error，abort或load事件后触发；
桌面端：所有浏览器不支持
移动端：所有浏览器不支持
这里我们将着重展开讲解以下两个事件：
① load事件
该事件帮助我们节省了readstatechange事件，我们不必在XHR对象实例上绑定该事件监听函数以追踪实例上readState属性的变化，而是可以直接使用以下代码：
const xhr = new XMLHttpRequest()
xhr.onload = () =& {
if ((xhr.status &= 200 && xhr.status &300) || xhr.status == 304) {
alert(xhr.responseText)
alert(&Something wrong!&)
xhr.open(&get&, &example.php&, true)
xhr.send(null)
② progress事件
该事件令我们可以实现我们梦寐以求的加载进度条效果。因为onprogress事件处理程序会接收到一个event对象，其target属性为XHR对象实例，但却额外包含着三个属性：
lengthComputable：表示进度信息是否可用的布尔值；
position：表示目前接收的字节数；
totalSize：表示根据Content-Length响应头部确定的预期字节数；
很显然，我们的加载进度条所需的一切资源都准备就绪，我们只需写出下面的代码：
const xhr = new XMLHttpRequest()
xhr.onload = () =& {
if ((xhr.status &= 200 && xhr.status &300) || xhr.status == 304) {
alert(xhr.responseText)
alert(&Something wrong!&)
// 加载进度条
xhr.onprogress = function(event) {
const divStatus = document.getElementById(&status&)
if (event.lengthComputable) {
divStatus.innerHTML = `Received ${event.postion} of ${event.totalSize} bytes`
xhr.open(&get&, &example.php&, true)
xhr.send(null)
一切大功告成！不过还要记得注意，需要在.open()方法前调用onprogress事件处理程序。
太棒了，关于AJAX，我已经没有什么可说的了，如果你已经掌握了以上所有概念，那么“AJAX忍者”的称号你当之无愧。
我真的为你感到骄傲，Great Work！?
阅读(...) 评论()解决办法：在调用ajax方法之前加上jQuery.support.cors =
IE下跨域出现No Transport
jQuery .Ajax() 方法在IE浏览器返回No Transport错误原因？
IE8数据$.ajax()方法请求数据，在现代浏览器中工作正常，但在 IE 8 下，会有报错：no transport
ie9以下版本，ajax的error提示no transport的问题
$.ajax请求数据 IE报 no transport 或拒绝访问
IE8下$.ajax跨域返回textStatus为“No transport”
没有更多推荐了，UploadServlet.java
@WebServlet(&/upload.do&)
@MultipartConfig
UploadServlet extends
HttpServlet {
&&&&@Override
&&&&public
doPost(HttpServletRequest request, HttpServletResponse response) throws
ServletException, IOException {
&&&&&&&&String
filePath = WebUtil.getFilePath(request, &files&);
&&&&&&&&Part
part = request.getPart(&file&);
&&&&&&&&String
fileName = WebUtil.getFileName(request, part);
&&&&&&&&part.write(filePath
+ fileName);
&&&&&&&&Map&String,
Object& data = new
HashMap&String, Object&();
&&&&&&&&data.put(&fileName&,
fileName);
&&&&&&&&data.put(&fileType&,
part.getContentType());
&&&&&&&&data.put(&fileSize&,
part.getSize());
&&&&&&&&WebUtil.writeJson(response,
upload.html
id=&login_form&
action=&/upload.do&
method=&post&
enctype=&multipart/form-data&&
&&&&&&&&&label
for=&file&&File:&/label&
&&&&&&&&&input
type=&file&
name=&file&/&
&&&&&&&&&button
type=&submit&&Upload&/button&
id=&console&&&/div&
$(function()
$('#login_form').ajaxForm({
& & beforeSubmit:
function()
& & & & if
($('#file').val()
& & & & & & alert('Please
choose a file!');
& & & & & & return
& & success:
function(json)
& & & & if
& & & & & & var
html = '';
& & & & & & html
+= '&p&File
+ json.fileName + '&/p&';
& & & & & & html
+= '&p&File
+ json.fileType + '&/p&';
& & & & & & html
+= '&p&File
+ json.fileSize + '&/p&';
& & & & & & $('#console').html(html);
在Chrome、Firefox上运行正常，在IE8+中运行时，提示下载，如下图：&
'Content-Type:text/ charset=utf-8'&
--- 共有 2 条评论 ---
刚刚发现，IE10可以支持application/json格式的Response了，也就是说低于IE10版本一下的IE浏览器都需要使用text/html格式的Response。&(2年前)&&
在Response头中指定Content-Type为text/html，而并非text/html，是可以解决问题的。这样返回给客户端的是一个JSON字符串（并非JSON对象），无需IE来解析。随后，使用JSON.parse()函数将JSON字符串解析为JSON对象即可。非常感谢你的回答！
但客户端JS代码有些不够优雅，能否通过统一的方式来设置呢？
百度了下，应该是没加dataType：
期望返回的数据类型。null、“xml”、“script”或者“json”其中之一。dataType提供一种方法，它规定了怎样处理服务器的响应。这个被直接地反映到jQuery.httpData方法中去。下面的值被支持：
'xml'：如果dataType == 'xml'，将把服务器响应作为XML来对待。同时，如果“success”回调方法被指定， 将传回responseXML值。
'json'：如果dataType == 'json'， 服务器响应将被求值，并传递到“success”回调方法，如果它被指定的话。
'script'：如果dataType == 'script'， 服务器响应将求值成纯文本。
默认值：null（服务器返回responseText值）
出处：http://www.oschina.net/question/703
返回JSON数据，在IE下提示下载文件
服务器返回JSON，IE出现下载问题
IE使用ajaxFileUpload上传文件后台返回json类型前台弹出下载提示框
解决使用IE浏览器进行上传（ajaxFileUpload）后，浏览器会提示下载的问题（踩坑记录）
ie8下使用jquery-file-upload上传文件后返回json格式数据提示下载
解决IE下返回json数据提示文件保存到问题
IE下ajax返回值为json弹出下载框的方法总结
ie8/9收到json数据后提示下载的解决方法
没有更多推荐了，如何取得ajax返回值中的responseText？
[问题点数：100分，结帖人a]
本版专家分：20
结帖率 89.53%
CSDN今日推荐
本版专家分：17584
2012年3月 Web 开发大版内专家分月排行榜第一
2012年2月 Web 开发大版内专家分月排行榜第二
本版专家分：1875
本版专家分：286
本版专家分：4140
本版专家分：4140
本版专家分：20
本版专家分：29411
2012年9月 Web 开发大版内专家分月排行榜第三2012年8月 Web 开发大版内专家分月排行榜第三
本版专家分：487
本版专家分：20
本版专家分：6710
匿名用户不能发表回复！
其他相关推荐