AJAX+Servlet 前后端分离技术

前置课程：AJAX跨域解决方案

源代码下载地址：基于JavaWeb的前后端分离

前后端分离

前后端分离的核心思想是前端HTML页面通过AJAX调用后端的RESTFUL API接口并使用JSON数据进行交互。

• Web服务器：一般指像Nginx，Apache这类的服务器，一般只用来解析静态资源；
• 应用服务器：一般指像Tomcat，Jetty，Resin这类的服务器，常用解析动态资源，也可以解析静态资源，但解析静态资源的能力没有web服务器好；

一般都是只有web服务器才能被外网访问，应用服务器只能内网访问。

前后端分离已成为互联网项目开发的业界标准使用方式，是系统架构从猿进化成人的必经之路。

通过nginx+tomcat的方式（也可以中间加一个nodejs）有效的进行解耦，并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务（多种客户端，例如：浏览器，车载终端，安卓，IOS等等）打下坚实的基础。

示例：

创建应用服务器端

• 准备工具：创建Maven形式的web项目，加入Maven依赖

    javax
    javaee-api
    8.0.1


    com.alibaba
    fastjson
    1.2.62

• 第一步：创建用来模拟服务器的工具类DB.java，代码如下：

  public class DB {
      public static List depts = new ArrayList();
  
      static {
          depts.add(new Dept(10, "ACCOUNTING", "NEWYORK"));
          depts.add(new Dept(20, "RESEARCH", "DALLAS"));
          depts.add(new Dept(30, "SALES", "CHICAGO"));
          depts.add(new Dept(40, "OPERATIONS", "BOSTON"));
      }
  
      public static boolean deleteDeptByDeptno(String deptno) {
          for (int i = 0; i 
      
      
      
      部门列表
      
      
      
      
      
        $(function () {
          $.ajax({
            url:"http://localhost:8080/qhdfl/deptController?op=list",
            dataType:"json",
            success:function (res) {
              if(res.code == 200){
                for(var i =0;i' +
                          ' 修改' +
                          '' +
                          '' +
                          ' 删除' +
                          '' +
                          '

    
    
    
    
    添加部门
    
    
    
    
    
        function getUrlParam(name) { //获取url中的参数
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
            var r = window.location.search.substr(1).match(reg);  //匹配目标参数
            if (r != null)
                return unescape(r[2]);
            return null; //返回参数值
        }

        $(function () {
            var deptno = getUrlParam("deptno");
            $.ajax({
                url: "http://localhost:8080/qhdfl/deptController?op=showUpdate",
                data: {deptno: deptno},
                dataType:"json",
                success: function (res) {
                    if(res.code ==200){
                      $("#deptno").val(res.data.deptno);
                      $("#dname").val(res.data.dname);
                      $("#loc").val(res.data.loc);
                    }
                }
            });
        });