AJax与Comet，跨源资源共享

Ajax技术能够向服务器请求额外的数据而无须卸载页面，带来更好是用户体验。
其核心技术书XMLHttpRequest对象，简称XHR，能够已异步方式从服务器获得更多的信息，然后再通过DOM将新的数据插入到页面中。
Ajax中虽然包含XML的成分，但是Ajax通信与数据格式无关。

1.1XMLHttpRequest对象

var xhr = createXHR();

1.1.1 XHR 的用法

• 调用open方法：xhr.open(“get”,”example.php”,false)；在此需要注意的是：1）URL相对于执行代码的当前页面；2）调用open方法，并不会真正的发生请求，只是启动了一个请求以备发送。false表示同步
• 调用send方法：xhr.send(null);//一个参数，作为请求主体发送的数据，没有要发的，则传null，必须要有。

• 收到服务器的响应后，响应的数据会自动填充XHR对象的属性

  • responseText：作为响应主体被返回的文本
  • responseXML：“text/xml”或者”application/xml”:则在这个属性中包含中响应数据的XML DOM文档
  • status：响应的HTTP状态
  • statusText：HTTP状态的说明

  第一步：检查status属性
  第二步：发送responseText
  if((xhr.status >= 200 && xhr.status <300)|| xhr.status ==304) alert(xhr.responseText);
  else alert(“Request was unsuccessful:”+ xhr.status);

• 在异步请求时，需要检测XHR的readyState属性
  
  • 0： 为初始化。尚未调用open
  • 1：启动。调用了 open ，未调用send
  • 2：发送。 调用了send ，未接收的响应
  • 3：接收。已经接收到部分响应数据
  • 4：完成。已经接收到全部响应数据

 var xhr = createXHR();
     xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
             if((xhr.status >= 200 && xhr.status <300)|| xhr.status ==304)                      
                alert(xhr.responseText);
        else 
            alert("Request was unsuccessful:"+ xhr.status);          
        }
    };
    xhr.open("get","example.txt",true);
    xhr.send(null);

1.1.2 HTTP头部信息

• Accept：浏览器能够处理的内容类型
• Accept-Charset:浏览器能够显示的字符集
• Accept-Encoding:浏览器能够处理的的压缩编码
• Accept-Language：浏览器当前设置的语言
• Connection：浏览器与服务器之间的连接类型
• Cookie：当前页面设置的任何cookie
• Host：发出请求的页面所在的域
• Referer:发出请求的页面的URI
• User-Agent：浏览器的用户代理字符串

Get请求

向服务器查询某些信息
xhr.open(“get”,”example.php?name1=value1&name2=value2”,true);

Post请求

通常用于向服务器发送应该被保存的数据
xhr.open(“post”,”example.txt”,true);

 var xhr = createXHR();
     xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
             if((xhr.status >= 200 && xhr.status <300)|| xhr.status ==304)                      
                alert(xhr.responseText);
        else 
            alert("Request was unsuccessful:"+ xhr.status);          
        }
    };
    xhr.open("post","example.php",true);
    xhr,setRequestHeader("Content-Type","application/w-www-form-urlencoded");//设置为表单提交时的类型
    var form = document.getElementById("user-info");
    xhr.send(serialize(form));
    xhr.send(null);

2.1 XMLHttpRequest 2级

2.1.1 FormData

FormData为序列化表单以及创建与表单格式相同的数据提供了便利

var data = new FormData();
data.append("name","Nicholas");

2.1.2 超时设定

xhr.timeout = 1000;//表示请求在等待响应1秒后就终止。

2.1.3 overrideMimeType()方法

用于重写XHR响应的MIME类型

2.3 进度事件

• loadstart:在接收到响应数据的第一个字节时触发
• progress：在接收响应期间持续不断地触发
• error：在请求发生错误时触发
• abort：在因为调用 abort() 方法而终止连接时触发
• load：在接到完整的响应数据时触发
• loadend：在通信完成或者触发 error、abort、或者load事件后触发

2.4 跨源资源共享—CORS(Cross-Origin Resource Sharing)

通过XHR实现Ajax通信的一个主要限制，来源与跨域安全策略。默认情况下，XHR对象只能访问与包含它的页面位于同一个域中的资源。
CORS背后的基本思想，就是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功，还是应该失败
Access-Control-Allow-Origin：http://www.nczonline.net
作为头部信息发送请求信息，如果没有这个头部，或者这个头部但源信息不匹配，浏览器就会驳回请求。

2.5 其他跨越技术

2.5.1 图像Ping

使用标签，我们知道，一个网页可以从任何网页中加载图像，不用担心跨域的问题。

2.5.2 JSONP

JSONP是JSON with padding（填充式JSON）的缩写，是被包含在函数调用中的JSON

callback({"name":"Nicholas"});

JSONP 由俩个部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的。而数据就是传入回调函数中的JSOB数据

http://freegeoip.net/json/?callback=handleResponse

JSONP 是通过动态

2.5.3 Commet

如果说Ajax是一种从页面向服务器请求数据的技术，而Commet则是一种服务器向页面推送数据的技术。
实现comet的两种方式：

+ 长轮询：浏览器定时向服务器发送请求，看有没有更新的数据、
+ HTTP流：与轮询不同在整个生命周期内只使用一个HTTP连接。即浏览器向服务器发送一个请求，而服务器保持连接打开，然后周期性地向浏览器发送数据。

2.5.4 服务器发送事件

SSE（Server - Sent Events,服务器发送事件）是围绕只读Comet交互推出的API或者模式。SSE用于创建到服务器的单向连接，服务器通过这个连接可以发送任意数量的数据。服务器响应的MIME类型必须是text/event-stream，而且是浏览器中的JavaScript API能解析格式输出。SSE支持短轮询、长轮询和HTTP流，而且能在断开连接时自动确定何时重新连接。

2.5.5 Web Sockets

Web Sockets的目标是在一个单独的持久连接上提供全双工、全向通信。在JavaScript中创建了WebSocket之后，会有一个HTTP请求发送到浏览器以发起连接。在取得服务器响应后，建立的连接会使用HTTP升级HTTP协议交换为Web Socket协议。

var socket = new WebSocket("ws://www.example.com/server.php");
socket.send("hello world")

2.6 安全

为了确保通过XHR访问的URL安全，通常的做法就是验证发送请求者是否有权限访问对应的资源，有以下几种方式：

• 要求以SSL连接来访问可以通过XHR请求的资源
• 要求每一次请求都要附带经过相应算法计算得到的验证码
  注意：以下几种措施对CSRF攻击不起作用
• 要求发送POST而不是GET请求—很容易改变
• 检查来源URL以确定是否可信—来源记录很容易伪造
• 基于cookie信息进行验证—同样很容易伪造