XMLHttpRequest对象与ajax请求

Ajax技术的核心是XMLHttpRequest对象（简称xhr）；
xhr为向服务器发送请求和解析服务器响应提供了流畅的接口；能够以异步的方式从服务器获取更多的信息，意味着用户单击以后，可以不用刷新页面就获取新的数据；

XMLHttpRequest对象

目前市场上的主流浏览器都支持原生的XHR对象，在这些浏览器中创建XHR对象需要使用XMLHttpRequest构造函数；
XHR对象中的一些方法：
1，open()；接收三个参数（请求类型get/post，请求url，是否异步发送请求的布尔值）;

• 要点：Ajax默认是异步请求，open默认是true；—（async : true）

 // ajax默认是异步编程：不会等待响应内容；
        var xhr=new XMLHttpRequest();
        xhr.open("get","http://localhost:3000/first");
        xhr.send();
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4){
                console.log("2");
                console.log(xhr.responseText);
            }
        }
        console.log("1");
        // 1 ,2, 'hello ajax'

2，send()：接收一个参数，即请求参数数据；

// 传递post 请求参数
var xhr=new XMLHttpRequest();
var params = 'name=lisi';
xhr.open("post","http://localhost:3000/post");
xhr.send(params); // post请求参数,放在发送里面; 和get不一样

// 传递get 请求参数
var xhr=new XMLHttpRequest();
var params = 'name=lisi';
xhr.open("get","http://localhost:3000/get?"+params); // get请求参数放在url后面
xhr.send(); 

请求发送完毕；接到响应后，服务器响应的数据会自动填充到XHR对象的属性中；
responseText：响应主体数据； responseXML：如果响应的内容类型是’text/xml或application/xml；那么这个属性将保存着响应数据的XML DOM文档；
status：响应的HTTP的状态； statusText：****HTTP状态的说明；

无论响应的内容类型是什么，响应主体数据都会保存到responseText属性中，而对于非XML数据而言，responseXML属性的值将为null；

多数情况下，我们都是发送的异步请求，这样才能让js代码继续执行而不必等到响应；此时我们可以根据XHR对象的readyState属性来监测响应状态；
readyState属性：响应返回成功的时候得到通知；
（1）0：请求未初始化，open还没有调用；
（2）1：服务器连接已建立，open已经调用了，但尚未调用send方法；
（3）2：调用send方法，请求已经发送，尚未接收到响应；
（4）3：请求处理中，也就是接收到部分响应内容了；
（5）4：请求已完成，已经接收到全部响应内容，也就是响应完成了；
readyState属性的值每一次的改变都会触发一次readystatechange事件；

HTTP头部信息

每一次http请求和响应都会携带相应的头部信息；常见的头部信息字段（不同的浏览器实际发生的请求头信息不同）：

Accept: 浏览器能够处理的内容类型；
Accept-Charset: 浏览器能够显示哪些字符集；
Accept-Encoding: 浏览器能够处理编码；
Accept-Language: 浏览器当前设置的语言；
Connection: 连接选项，浏览器与服务器之间连接的类型；
Content-Length：内容长度，传送的数据大小；
Content-Type：内容类型；
Cookie：当前页面设置的cookie；
Cache-Control: 缓存策略，如no-cache，详见官方文档；
Host: 请求的主机；
Referrer：发出请求页面的url；

XHR对象也提供了两个操作头部信息的方法；setRequestHeader()和getResponseHeader()；

setRequestHeader()：接收两个参数（头部字段的名称，值），可以自定义设置头部信息；
getResponseHeader()：接收两个参数（头部字段的名称），可以获取相应的响应头部信息；

GET请求：

get是最常见的请求类型，通常用于向服务器查询数据内容；get请求将查询参数追加到url的末尾；

 // 为按钮注册点击事件
        btn.onclick=function(){
            // 创建ajax对象
            var xhr=new XMLHttpRequest();
            // 获取用户在文本框输入的值
            var nameValue=username.value;
            var ageValue=age.value;
            // 拼接请求参数
            var params="username="+nameValue+"&age="+ageValue;
            // 配置ajax对象
            xhr.open("get","http://localhost:3000/get?"+params); //get请求参数 加在这里
            // 设置请求头
            xhr.setRequestHeader('Content-Type': "application/x-www-form-urlencoded");
            // 发送请求
            xhr.send();
            // 获取服务器响应的数据
            xhr.onload=function(){
                console.log(xhr.responseText);
            }
        };

POST请求：

post请求也是常见的请求类型；通常用于向服务器发送较大的数据内容(需要用于保存的)；

// 为按钮注册点击事件
        btn.onclick=function(){
            // 创建ajax对象
            var xhr=new XMLHttpRequest();
            // 获取用户在文本框输入的值
            var nameValue=username.value;
            var ageValue=age.value;
            // 拼接请求参数
            var params="username="+nameValue+"&age="+ageValue;
            // 配置ajax对象
            xhr.open("post","http://localhost:3000/post"); 
            // 设置请求头
            xhr.setRequestHeader('Content-Type': "application/x-www-form-urlencoded");
            // 发送请求
            xhr.send(params);// post请求参数,放在发送里面;
            // 获取服务器响应的数据
            xhr.onload=function(){
                console.log(xhr.responseText);
            }
        };