action 表单提交地址
method 提交方法
1、get
提交的数据通过地址栏发送，数据添加到地址栏的问号后面
数据形式：数据名=数据值&数据名=数据值
username=输入的内容&password=输入的内容
2、post
提交的数据通过请求头发送（头部信息，能过控制台可以看到）
<!--name是用来存储数据的，-->
<!--没有Ajax以前就用form来把数据传送-->
<form action="http://baidu.com/" method="get">用户名：<input type="text" name="username" />密码：<input type="password" name="password" /><input type="submit" /></form>
二、Ajax是什么
* Ajax是一种技术方案，但并不是一种新技术。它依赖的是现有的CSS/HTML/Javascript，而其中最核心的依赖是浏览器提供的XMLHttpRequest对象，是这个对象使得浏览器可以发出HTTP请求与接收HTTP响应。
* XMLHttpRequest作用和form一样。
* ajax:Asynchronous JavaScript and XML(异步js和XML)
* 异步js：js的代码都是至到而下执行的（同步），如果一块代码没有执行完毕，那后面的代码就不会执行。异步就是ajax可以做到不按顺序执行
* XML：存储数据的一种格式
* <name>陈学辉</name>
* <age>18</age>
* <qq>356985332</qq>
* <email>kaivon@126.com</email>
*
* ajax不光能够处理XML格式的数据，还可以处理json、数组、字符串类型的数据
*
* ajax到底能干嘛
* js与后端进行数据交互的一种技术，通过请求协商好的接口，来获取到想要的数据
*
* 优点
* 传输数据时候会在本页面请求服务器，不用跳转页面，从而减轻服务器压力。做到实时验证，减少用户返工率并且优化用户体验
三、服务器环境的安装 * AJAX是基于http（https）（线上）协议，所以只能在HTTP服务器环境下运行。我们在本地打开的页面，走的是file协议。
* 本地安装服务器环境用wampserver
* 1、www目录下的文件夹不能以中文命名，但是文件里面的html文件可以用中文命名
*
* 第三方的软件中的目录就代表了线上的环境了（用本地路径摸你线上）
* 以后的文件就要放在这个www的文件目录下 * 运行的地址（一定要在locallhost下运行才可以）
localhost/该页面存放在www的那个文件夹的名称/页面的名字
四、Ajax交互流程
1.XMLHttpRequset（不兼容低版本浏览器IE6）
//因为XMLHttpRequest是浏览器身上的，如果没有就说明在IE6的环境下了。//IE6提供的XMLHttpRequest是在ActiveXObject('Microsoft.XMLHTTP')身下var ajax=window.XMLHttpRequest?new XMLHttpRequest:new ActiveXObject('Microsoft.XMLHTTP');
2.
* ajax.readyState AJAX运行步骤(第一步捕捉不到)
* 它的值为4的话说明AJAX已经运行完成
* 0 初始化 还没有调用open()方法
* 1 载入 已调用send()方法，正在发送请求
* 2 载入完成 send()方法完成，已收到全部响应内容
* 3 解析 正在解析响应内容
* 4 完成 响应内容解析完成，可以在客户端调用了
*
*
* ajax.status 服务器对请求的反馈(状态码)
* 200就是成功的，404就是错误的
3.
* onreadystatechange
* readyState的值发生改变时触发的事件，只要这个值有变化就会触发
*
* onload
* 所有请求成功完成后触发，此时readystate的值为4
* （IE678兼容） 4.* ajax数据交互流程
* 1、创建一个ajax对象 买了一个电话
* 2、填写请求地址 输入号码
* 3、发送请求 拨号
* 4、等待服务器响应 等待
* 5、接收数据 通话 有两种方法，一种用get,一种用post它们的区别是
get方式
1、通过地址栏信息进行数据传输，传输的大小有限制
2、不安全，用户的所有信息都会暴露出来
3、拼接数据的时候要用encodeURI转一下码，不然有中文就会乱码(在IE6下)
4、不用设置请求头
5、数据拼接在open方法里
6、会有缓存问题
post方式
1、通过send向服务器传输数据，理论上来说是没有长度或体积限制
2、相对来说安全，因为不直接暴露用户信息
3、不用转码，已经通过请求头设置了数据格式，不会有乱码
4、在send()的前面需要设置一个请求头（不设置要出错）
ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
5、数据要拼接在send方法里
6、没有缓存问题用get的方法
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="提交" />
用post的方法
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="提交" />