前后端分离之Ajax入门

一、概念

Ajax(Asynchronous Javascript And XML),即是异步的JavaScript和XML,Ajax其实就是浏览器与服务器之间的一种异步通信方式。它可以异步地向服务器发送请求,在等待响应的过程中,不会阻塞当前页面,在这种情况下,浏览器可以做自己的事情。直到成功获取响应后,浏览器才开始处理响应数据。

  1. 传统传统的Web应用模式和 ajax方式的比较:

    传统的web应用:请求提交的时候,提交的是整个表单,服务端返回的时候,也是返回整个页面(刷新)

    ajax方式:提交请求的时候只把某些数据提交(可以不用表单),服务端也只返回特定的数据

  2. Ajax 应用的特点
    • 不刷新整个页面,在页面内与服务端通迅
    • 使用异步方式和服务端通迅
    • 大部分交互都在页面内完成
  3. Ajax 技术组成

    XMLHttpRequest:用于与服务器交互。通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL,发送和获取数据。这允许网页在不影响用户操作的情况下,更新页面的局部内容,所有的现代浏览器都支持这个对象。

    javascript:一种脚本编程语言,它可以在网页上实现复杂的功能,网页展现的不再是简单的静态信息,而是实时的内容更新。

    HTML:超文本标记语言,是一种用来结构化 Web 网页及其内容的标记语言。

    json(曾经使用XML):将结构化数据表示为 JavaScript 对象的标准格式,是一种轻量级数据交换格式,而XML较为复杂

二、XMLHttpRequest 实现ajax

  1. 准备好服务端程序(tomcat)

    @WebServlet("/UserServlet")
    public class UserServlet extends HttpServlet {
    protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    response.setContentType("text/html;charset=UTF-8");//设置结果集
    response.getWriter().print("这是服务端的数据:"+LocalDateTime.now());//向浏览器发送数据
    }
    }
  2. 客户端程序

    步骤:

    • 创建 XMLHttpRequest对象, 直接new就可以
    • 要指定回调函数
    • 调用它的open方法,指明提交方式,提交地址,及数据
    • 调用它的send方法,发送请求
    • 在回调函数中进行相应的处理
    <script src="js/jquery-1.8.0.js"></script>
    <script>
    var xmlhttp;
    function test(){
    //创建 XMLHttpRequest对象
    xmlhttp = new XMLHttpRequest(); //要指定回调函数
    xmlhttp.onreadystatechange=mystatechange; //调用open方法
    xmlhttp.open("get","UserServlet",null); //调用send
    xmlhttp.send(null);
    } function mystatechange(){
    //alert(xmlhttp.readyState);
    if(xmlhttp.readyState==4){
    if(xmlhttp.status==200){
    // alert(xmlhttp.responseText);
    document.getElementById("lbl_msg").innerHTML=xmlhttp.responseText;
    }
    }
    } </script>
    <body>
    <button onclick="test()">测试</button>
    <label id="lbl_msg"></label>
    </body>
  3. readyState状态码

    0 --> UNSENT

    -- XMLHttpRequest 代理已被创建,但尚未调用 open() 方法。

    1 --> OPENED

    -- open() 方法已经被触发。在这个状态中,可以通过 setRequestHeader() 方法来设置请求的头部,可以调用 send() 方法来发起请求。

    2 --> HEADERS_RECEIVED

    -- send() 方法已经被调用,并且头部和状态已经可获得。

    3 --> LOADING

    -- 响应体部分正在被接收。如果 responseType 属性是“text”或空字符串,responseText 将会在载入的过程中拥有部分响应数据。

    4 --> DONE

    -- 请求操作已经完成。这意味着数据传输已经彻底完成或失败。

三、使用jQuery实现ajax

