当面试官问你AJAX时...学习前端的朋友都知道ajax只要是应用于前后端交互的，说到ajax前后端交互就必须了解一个协

学习前端的朋友都知道ajax只要是应用于前后端交互的，说到ajax前后端交互就必须了解一个协议 HTTP协议，有很多朋友在学习前端知识的时候只会注重语法和代码，但是要想学好前端，所有知识都要融会贯通。

数据传输过程

先说一下HTTP协议，是应用层的协议，很多同学不懂什么是应用层，比如两台计算机想要交互数据，国际上面一个组织制定了一个标准，将我们数据传输的过程模拟成一个一个七层的参考模型,数据传输时，每一层都会封装上自己这一层的协议，然后向下传输，最上层就是应用层，最底端是物理层，直到物理层将用比特流进行传输。当主机A的用户想发送一个扣扣消息给主机B时，先在应用层封装好自己，在我个人理解所谓封装就是在你想要的发的数据前面加一个“帽子”，这个帽子就是你的协议，帽子里面的内容就是这个协议的报文，从上往下走，每一个协议都要带一个“帽子”。

HTTP协议

http（Hypertext Transfer Protocol，超文本传输协议）协议就是最顶层的应用层的协议，也是我们浏览器和服务器之间进行沟通的一个协议，我们刷网页，微博等等用的都是这个协议，在这里我们着重介绍向下HTTP协议的内容

ajax

上面画的几张图就是HTTP协议的内容，现在大家以了解了HTTP协议，那么我们比如浏览器用于用户登录验证时，就要通过http协议访问服务器，验证登录正确与否。在ajax没有出现之前，大家只能通过提交按钮显示是否成功，极大地降低了用户的使用度。而ajax能够呢能过向服务器请求额外的数据而无需加载页面。局部刷新。从代码角度就是用代码实现http请求，而不是用刷新或者提交才能到服务器验证。

原生js实现AJAX的步骤以及代码

(1)创建异步对象

var 异步对象名= new XMLHttpRequest();

(2)设置请求行

异步对象.open(请求方式, 地址, true)

请求方式主要有get或者post，稍后我们会继续讨论

地址是请求到后端代码的地址

最后一个参数是是否异步，可以省略，true为异步，false为同步。

(3)设置请求头

对于get来说可以省略

post不发送数据是也可以省略，post发送数据时

异步对象.setRequestHeader('Content-Type,'application/x-www-form-urlencoded) ;

对于是get还是post实际上在我们的工作中是由后端来决定那种方式的

与get请求相比，post请求消耗的资源或多一些。从性能角度看，以发送的数据计，get请求的速度最多可达post的两倍。

实际上在我们的工作中对于是get还是post是由后端来决定那种方式的。

(4)设置主题发送

异步对象.send() ;

get 为空或者null; post的数据内容写在括号里，无数据也可以写null

(5)设置回调函数

异步对象.onreadyStateChange=function(){
    if(异步对象.readyState==4&&异步对象.status==200){
        
    }
};

status是HTTP状态码

2** 代表成功等
3** 重定向
4** 找不到
5** 服务器错误

readyState是异步对象状态码

0 创建部对象，请求初始化
1 准备发送请求
2 服务器接收请求
3服务器处理请求
4请求处理完成，响应已就绪

ajax优缺点

用jQuery实现ajax

jquery是我们写js代码的一个库，相信大家都接触过，下面是iq的代码，这里不做过多解释

$.ajax({
type："类型",
url:"路径",
data:{
  后台接受变量名：前端写的变量名，
  ...
},
dataType:"json/text...",
success:function(){
    //成功后返回
},
error:function(){
    //错误是返回
},
before:function(){
    //发送后执行
},
complete:function(){
    //请求完后，无论成功失败
},
})

datatype后面是返回的类型，一般返回都为Object类型，里面可以写成json方便操作后面四个函数都可以省略，用到哪个写哪个。

当面试官问你AJAX时...