学习ajax原理

学习ajax原理
时间：2005年（更早出现使用）开始规范使用
全称：AsynchronousJavascriptandXML。
核心：xmlHttpRequest 对象。 简称：XHR
作用：用于浏览器向服务器请求额外数据而不卸载页面,极大提高了用户体验。
XHR 对象和请求
xhr是一个API，为客户提供服务端和客户端之间通信的功能，并且不会刷新页面，它能取回所有的数据类型。支持 http、https、file、ftp协议。我们可以通过其构造函数来创建一个新的 xhr 对象，这个操作在其他操作之前完成。
var xhr = new XMLHttpRequest();
xhr 原型链：object > EventTarget > XMLHttpRequest

当创建完 xhr 对象后首先得调用他的 open() 方法

//第一个参数：表示请求类型（get/post）。
//第二个参数：表示请求路径，可以是相对路径或者绝对路径。
//第三个参数：代表是否为异步，true时为异步，false为同步。
//第四、五个参数：可选的授权使用参数，因为安全性不推荐明文使用。
xhr.open('get','example.php',true,username,password);

在这里受同源策略的影响，当第二个参数url跨域的时候会被浏览器报安全错误。同源策略指的是当前页面和目标url协议、域名和端口均相同。后面也会讲到，除IE之外的浏览器通过XHR对象实现跨域请求，只需将url设置为绝对url即可。
当初始化请求完成后，我们便可调用send()方法发送请求：

var data = new ForData();
data.append('name','Nicholas');
//接受一个请求主体发送的数据，如果不需要，传入null
xhr.send(data);

当请求的类型为get/head时，send（）的参数会被忽略并置为null，send()传递的参数会影响到我们请求的头部content-type的默认值，该字段代表返回的资源内容的类型，用于浏览器处理，如果没有设置或在一些场景下，浏览器会进行MIME嗅探来确定怎么处理返回的资源。
在XHR2级中定义了ForData数据，用于常见的类表单数据序列化：

//直接传入表单id
var data = new FormData(document.getElementById('user-from'));
//创建类表单数据
var data = new FormData();
data.apped('name','Nicholas');
//'FormData'可以直接被send()调用，会自动修改xhr的content-type头部
xhr.send(data);
//请求头部的content-type；

未完！！！