ajax初级问题，重谢！
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ajax初级问题，重谢！相关的知识，希望对你有一定的参考价值。
具体问题描述请参考以下页面我的描述:
http://bbs.blueidea.com/viewthread.php?tid=2905168&pid=4360264&page=1&extra=page%3D1#pid4360264
以下是两个页面的完整代码，复制保存并放到同一目录下即可测试.问题解决后加50
ajax.html
-----------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function createXHR()
var xmlHtttpObj;
if(window.XMLHttpRequest)
xmlHtttpObj=new XMLHttpRequest();
else
try
xmlHtttpObj=new ActiveXObject("Msxml2.XMLHTTP");
catch(e)
try
xmlHtttpObj=new ActiveXObject("Microsoft.XMLHTTP");
catch(e)
xmlHtttpObj=false;
return xmlHtttpObj;
var xmlHttp=null;
function sendRequest()
if(!xmlHttp) xmlHttp=createXHR();
if(!xmlHttp) return;
var url='handle.php?x=e';
xmlHttp.open('GET',url,true);
xmlHttp.onreadystatechange=handleBack;
xmlHttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xmlHttp.send(null);
function handleBack()
alert(xmlHttp.status);
if(xmlHttp.readyState==4)
alert(xmlHttp.responseText);
</script>
</head>
<body>
<a href="##" onclick="sendRequest()">send request</a>
</body>
</html>
handle.php
--------------------
<?php
if(isset($_GET['x']) and $_GET['x']=='e')
echo 'ddd';
else
echo 'fuck';
?>
正确解决方法为ajax.html ---》 ajax.php
if (xmlHttp.readyState==4)if(xmlHttp.status==200)
alert(xmlHttp.responseText);
[JavaScript]_[初级]_[不使用JQuery原生Ajax提交表单文件并监听进度]
场景
- 不可否认，使用
JQuery来提交表单文件还是比较方便的。问题是JQuery性能问题，去掉JQuery如何提交文件，并且监听文件的提交进度？
说明
-
提交表单文件
<form enctype="multipart/form-data"...需要增加enctype="multipart/form-data"的属性，不然无法提交成功。 -
使用原生
XMLHttpRequest技术提交文件时， 是不需要设置Content-Type[5]的。 -
对上传文件进行进度监听，是需要监听
XMLHttpRequest的属性upload的progress[1]事件的。ProgressEvent的两个关键值loaded表示底层已经处理的字节数，单位是64位无符号整型，另一个total表示底层需要处理的总字节数。
r.upload.addEventListener('progress', function (e)
var progressRateInt = parseInt(e.loaded * 100 / e.total);
var progress = document.getElementById("myProgress");
progress.value = progressRateInt;
var percent = document.getElementById("percent");
percent.innerHTML = progressRateInt+"%";
);
- 发送文件表单里的其他输入框数据，不再需要把
FormData的值提取出来组合成key1=value1&key2=value2...的形式。可直接发送。
const oData = new FormData(form);
r.send(oData);
例子
function asyncSubmit(form,action)
const oData = new FormData(form);
var progress = document.getElementById("myProgress");
progress.value = 0;
var r = new XMLHttpRequest();
r.open("POST", action,true);
r.onreadystatechange = function ()
if (r.readyState != 4 || r.status != 200) return;
var data = JSON.parse(r.responseText);
if(data.status == 1)
if(data.message.length > 0)
var imgPath = JSON.parse(data.message);
if(imgPath.bannerImg)
var bannerImg = document.getElementById("bannerImg");
bannerImg.value = imgPath.bannerImg;
var imgUrl = document.getElementById("img_url");
imgUrl.href = "/upload/"+imgPath.bannerImg;
else
alert("Submit error.");
;
r.upload.addEventListener('progress', function (e)
var progressRateInt = parseInt(e.loaded * 100 / e.total);
var progress = document.getElementById("myProgress");
progress.value = progressRateInt;
var percent = document.getElementById("percent");
percent.innerHTML = progressRateInt+"%";
);
r.send(oData);
参考
以上是关于ajax初级问题，重谢！的主要内容，如果未能解决你的问题，请参考以下文章
[JavaScript]_[初级]_[不使用JQuery原生Ajax提交表单文件并监听进度]
[JavaScript]_[初级]_[不使用JQuery原生Ajax提交表单文件并监听进度]
[JavaScript]_[初级]_[不使用JQuery原生Ajax提交表单文件并监听进度]