Ajax是什么？以及如何创建Ajax?

vue的面试题中对Ajax的理解以及创建Ajax也成为了了一个重点，今天就来说一说我的理解。希望通俗易懂，容易理解。

1.说说你对Ajax的理解？

ajax全称"Asynchronous JavaScript And XML",它并不是一种新技术，是由
javaScript, xml,XMLHttpRequest组合在一起，能实现异步提交的功能，是
一种创建交互式网页应用的网页开发技术

2.Ajax的特点以及工作原理

2.1Ajax的一些特点

2.1.1Ajax的优势

• 改善的用户体验
• 增强用户生产力
• 减少带宽的使用并增加速度
• 增强兼容性
• 支持异步处理
• 减少服务器请求和网络负载
• 更容易导航

2.1.2Ajax的劣势

• 浏览器不兼容
• 不安全性
• 增加Web服务器的负载

2.2Ajax的工作原理

（1）首先客户端发送请求交给xhr
（2）然后xhr把请求提交给服务；
（3）服务进行业务处理，服务器响应数据，
（4）服务器将数据交给xhr对象；
（5）xhr对象接受数据，由javascript把数据写到页面上

3.如何创建Ajax?

注：如何创建Ajax已经成为一个重点，so我们得牢记并且理解如何创建 Ajax，这也将是面试时的一个重点

ajax基本写法及请求分为哪几步

1.创建一个 XHR 对象（需要考虑浏览器差异）

var request=null;  
if (window.XMLHttpRequest)  
    {// 兼容 IE7+, Firefox, Chrome, Opera, Safari  
        xhr=new XMLHttpRequest();  
    } else{// 兼容 IE6, IE5 
        xhr=new ActiveXObject("Microsoft.XMLHTTP");  
} 

2.监听请求成功后的状态变化

request.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    console.log(request.responseText)
  }
};

3. request.responseText 就是服务器返回的内容了（默认是字符串）
4. 设置请求参数

    request.open(method,url,async);

注：请求的三个参数分别是：请求的方法、请求的地址、和是否采用异步请求。

5.发送请求

request.send();

具体代码如下

<script>
//第一步创建一个对象
var  xhr = null 
if(window.XMLHttpRequest){
xhr= new  XMLHttpRequest(); 
}else{
xhr = new ActiveXObject("Microsoft.XMLHttp")
 
}
//第二步准备发送请求-配置发送请求的一些行为
xhr.open("get","url","true")

//第三步设置请求头信息  
xhr.setRequestHeader("","")
//第四步制定一些回调函数，也属于事件函数，不触发不执行
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){ //4代表服务器返回的数据可以使用
    if(xhr.status == 200){//200代表http请求成功，404找不到对象，503服务端有错误
      var data = xhr.responseText
    }
}
； 
}
//第五步发送请求
xhr.send(null)
console.log(111)
//发送请求，send也可以写在前面，推荐写在后面；写null是兼容
</script>

总结：Ajax也是一个难点和重点，so我们要掌握好如何创建Ajax