关于原生的Ajax详解

一、Ajax对于前端开发的意义

       我们常称Ajax是前端开发者的梦想，为什么这么说呢？Ajax的出现揭开了无刷更新页面数据的时代，JavaScript的实用性也得到了巨大的提升，网页可以在不重载的情况下，实现异步更新，而在Ajax出现前，如果你要更新页面数据，就需要重载整个页面，这样也就不难理解Ajax对开发者的意义之重大了，甚至完全可以称只为web开发应用的里程碑。

二、Ajax的请求/响应的过程

        Ajax的全称是async javascript and XML，async也就是异步的意思了

                                                                （图转载自网络）

三、Ajax的XMLHttpRequest对象的关系

      在去使用Ajax之前，我们先来理解一下XMLHttpRequest对象，这里大家要先有一个概念Ajax并非一个单一的技术，准确来说Ajax是一个依赖于HTML/CSS/JS的技术方案，而XMLHttpRequest对象就是它最依赖的核心技术，也是这个对象帮助浏览器完成响应请求。后面我们提到的xhr都代表着XMLHttpRequest对象。

四、Ajax的使用

1.创建xhr对象

// IE9及以上比如IE7+、Firefox、Chrome、Safari 以及 Opera均内建 XMLHttpRequest 对象。
//可以直接实例化xhr对象
var ajax = new XMLHttpRequest();

2.调用open()方法

// 请求方法:GET/POST
// URL:请求的路径
// 判断是否异步
ajax.open("请求方式", "URL(路径)","是否异步");

至此Ajax的配置已经完成了，系统启动了一个针对该路径的请求以备发送，但是open()并不会真的发送请求，稍后我们也会详解这些参数。

3.调用send()方法

// send()用于GET请求
//send(String)用于POST请求
ajax.send();

4.接收响应

收到响应后，响应的数据会自动填充xhr的对象属性

responseText=>作为响应主体被返回的文本
responseXML=>响应的内容类型
status=>响应的HTTP状态
statusText=>HTTP状态说明

一般收到响应后，第一步是检查status的状态码，最常见的就是状态码200代表成功

五、Ajax的配置参数

1.请求方式

• GET请求 

       GET请求是最常见的请求类型，传递参数的方式也就是把字符串参数追加在URL的末尾，以便信息的传输，参数与参数间以&相连，请求数据与URL之间以?相连，GET请求相对来说，传递的参数大小内容有限也不安全。

ajax.open("GET","域名:端口/一级路径/二级路径?a=1&b=2&c=3")

• POST请求

        POST请求以报文形式传递参数，把要请求的参数放在请求体中，这样安全性更高，但是相对会消耗更高的资源，POST请求消耗的资源大概是GET请求的两倍，同时必须设置请求头，并将参数放在send()方法中发送。

xhr.open("POST","域名:端口/一级路径/二级路径")
// 设置请求头，告诉一下服务端我给你的是一个什么样子的数据格式
// x-www...浏览器最常用的类型 常用类型有四种
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// 将参数放在send中发送
xhr.send("a=" + a + "&b="+b);

2.同步异步

• 同步

        同步就是当你发起一个请求的时候，要等待服务器响应在去执行下一个任务

• 异步

        异步就是当你发起一个请求的时候，你先搁置他，随时可以发送下一次的请求，减少了用户遇到请求阻塞、网络延迟时需要等待的时间。

六、完整的基于原生JS的Ajax封装

• GET请求

var xhr = new XMLHttpRequest();
xhr.open("GET","域名:端口/一级路径/二级路径?a=1&b=2&c=3")
xhr.send();
xhr.onload = function(){
var text = xhr.response;
console.log(xhr.response);
}

• POST请求

var xhr = new XMLHttpRequest();
xhr.open("GET","域名:端口/一级路径/二级路径")
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send("a=" + a + "&b="+b);
xhr.onload = function(){
var text = xhr.response;
console.log(xhr.response);
}