<form action="http://baidu.com/" method="get">用户名：<input type="text" name="username" />密码：<input type="password" name="password" /><input type="submit" /></form>
//因为XMLHttpRequest是浏览器身上的，如果没有就说明在IE6的环境下了。//IE6提供的XMLHttpRequest是在ActiveXObject(‘Microsoft.XMLHTTP‘)身下var ajax=window.XMLHttpRequest?new XMLHttpRequest:new ActiveXObject(‘Microsoft.XMLHTTP‘);
window.onload=function(){var inputs=document.querySelectorAll("input");inputs[2].onclick=function(){var val=inputs[0].value;//1、创建一个ajax对象var ajax=window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject(‘Microsoft.XMLHTTP‘);//2、填写请求地址 方法用get还是post是看后端文件的 ？后面的就是发送的数据，而这个存数据的变量名字也要和后端文件里的名字对应才可以ajax.open(‘get‘,‘php/get.php?user=‘+encodeURI（val),true);//.php为后台的文件//3、发送请求ajax.send();//4.等待服务器响应if(typeof ajax.onload==‘undefined‘){ajax.onreadystatechange=result;}else{ajax.onload=result;}//5、接收数据function result(){if(ajax.readyState==4){if(ajax.status==200){var span=document.querySelector("span");span.innerHTML=ajax.responseText;}else{alert(‘返回数据失败‘)}}}};};用户名：<input type="text" name="username" /><span></span><br /><br />密码：<input type="password" name="password" /><input type="button" value="提交" />
window.onload=function(){var inputs=document.querySelectorAll("input");inputs[2].onclick=function(){var val=inputs[0].value;//1、创建一个ajax对象var ajax=window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject(‘Microsoft.XMLHTTP‘);//2、填写请求地址 方法用get还是post是看后端文件的 ？后面的就是发送的数据，而这个存数据的变量名字也要和后端文件里的名字对应才可以//open里面的true和false是决定其执行模式， true是异步 false是同步ajax.open(‘post‘,‘php/post.php‘,true);//.php为后台的文件//3、发送请求//post的方法要在send之前设置表头ajax.setRequestHeader(‘Content-Type‘,‘application/x-www-form-urlencoded‘);ajax.send(‘user=‘+val);//4.等待服务器响应if(typeof ajax.onload==‘undefined‘){ajax.onreadystatechange=result;}else{ajax.onload=result;}//5、接收数据function result(){if(ajax.readyState==4){if(ajax.status==200){var span=document.querySelector("span");span.innerHTML=ajax.responseText;}else{alert(‘返回数据失败‘)}}}};};用户名：<input type="text" name="username" /><span></span><br /><br />密码：<input type="password" name="password" /><input type="button" value="提交" />
/* //ajax的上传配合表单input type=‘file‘这个控件 和progress* 上传只能用post的方式，并且后台需要处理中文* ajax.upload.onprogress 上传的进度事件* ev.loaded 已经上传文件的大小* ev.total 总文件的大小** FormData 用来创建与表单格式相同的数据，它是由XMLHttpRequest 2级定义。获取到的是一个二进制数据* //其里面会拼接数据* FormData.append(文件名,文件值)** files 上传选中的所有文件列表，放在type为file的表单控件中* 这里包括：最后修改的时间、大小、类型等等*/window.onload=function(){var inputs=document.querySelectorAll("input");var progress=document.querySelector("progress");inputs[1].onclick=function(){var ajax=new XMLHttpRequest();ajax.open(‘post‘,‘php/post_file.php‘,true);//上传进度监听的事件ajax.upload.onprogress=function(ev){progress.value=ev.loaded/ev.total*100;};//console.log(inputs[0].files);//input type=‘flie‘ 身上有files事件，文件信息储存在这里面//把上传的数据拼接然后发送给后台， 以下就是拼接数据var formadata=new FormData();for(var i=0;i<inputs[0].files.length;i++){//这里就是拼接数据formadata.append(‘file‘,inputs[0].files[i]);}ajax.setRequestHeader(‘Content-Type‘,‘application/x-www-form-urlencoded‘);ajax.send(formadata);ajax.onload=function(){};};};<!--progress是H5新增的 显示进度条--><progress value="0" max="100"></progress><!--multiple是可以多选文件的意思--> <!--accept决定上传文件的格式--><!--<input type="file" multiple="multiple" accept="application/pdf" />--><input type="file" multiple="multiple" /><input type="button" value="提交" />
原文：http://www.cnblogs.com/CafeMing/p/6714577.html