前言
学习前端也有大半年的时间了，感觉从浏览器到html/css/js再到一些框架都有学习，并且很多地方自以为了解得也比较深入。直到前几天接到阿里的面试电话，几个问题瞬间懵逼。。。
其实面试官问的问题我之前都有了解过，当时看了也觉得都理解了，但一回答就发现好多细节都记不清了！！面试自然也就GG了，痛定思痛，决定把前端的这些雷区再好好扫一遍，千万避免知道但又说不清楚的状态。
由于刚接触js不久就开始用jquery，上来就是 $.get，$.post ，几乎没有用过原生的ajax，今天就先把ajax好好理理。
什么是ajax
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
ajax 允许javaScript向服务器发起请求，通过服务器返回的数据动态的更新部分页面而不用重载整个页面。简单的说就是用JavaScript与后台进行数据交换，在不刷新页面的情况下访问服务器数据库。
说到这里我就有一个疑问了，我们不是可以通过设置dom属性，如img标签的src属性，来更新页面吗？这个不是也是局部更新吗？
对这个问题我的理解是，这里的更新是获取服务器上的更新，比如说一个评论区，如果不用ajax，当有其他人的新评论传到了服务器上时，你要获取就只能刷新整个页面，而使用ajax就可以访问服务器获取最新的评论直接显示。而本地设置dom属性等只是更新了本地网页而已（页面其实并未更新），刷新之后还是会变为原样。
即：服务器上页面部分更新时可以通过重载页面而显示更新，也可以通过ajax获取更新再显示出来。
ajax实现
JavaScript中ajax的实现是基于XMLHttpRequest对象的，一般缩写为XHR。XHR对象不仅可以实现异步的ajax，也能实现同步的http请求。
在控制台打印这个对象可以查看到它的原型属性和方法，这些在我们新建一个实例对象时是会被继承的。下面我们来实现一个简单的ajax请求。
get
//新建一个XHR实例
var xmlhttp=new XMLHttpRequest();
//设置请求参数： 请求方式、url、是否异步
xmlhttp.open("GET","https://www.baidu.com",true);
//状态变化时回调函数
xmlhttp. onreadystatechange=function(){
if(xmlhttp.readyState==4 && xmlhttp.status==200){
console.log(xmlhttp.responseText);
}
}
//发送请求
xmlhttp.send();通过上面这个ajax请求我们就爬到了百度首页的源码。
post
由于post请求数据是放在请求体中的（get请求数据是放在请求行的url中），因此要发送post请求要通过额外的两步
//新建一个XHR实例
var xmlhttp=new XMLHttpRequest();
//设置请求参数： 请求方式、url、是否异步
xmlhttp.open("POST","https://www.baidu.com",true);
//设置请求头中的消息格式
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//状态变化时回调函数
xmlhttp. onreadystatechange=function(){
if(xmlhttp.readyState==4 && xmlhttp.status==200){
console.log(xmlhttp.responseText);
}
}
//发送数据
xmlhttp.send("name=123&password=123");当然，XMLHttpRequest对象还提供同步的http请求方式，只要将open方法的第三个参数设为false就行了，此时我们不再使用onreadystatechange来监测状态变化了，只需要将函数放到send后面执行即可。
兼容性
所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。
兼容性检测代码如下：
var xmlhttp;
if(window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}else{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}