AJAX的学习

HTTP头部信息

每个HTTP请求和响应都会带有相应的头部信息， 其中有的对开发人员有用，有的也没什么用。XHR对象也提供了操作这两种头部（响应头部和请求头部）信息的方法

1. Accept：浏览器能够处理的内容类型
2. Accept-Charset：浏览能够显示的字符集
3. Accept-Encoding：浏览器能够处理的压缩编码
4. Accept-Language：浏览器当前的语言设置
5. Conection：浏览器与服务器之间的连接类型
6. Cookie：当前页面设置的任何Cookie。
7. Host：发出请求的页面所在的域
8. Referer：发出请求的页面的URL。
9. User-Agent：浏览器的用户代理字符串

虽然不同浏览器实际发送的头部信息会有所不同，但是以上列出的信息是所有浏览器都会发送的。使用setRequestHeader() 方法可以设置自定义的请求头部信息。这个方法接收两个参数：头部字段的名称和头部字段的值。要成功发送请求头部的信息，必须在调用open()方法之后调用send()方法之前调用setRequestHeader()

xhr.open("GET","demo1.html",true);
xhr.setRequestHeader("MyHeader","headValue");
xhr.send(null);

GET请求

GET请求是最常见的请求类型，最常用与向服务器查询某些信息。必要时可以将查询字符串追加到字符串的末尾，以便将信息发送给服务器。对XHR而言，位于传入open()方法的URL末尾的查询字符串必须经过encodeURIComponent()进行编码，然后才能放到URL的末尾；而且所有key和value都必须由&分割

xhr.open("GET","example.php?name1=value1&name2=value2",true);
//查询字符串参数
function createURL(url,key,value){
url+=(url.indexOf("?")==-1?"?":"&");
url+=encodeURIComponent(key)+"="+encodeURIComponent(value);
return url;
}
var url="example.php";
url=createURL(url,"name","burning");
console.log(url)//example.php?name=burning

POST请求

POST请求通常用于向服务器发送应该被保存的数据。POST请求应该把数据作为请求的主体提交而GET请求传统上不是这样。POST请求的主体可以包含非常多的数据，而且格式不限。在open()方法第一个参数位置传入POST，就可以传入一个POST请求，第二步接着就是向send()方法中传入某些数据。默认情况下，服务器对POST请求和提交的web表单请求不会一视同仁。因此服务器必须有程序来读取发送过来的原始数据，并从中解析出有用的部分。不过我们可以使用XHR来模拟表单提交

xhr.open("POST","example.php",true);
var form=document.forms[0];
xhr.send(new FormData(form));

在Web应用中频繁使用到的功能就时表单数据的序列化，我们在上面使用到了XMLHttpReqest2级中定义的FromData类型

//创建一个FormData类型
var data=new FormData();
data.append("name","Nicolas");//这个方法接收一个键名一个键值

图像Ping

第一种跨域请求技术是使用<img> 标签，我们知道一个网页可以从任何网页中加载图像，不用担心跨域不跨域。这也是在线广告跟踪浏览量的主要方式。正如第13章讨论过的，也可以动态的创建图像，使用他们的onload和onerror事件处理程序来确定是否接收到了响应。动态创建图像经常用于图像Ping。图像Ping是与服务器进行简单的单向的跨域通信方式。请求的数据时通过查询字符串形式发送的，而响应可以是任意内容，但通常是像素图或204响应。通过图像Ping，浏览器得不到任何的具体的数据，但是通过监听load和error事件，它能知道响应是什么时候接收到的。

var img=new Image();
img.onload=function(){
    alert("done");
}
img.src="http://www.burningay.top/Light/images/banner1.jpg";
document.body.appendChild(img);

Comet

Comet就是服务器推送，Ajax是一种从页面向服务器请求数据的技术，而Comet则时一种服务器向页面推送数据的技术

两种实现Comet的方式：长轮询和流。

长轮询即是短轮询（即浏览器定时向服务器发送请求，看看有没有更新的数据）的一个翻版，页面发送一个到服务器的请求，然后服务器一直保持连接打开，直到有数据可以发送。发送完数据之后，浏览器关闭，随机又发送一个到服务器的新请求。这一个过程在页面打开期间一直持续不断。

无论是长轮询还是短轮询，浏览器都要在接收数据之前，先发起对服务器的链接。两者最大的区别就是在于何时发送数据。短轮询时服务器立即发送请求，无论数据是否有效，长轮询而是等待数据发送响应。

HTTP流

流不同于上述的两种轮询方式，因为它在页面的整个生命周期内只使用一个HTTP连接，具体来说，就是浏览器向服务器发送的一个请求，而服务器保持连接打开，然后周期性的向浏览器发送数据

//PHP代码
<?php
    $i=0;
    while(true){
        echo "Number is $i";
        flush();
        //等待几秒
        sleep(10);
        $i++;
    }
?>

在除IE外的几大主流浏览器中，通过监听readystatechange事件及检测readyState是否为3，就可以利用XHR对象实现HTTP流。在上述过程中，随着不断从服务器中获取数据，readyState的值会周期性的变为3.当readyState的值变为3时，responseText属性中会保存着接收所有数据的，此时就可以比较当前接收到的数据，决定从什么位置开始取得最新的数据