什么是前端？

• 前端 = 漂亮的页面 + 在正确的区域渲染出服务端数据

在正式了解交互使用的几种方法之前我们先来了解一下浏览器是如何展示一个页面的。

• 浏览器在完整展示一个页面时做了些什么？

  • 加载： URL请求-->域名解析-->服务器响应请求-->浏览器接收文件(...)
  • 解析：从HTML解析出dom树，解析css产生css规则树（css-rule-tree）（计算css样式），解析js通过dom api操作dom树和css规则树。
  • 渲染：dom tree + css rule tree = rendering tree(渲染树)，包括定位和大小，是否换行
  • 绘制：调用操作系统的Native GUI的API绘制。

• 前后端交互的几种方式：

  • 服务端渲染
  • Ajax
  • comet
    前端渲染 VS 服务端渲染

  前端渲染：
  指的是后端返回json数据，前端利用预先写的html模板，循环读取json数据，拼接字符串，并插入页面。
  后端渲染：
  前端请求，后端用后台模板引擎直接生成htm，前端接受到数据之后，直接插入页面。

ajax

ajax：一种请求数据的方式，不需要刷新整个页面；
ajax的技术核心是 XMLHttpRequest 对象；
ajax 请求过程：创建 XMLHttpRequest 对象、连接服务器、发送请求、接收响应数据；

• jq实现Ajax的方法：

$.ajax({
  url: ' ',
  type: ' ',
  dataType: ' ' ,
  data: { },
  success: function () {},
  error: function () {}
})

• 原生js实现Ajax方法：

var Ajax={
  get: function(url, fn) {
      var obj = new XMLHttpRequest();  // XMLHttpRequest对象用于在后台与服务器交换数据          
      obj.open('GET', url, true);  // true:异步,false:同步请求
      obj.onreadystatechange = function() {
          if (obj.readyState == 4 && obj.status == 200 || obj.status == 304) { // readyState == 4说明请求已完成
              fn.call(this, obj.responseText);  //从服务器获得数据
          }
      };
      obj.send();
  },
  post: function (url, data, fn) {         // datat应为'a=a1&b=b1'这种字符串格式，在jq里如果data为对象会自动将对象转成这种字符串格式
      var obj = new XMLHttpRequest();
      obj.open("POST", url, true);
      obj.setRequestHeader("Content-type", "application/x-www-form-urlencoded");  // 添加http头，发送信息至服务器时内容编码类型
      obj.onreadystatechange = function() {
          if (obj.readyState == 4 && (obj.status == 200 || obj.status == 304)) {  // 304未修改
              fn.call(this, obj.responseText);
          }
      };
      obj.send(data);
  }
}

注释：readyState 状态码
0-未初始化，尚未调用open()方法；
1-启动，调用了open()方法，未调用send()方法；
2-发送，已经调用了send()方法，未接收到响应；
3-接收，已经接收到部分响应数据；
4-完成，已经接收到全部响应数据；
comet

基于长轮询的一种技术

where：由于某些特定的业务需求， 当我们需要有及时的数据更新
短轮询：setInterval
“反向Ajax”，由服务器进行数据推送， Comet能够让信息近乎实时的被推送到页面上，非常适合要求实时性的获取的数据的页面。
实现模型：

picture

交互方式
post VS get
GET和POST是HTTP请求的两种基本方法,都是基于TCP链接的请求。
区别和联系：

1.png

友情参考：
前后端交互的几种方式
post&get