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: