我试图发送某种形式而不重新加载页面,并且试图理解幕后细节,因此不使用任何JavaScript库:
var http = createRequestObject(); function createRequestObject() { var objAjax; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari objAjax=new XMLHttpRequest(); } else {// code for IE6, IE5 objAjax=new ActiveXObject("Microsoft.XMLHTTP"); } return objAjax; } function display_progress() { ... } function upload_file() { var request = 'UploaderServlet'; http.open('post', request); http.onreadystatechange = display_progress; http.send(null); // HERE PROBABLY THE DATA SHOULD BE SENT } <form enctype="multipart/form-data" id="upload_form" name="upload_form" method="POST" action="UploaderServlet" onsubmit="upload_file(); return false;" target="upload_target"> Choose a file <br /> <input name="file" size="27" type="file" id="file" /> <br/> <input type="submit" name="uploadSubmitButton" value="Upload" /><br /> <br /> </form> <iframe id="upload_target" name="upload_target" src="#" style="width:0;height:0;border:0px solid #fff;"></iframe>
调用了upload_file(),但如果我做对了,则不会发送数据。请提供有关发送数据的正确方式的建议。
通过表单传递属性 {url:"",method:"",data:{...},callback:function(){}}
{url:"",method:"",data:{...},callback:function(){}}
var ajax=function(){ try{ var xml =new XMLHttpRequest(); var args =arguments; var context =this; var multipart =""; xml.open(args[0].method,args[0].url,true); if(args[0].method.search(/post/i)!=-1){ var boundary=Math.random().toString().substr(2); xml.setRequestHeader("content-type", "multipart/form-data; charset=utf-8; boundary=" + boundary); for(var key in args[0].data){ multipart += "--" + boundary + "\r\nContent-Disposition: form-data; name=" + key + "\r\nContent-type: application/octet-stream" + "\r\n\r\n" + args[0].data[key] + "\r\n"; } multipart += "--"+boundary+"--\r\n"; } xml.onreadystatechange=function(){ try{ if(xml.readyState==4){ context.txt=xml.responseText; context.xml=xml.responseXML; args[0].callback(); } } catch(e){} } xml.send(multipart); } catch(e){} }
如果您想获得回覆,可以使用这个
var response={}; ajax.call(response,{...args...})
您可以通过response.txt或检索所有数据response.xml
response.txt
response.xml
更新有点晚
至于有关<input type='file'>上传的@Varun问题,此代码无法直接处理文件上传,要使用此代码发送文件,您需要使用File API对原始文件数据进行预处理,以获取非二进制流(例如base64或任何其他类似于bin2hex的形式)。
<input type='file'>
但是,由于这是2015年,我可以建议从多部分流的构造过渡到更强大的构造,例如FormData API。