四种实现方式:

  • load()方法
  • $.get()方法
  • $.post()方法
  • $.ajax()方法 - 常用
  1. load():请求方式由是否传递参数决定。即传递参数,为GET方式;不传递参数,为POST方式。

    <script src="js/jquery-1.8.0.js"></script>
    <script>
    //load(url,data,callback)
    /*
    url:异步请求的地址
    data:异步请求的数据
    如果省略请求数据的话,当前的请求方式为GET
    如果发送请求数据的话,当前的请求方式为POST
    callback - 异步请求成功后的回调函数
    */
    $(function(){
    function mystatechange(){
    alert('异步请求成功')
    } function test(){
    $('button').load('UserServlet',mystatechange())
    }
    }) </script> <body>
    <button onclick="test()">测试</button>
    </body>
  2. $.get():使用get方式向服务器端发送异步请求


    <script src="js/jquery-1.8.0.js"></script> <script>
    //get(url,data,callback,type)
    /*
    url:异步请求的地址
    data:异步请求的数据
    callback:异步请求成功后的回调函数
    type:设置服务器满响应结果的格式;值为xml、html、script、json、text和default
    */
    $(function(){
    $("button").click(function(){
    $.get("UserServlet",{userName:"admin",password:"123"}, function(data){
    alert('异步请求成功');
    });
    });
    });
    </script> <body>
    <button>测试</button>
    </body>
  3. $.post():使用POST方式向服务器端发送异步请求

    <script src="js/jquery-1.8.0.js"></script>
    
    <script>
    //post(url,data,callback,type)
    /*
    url:异步请求的地址
    data:异步请求的数据
    callback:异步请求成功后的回调函数
    type:设置服务器满响应结果的格式;值为xml、html、script、json、text和default
    */
    $(function(){
    $("button").click(function(){
    $.post("UserServlet",{userName:"admin",password:"123"}, function(data){
    alert('异步请求成功');
    });
    });
    });
    </script> <body>
    <button>测试</button>
    </body>
  4. $.ajax():是jQuery中最为底层的Ajax方法

    <script>
    $(function(){
    $("button").click(function(){
    $.ajax({
    type:"post",
    url:"UserServlet",
    data:{userName:"admin",password:"123"},
    success: function(data){
    alert('异步请求成功');
    }
    });
    });
    });
    </script>
    <body>
    <button>测试</button>
    </body>

四、$.ajax([options]) 详解

$(function(){
$("button").click(function(){
$.ajax({
type:"post", //请求的提交方式,可以是post和get, 大小写不敏感
url:"UserServlet", //请求的地址
data:{userName:"admin",password:"123"}, //提交的数据,前面的key可以用双引号引起来也可以不引
success: function(data){ //回调函数,data 代表服务端返回的数据,data这个名字不是固定的,叫什么都可以
alert(data);
}
});
});
});

注:当以post方式提交请求的时候,放在url后面的参数,是可以用的

比如下面的表单:

<form action="UserServlet?flag=add"  method="post">
<input name="userName">
<input name="password">
<submit >
</form>

请求提交以后,服务端能收到 flag, userName,password

但当请求以get的方式提交的时候,放在url后面的参数会被表单中其他的数据覆盖

$.ajax() 其他参数:

  • async
  • cache
  • dataType //服务端传回来的数据,是什么类型, 取值有 text,html, js,xml,josn, jsonp
  • contentType //发给服务端的数据,是什么格式
  • 回调函数
  1. async 是否启用异步,默认是true

    $(function(){
    $("button").click(function(){
    alert("a"); $.ajax({
    type:"post",
    url:"UserServlet",
    data:{userName:"admin",password:"123"},
    success: function(data){
    alert("b");
    }
    }); alert("c");
    });
    });
    /*
    以上代码的执行顺序有可能是a, b, c;也有可能是a, c, b
    原因:默认情况下,async的取值是true,即使用异步的方式提交
    想要同步执行,需要设置:async : false
    */
  2. cache 是否缓存

    默认值:true,当dataType为script时,默认为false,设置为false将不会从浏览器缓存中加载请求信息

    当cache 为true时,浏览器会优先从缓存中取数据,若缓存中存在则直接取出,若不存在会向服务端发送请求。

    优点:从缓存中取数据,减少了服务器端的压力

    缺点:无法实时更新。如需要获得请求服务器的次数时,客户端完成获取次数,服务器段完成更新次数,会从缓存中直接取数据,不会请求服务器执行增加次数操作

  3. dataType 服务端传回来的数据,是什么类型

    如:

    • xml:返回XML文档。
    • html:返回纯文本HTML信息;包含的script标签会在插入DOM时执行。
    • script:返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时(不在同一个域下),所有post请求都将转为get请求。
    • json:返回JSON数据。
    • jsonp:JSONP格式。使用SONP形式调用函数时,例如myurl?callback=?,JQuery将自动替换后一个“?”为正确的函数名,以执行回调函数。
    • text:返回纯文本字符串。
  4. contentType 发给服务端的数据,是什么格式

    默认值:application/x-www-form-urlencoded。这种格式的特点:name/value 成为一组,每组之间用 & 联接,而 name与value 则是使用 = 连接。如:url?name=zhangsan&password=123

    注:这种形式是没有办法将复杂的 JSON 组织成键值对形式。

  5. 回调函数

    • success 成功以后调用

    • error 出错的时候调用

    • complete 不管成功,失败,都调用

      $(function(){
      $("button").click(function(){
      $.ajax({
      type:"post",
      url:"UserServlet?flag=visit",
      success:function(data){
      alert("success调用了");
      },
      error:function(e){
      alert("error 调用了"+e);
      },
      complete:function(){
      alert("complete 调用了");
      }
      /*
      总结
      success 在服务端正确返回的情况下调用
      complete 总要调用
      error 在出错的时候会调用
      (1) 客户端请求写错了,会引起error的调用
      (2) 服务端出错了,也会引起error的调用
      */
      });
      });
      });
      <body>
      <button>测试</button>
      </body

五、ajax的status状态码

  • 1**:请求收到,继续处理
  • 2**:操作成功收到,分析、接受
  • 3**:完成此请求必须进一步处理
  • 4**:请求包含一个错误语法或不能完成
  • 5**:服务器执行一个完全有效请求失败

常见状态码:

100——客户必须继续发出请求

101——客户要求服务器根据请求转换HTTP协议版本

200——交易成功

201——提示知道新文件的URL

202——接受和处理、但处理未完成

203——返回信息不确定或不完整

204——请求收到,但返回信息为空

205——服务器完成了请求,用户代理必须复位当前已经浏览过的文件

206——服务器已经完成了部分用户的GET请求

300——请求的资源可在多处得到

301——删除请求数据

302——在其他地址发现了请求数据

303——建议客户访问其他URL或访问方式

304——客户端已经执行了GET,但文件未变化

305——请求的资源必须从服务器指定的地址得到

306——前一版本HTTP中使用的代码,现行版本中不再使用

307——申明请求的资源临时性删除

400——错误请求,如语法错误

401——请求授权失败

402——保留有效ChargeTo头响应

403——请求不允许

404——没有发现文件、查询或URl

405——用户在Request-Line字段定义的方法不允许

406——根据用户发送的Accept拖,请求资源不可访问

407——类似401,用户必须首先在代理服务器上得到授权

408——客户端没有在用户指定的饿时间内完成请求

409——对当前资源状态,请求不能完成

410——服务器上不再有此资源且无进一步的参考地址

411——服务器拒绝用户定义的Content-Length属性请求

412——一个或多个请求头字段在当前请求中错误

413——请求的资源大于服务器允许的大小

414——请求的资源URL长于服务器允许的长度

415——请求资源不支持请求项目格式

416——请求中包含Range请求头字段,在当前请求资源范围内没有range指示值,请求也不包含If-Range请求头字段

417——服务器不满足请求Expect头字段指定的期望值,如果是代理服务器,可能是下一级服务器不能满足请求

500——服务器产生内部错误

501——服务器不支持请求的函数

502——服务器暂时不可用,有时是为了防止发生系统过载

503——服务器过载或暂停维修

504——关口过载,服务器使用另一个关口或服务来响应用户,等待时间设定值较长

505——服务器不支持或拒绝支请求头中指定的HTTP版本

前后端分离Ajax入门的更多相关文章

  1. 《Spring Boot 入门及前后端分离项目实践》系列介绍

    课程计划 课程地址点这里 本课程是一个 Spring Boot 技术栈的实战类课程,课程共分为 3 个部分,前面两个部分为基础环境准备和相关概念介绍,第三个部分是 Spring Boot 项目实践开发 ...

  2. 从MVC到Ajax再到前后端分离的思考

    前言 一位小妹去面试前端,前端leader问了"什么是ajax?",答:"接收后台的数据,然后然后自己填充和渲染样式":一位小哥去面试后台,技术经理问了&quo ...

  3. 一个Java程序猿眼中的前后端分离以及Vue.js入门

    松哥的书里边,其实有涉及到 Vue,但是并没有详细说过,原因很简单,Vue 的资料都是中文的,把 Vue.js 官网的资料从头到尾浏览一遍该懂的基本就懂了,个人感觉这个是最好的 Vue.js 学习资料 ...

  4. 《Spring Boot 入门及前后端分离项目实践》目录

    开篇词:SpringBoot入门及前后端分离项目实践导读 第02课:快速认识 Spring Boot 技术栈 第03课:开发环境搭建 第04课:快速构建 Spring Boot 应用 第05课:Spr ...

  5. SpringBoot 和Vue前后端分离入门教程(附源码)

    作者:梁小生0101 juejin.im/post/5c622fb5e51d457f9f2c2381 推荐阅读(点击即可跳转阅读) 1. SpringBoot内容聚合 2. 面试题内容聚合 3. 设计 ...

  6. 前后端分离-模拟数据之RAP2快速入门

    是啥? RAP是一个可视化接口管理工具 通过分析接口结构,动态生成模拟数据,校验真实接口正确性, 围绕接口定义,通过一系列自动化工具提升我们的协作效率.我们的口号:提高效率,回家吃晚饭! 可视化编辑, ...

  7. 利用Nginx轻松实现Ajax的跨域请求(前后端分离开发调试必备神技)

    利用Nginx轻松实现浏览器中Ajax的跨域请求(前后端分离开发调试必备神技) 前言 为什么会出现跨域? 造成跨域问题的原因是因为浏览器受到同源策略的限制,也就是说js只能访问和操作自己域下的资源,不 ...

  8. 前后端分离构架 与 json ajax简介

    前后端分离 传统开发方式 曾几何时,JSP和Servlet为Java带来了无限风光,一时间大红大紫,但随着互联网的不断发展,这样的开发方式逐渐显露其弊端,在移动互联网炙手可热的今天,应用程序对于后台服 ...

  9. spring boot + spring security +前后端分离【跨域】配置 + ajax的json传输数据

    1.前言 网上各个社区的博客参差不齐 ,给初学者很大的困扰 , 我琢磨了一天一夜,到各个社区找资料,然后不断测试,遇到各种坑,一言难尽啊,要么源码只有一部分,要么直接报错... 最后实在不行,直接去看 ...

  10. 从壹开始前后端分离【 .NET Core2.0 +Vue2.0 】框架之十一 || AOP自定义筛选,Redis入门 11.1

    代码已上传Github+Gitee,文末有地址 书说上文<从壹开始前后端分离[ .NET Core2.0 Api + Vue 2.0 + AOP + 分布式]框架之十 || AOP面向切面编程浅 ...

随机推荐

  1. Java并发(五)----线程常见方法总结

    常见方法 方法名 static 功能说明 注意 start()   启动一个新线程,在新的线程运行 run 方法中的代码 start 方法只是让线程进入就绪,里面代码不一定立刻运行(CPU 的时间片还 ...

  2. CF1348

    传送门 A: 一个组 \(2^n+2^1+\dots+2^{\frac{n}{2}-1}\),另一个组剩下的. B: 考虑不停循环. 如果不同的数字超过 \(k\),无解. 否则先把原序列去重,然后把 ...

  3. 【Unity3D】Bloom特效

    1 Bloom 特效原理 ​ Bloom 特效是指:将画面中较亮的区域向外扩散,造成一种朦脓的效果.实现 Bloom 特效,一般要经过 3 个阶段处理:亮区域检测.高斯模糊.Bloom 合成. ​ 本 ...

  4. Vue+SpringBoot+ElementUI实战学生管理系统-3.表结构设计

    1.章节介绍 前一篇介绍了如何搭建前端工程,这一篇讲一下表结构设计,需要的朋友可以拿去自己定制.:) 2.获取源码 源码是捐赠方式获取,详细请QQ联系我 :)! 3.项目截图 登录页 列表操作 动态图 ...

  5. Oracle dump函数

    DUMP 语法 DUMP(expr[, return_fmt [, start_position [, length ] ] ] ) 用途 DUMP returns a VARCHAR2 value  ...

  6. 【Android 逆向】frida 检测绕过

    1. aaa.apk 安装到手机,是一个叫玩吧的应用 ./hooker ...... 23248 浏 览 器 com.browser2345_oem 32541 玩吧 com.wodi.who 244 ...

  7. 硬件开发笔记(十五):RK3568底板电路VGA显示接口原理图分析

    前言   前面输出了HDMI,LVDS,MIPI-DSI,这里还有一个常用的显示接口就是VGA了,这个用的不多了,一般板子都是hdmi了.  本篇分析底板VGA电路.   VGA接口   VGA(Vi ...

  8. 麒麟系统开发笔记(八):在国产麒麟系统上使用linuxdeployqt发布qt程序

    前言   在ubuntu上发布qt程序相对还好,使用脚本,但是在麒麟上发布的时候,因为银河麒麟等不同版本,使用脚本就不太兼容,同时为了实现直接点击应用可以启动应用的效果,使用linuxdeployqt ...

  9. 优雅使用前端枚举Enum,符合国标的那种!

    01.什么是枚举Enum? 枚举Enum是在多种语言中都有的一种数据类型,用于表示一组特定相关的常量数据集合,如性别(男.女).数据状态(可用.禁用).垂直对齐(顶端.居中.底部).星期等.特点是数据 ...

  10. Kotlin 协程五 —— 在Android 中使用 Kotlin 协程

    目录 一.Android MVVM 结构 二.添加依赖 三.在后台线程中执行 3.1 协程解决了什么问题 3.2 保证主线程安全 3.3 withContext 的性能 四.结构化并发 4.1 追踪协 ...