Ajax

Ajax 的核心技术是XMLRequestHttp对象，简称（XHR）。XHR为向服务器发送请求和解析服务器响应提供了流畅的接口。

Ajax技术能以异步的方式向服务器请求数据，实现无需刷新整个页面的更新。

XMLHttpRequest

var xhr=new XMLHttpRequest();

xhr.onreadystatechange=function(){
    if(xhr.readyState==4){
         if((xhr.status>=200&&xhr.status<300) || xhr.status==200){
                 alert(xhr.responseText);
         }else{
                 alert("Request was unseccessful: "+ xhr.status);
         }
     }
}


xhr.open("GET”，“example.php”,false);                  //第2个参数url  同源
xhr.send(null);

收到响应后，响应的数据会自动填充xhr对象的属性

responseText：无论内容类型是什么，响应主体都会保存到这个属性中

status ：响应的HTTP状态状态为304表示请求的资源没有过期，可以直接使用浏览器缓存中的版本

statusText ： HTTP状态的说明

readyState ： 0：尚未调用open方法 1尚未调用send方法 2 已经调用send方法，还没收到响应 3 收到部分响应数据 4 已经接收到全部响应的数据，可以在客户端使用了。

XMLHttpRequest 2

旧版本的缺点：

1 只支持文本数据（<input type="text" name="xxx" />）的传送，无法用来读取和上传二进制文件。

2 传送和接收数据时，没有进度信息，只能提示有没有完成。

3 受到"同域限制"（Same Origin Policy），只能向同一域名的服务器请求数据。

新版本的一些功能扩充：　

1 可以使用HTML FormData对象管理表单数据。可以上传文件。

2 可以设置HTTP请求的时限。超时设定 xhr.timeout=3000;xhr.ontimeout=function(){};

3 可以获得数据传输的进度信息。上传 xhr.upload.onprogress=fucntion(e){e.loaded/e.total} 下载xhr.onprogress=function(){}

　新版本的XMLHttpRequest对象，传送数据的时候，有一个progress事件，用来返回进度信息。

　它分成上传和下载两种情况。下载的progress事件属于XMLHttpRequest对象，上传的progress事件属于XMLHttpRequest.upload对象。

XHR2: 包括progress事件，一共有6个进度事件，可以分别指定回调函数：

　　 loadstart

　　　　progress

　　　　error　　　　　　请求发生错误时出发

　　　　abort

　　　　load 　　　　　　在接收到完整的响应时出发（xhr.onload 相当于 xhr.readystate=4 ?）

　　　　loaded

　 每个请求都从出发loadstart时间开始，接下来是一个或多个progress事件，然后出发error、abort、load事件中的一个，最后以出发loaded事件结束。

4 可以跨域请求。HTML5新的标准中，增加了” Cross-Origin Resource Sharing”特性，这个特性的出现使得跨域通信只需通过配置http协议头来即可解决。

一使用FormData管理表单数据上传二进制文件

正常的表单提交：

<form action="form_action.asp" method="post" enctype=“application/x-www-form-urlencoded” id="form1">
  <input type="text" name="fname" />
  <input type="text" name="lname" />
  <input type="submit" value="Submit" />
</form>

js:       document.getElementById("form1").submit();
jQuery:   $("form1").submit();

表单 enctype 属性规定在发送表单数据之前如何对其进行编码。

可能的值：

application/x-www-form-urlencoded 窗体数据被编码为名称/值对。这是标准（默认）的编码格式。将参数组装成Key-value方式，用&分隔
multipart/form-data 窗体数据被编码为一条消息，页上的每个控件对应消息中的一个部分。这种方式一般用来上传文件，或大批量数据时。
text/plain 窗体数据以纯文本形式进行编码，其中不含任何控件或格式字符

multipart/form-data 是上传二进制数据，form里面的input的值以2进制的方式传过去，所以这里要明白，使用这种格式以后，后台request就获取不到数据了。（服务端如何接收 multipart/formdata 类型的表单？？？根据请求头的 Content-Type: multipart/form-data; boundary=ZnGpDtePMx0KrHh_G0X99Yef9r8JZsRJSXC 中的boudary 分段解析服务器根据此边界解析数据。下面的数据便根据boundary划分段，每一段便是一项数据。）

enctype属性是设置提交数据的格式，指定将数据回发到服务器时浏览器使用的编码类型。

xhr模仿表单提交：

1 必需设置头部信息"Content-Type","application/x-www-form-urlencoded" 在open方法之后 send方法之前

var data=$("#formId").serialize(); serialize() 方法通过序列化表单值，创建 URL 编码文本字符串。a=1&b=2&c=3&d=4&e=5

xhr.open("GET”，“example.php”,false);

xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")

xhr.send(data)

2 使用 HTML5 Formdata （为序列化表单以及创建与表单格式相同的数据提供了便利）

（1）用法：

　　 var form=document.getElementById("#formId") //获取表单元素

var data=new FormData(form); //向FormData构造函数中传入表单元素

data.append("key","value"); //在已有表单数据的基础上,继续添加新的键值对

xhr.open("post",example.php",false);

xhr.send(data)

（2）优点：不必明确在XHR对象上设置请求头部，XHR对象能识别传入的数据类型是FormData 的实例，并配置适当的头部信息。 ( Content-Type: multipart/form-data; boundary=ZnGpDtePMx0KrHh_G0X99Yef9r8JZsRJSXC )

HTML5 FormData对象使得xhr 支持上传二进制文件

二超时设定

三进度事件

主要progress、load、error事件

四 CORS（cross origin resource sharing）跨源资源共享

通过XHR实现Ajax通信的一个主要限制，来源于跨域安全策略。默认情况下，XHR对象只能访问与包含它的页面在同一个域中的资源。

请求头 Origin:

响应头 Access-Control-Allow-Oringin: