AJAX-先后端交互的艺术

时间  2020-01-26
标签 ajax 后端 交互 艺术 栏目 Ajax 繁體版
原文   原文链接

AJAX-先后端交互的艺术

为何要用AJAX？

当咱们经过提交表单向服务器提交内容，或者进行一些其余操做，均涉及到了与浏览器之间的交互，传统的方式与AJAX方式的处理方法是不一样的javascript

  • 传统方式：用户触发一个HTTP请求到 Web服务器，服务器接收并处理传来的数据，而后回送一个新的页面html

    • 分析1：这种方式浪费了不少资源和带宽，不少状况下，返回的页面大部分HTML代码是一致的
    • 分析2：客户在服务器处理请求期间，只能等待，不能进行操做

  • AJAX方式：AJAX能够只向服务器发送请求，而且取回必要的数据，客户端采用 JavaScript 的方式处理来自服务器的回应前端

    • 分析1：大大的减小了数据量，服务器回应速度更快，部分处理转移到了客户端，减轻了服务器的负荷
    • 分析2：能够实现客户端和服务器的异步通信方式（后面说）

举个例子:

  • 若是咱们经过 “传统方式” 对这个页面中的内容分页，这样的话，每次分页都会刷新整个页面，致使已经成功显示的头部信息，以及左侧固定信息，从新从服务器中获取，形成了带宽和服务器资源的孙欢，同时用户也增长了等待时间，
  • 若是咱们经过 “AJAX方式” 实现内容分页，AJAX只须要从服务器中获取到 须要的这些信息也就是图中的红色区域内的数据，这样就不须要刷新整个页面，只须要局部刷新就能够了，既能节省资源，又提高了用户的体验感

什么是 AJAX

AJAX(Asynchronous JavaScript and XML) 异步的 JavaScript 和 XML，是指一种建立交互式网页应用的网页开发技术java

  • 第一种读法：AJAX —— ['eidʒæks] 标准音标读法
  • 第二种读法：阿贾克斯

（内容选自：what is Ajax 中文为是本身翻译的，功底过浅，或许不是很理想）jquery

  • Ajax uses XHTML for content, CSS for presentation, along with Document Object Model and JavaScript for dynamic content display.

    AJAX 使用 XHTML 来描述内容，CSS设置样式，DOM 和 JavaScript实现动态展现内容。web

  • Conventional web applications transmit information to and from the sever using synchronous requests. It means you fill out a form, hit submit, and get directed to a new page with new information from the server.

    传统的 web应用程序使用同步的方式向服务器发送和传输数据，这就是说，你填完一个表单后，点击提交，而后会重定向到一个含新数据的页面（数据由服务器传来）。ajax

  • With AJAX, when you hit submit, JavaScript will make a request to the server, interpret the results, and update the current screen. In the purest sense, the user would never know that anything was even transmitted to the server.

    使用AJAX的时候，当你点击 “提交”，JavaScript 会发送一个请求到服务器，解析请求响应，而且更新到页面中，纯粹来讲，用户是没法感受到任何数据被传送到了服务器。json

  • XML is commonly used as the format for receiving server data, although any format, including plain text, can be used.

    XML通常做为从服务端接受数据的格式，固然也能够用包括 plain text 等 其余格式。后端

  • AJAX is a web browser technology independent of web server software.

    AJAX 是一种与 web 服务软件向独立的 web 浏览器技术。浏览器

  • A user can continue to use the application while the client program requests information from the server in the background.

    当客户端在向服务端请求数据的时候，用户仍然能够继续使用应用。

  • Intuitive and natural user interaction. Clicking is not required, mouse movement is a sufficient event trigger.

    （AJAX展示出一种）直观天然的用户交互体验，点击事件再也不是必须的，鼠标移动事件已经足够。

  • Data-driven as opposed to page-driven.

    （AJAX）使用数据驱动而不是页面驱动。

看完了这些说明，咱们解释一下定义中的两个重点概念：

(一) 什么是异步呢？

(1) 异步的基本概念

异步和同步每每是同时被提到的两个概念，这二者都是基于客户端和服务器端相互通讯的基础上

  • 同步：客户端必须的等待服务器端给予的响应，在此期间不能进行其余操做
  • 异步：与同步不一样，客户端不须要等待服务器响应，在此期间能够进行任何操做

简单概述流程：

同步：发送请求 → 等待服务器处理 → 返回

异步：事件触发 → 服务器处理 （不等待）→ 处理结束

(2) 异步的好处

AJAX 就是一种能够在无需从新加载整个网页的状况下 就能够实现与客户端与服务器的异步通信

往简单了说就是：不用刷新整个网页，就能修改网页局部内容

正如咱们开头所说到的，在开发中，若是每一次局部的小修改都进行页面刷新，这显然对性能会有所下降，并且用户正在执行的操做也会中断

(二) 数据传输格式

Aajx 的英文全称为 Asynchronous JavaScript and XML ，虽然包含了XML，可是数据格式还能够有 JSON等

关于其数据传输格式有这样一种说明：

XML is commonly used as the format for receiving server data, although any format, including plain text, can be used.

XML通常做为从服务端接受数据的格式，固然也能够用包括 plain text 等 其余格式

AJAX中常使用的两种数据传输格式为：XML/JSON ,不过如今更多的是使用 JSON 格式，它做为一种轻量级的数据交换格式，更小，更快，也更加容易解析

若是对于XML/JSON 还不够熟悉的话，能够先去了解一些基本的概念以及用法

AJAX的优缺点及应用场景

(一) 优缺点

  • 优势：

    • 局部刷新，优化了用户体验
    • 异步通讯，不须要打断用户操做，具备良好的响应能力
    • 将一些工做从服务器转移到客户端中，节省了服务器和带宽资源
    • 按需取数据 ，减轻了服务器负担，也大大减小了冗余请求

  • 缺点：

    • AJAX 主要依赖于JavaScript ，浏览器对 JavaScript 的兼容性将直接影响 AJAX的使用
    • 浏览器的后退机制被破坏，这也正是局部刷新所带来的问题，不过如今有一些方式能够尽量弥补这些问题
    • 移动端对 AJAX 的支持没有那么好

(二) 应用场景

  • ① 搜索框联想列表

  • ② 局部刷新分页效果

  • ③ 同页面加载更多数据

  • ④ 表单数据校验

XMLHttpRequest - 核心对象

XMLHttpRequest = AJAX？

做为一个小菜鸟而言，仅限于一下不算太深刻的应用，我经常会有这样一种感受，XMLHttpRequest = AJAX 吗？

（内容选自：what is Ajax 中文为是本身翻译的，功底过浅，或许不是很理想）

可按我的须要选择是否跳过这个问题，直接跳转到后面的语法等部分

AJAX stands for Asynchronous JavaScript and XML. AJAX is a new technique for creating better, faster, and more interactive web applications with the help of XML, HTML, CSS, and JavaScript.

AJAX 所表明的的是 JavaScript和XML。AJAX是一种新技术，它经过利用 XML，HTML，CSS 和 JavaScript 来建立更好，更快，更具备交互性的Web应用程序。

AJAX is based on the following open standards −

AJAX 是基于如下公共的标准

  • Browser-based presentation using HTML and Cascading Style Sheets (CSS).

    浏览器使用 HTML 以及 CSS 进行展现。

  • Data is stored in XML format and fetched from the server.

    从服务端获取的数据以 XML 格式存储。

  • Behind-the-scenes data fetches using XMLHttpRequest objects in the browser.

    在后台使用 XMLHttpRequest 请求数据 。

  • JavaScript to make everything happen.

    JavaScript 负责整个流程的实现

看完了上面的说明， 咱们能够看出来，AJAX不是指一种单一的技术，而是，利用了多种技术而产生的一种技术方案，上面提到的，主要依赖的技术也就是 HTML CSS JavaScript，而真正负责咱们实现浏览器与服务器 进行请求与相应的就是 XMLHttpRequest

下面，咱们来重点了解一下它

(一) XMLHttpRequest 基本原理

Ajax中最大的特色 就是请求会被异步对象XMLHttpRequest进行封装，而后再发送到服务器，接着服务器以流的形式将数据返回给浏览器

也正是由于服务器返回的数据是经过流的形式发送的，XMLHttpRequest对象会不停的监听服务器，且获得服务器数据，因此浏览器不须要刷新就能够获取服务器端的数据

(二) XMLHttpRequest 方法和属性

注：下面会讲解具体的用法，在此处仅做为方法和属性的基本概括和梳理，不作过于具体的说明，可先简单浏览，待到看完文章再回来阅读

方法：

  • open( )

    准备初始化一个AJAX请求

    • open( method, URL )
    • open( method, URL, async )
    • open( method, URL, async, userName )
    • open( method, URL, async, userName, password )
  • send( content )

    发送请求

  • setRequestHeader( label, value )

    设置请求头信息

  • getAllResponseHeaders()

    以字符串的形式返回完整的HTTP头信息集

  • getResponseHeader( headerName )

    返回指定的响应头部信息

  • abort()

    取消当前的请求

属性：

  • onreadystatechange

    监听事件，当 readyState 属性发生变化时触发

  • readyState

    定义了 XMLHttpRequest 对象的当前状态 （0 1 2 3 4）

  • responseText

    以字符串的形式返回响应

  • responseXML

    返回XML格式的响应，此属性返回一个XML文档对象

  • status

    返回 HTTP 状态 (e.g., 404 for "Not Found" and 200 for "OK").

  • statusText

    返回 HTTP 状态的说明 (e.g., "Not Found" or "OK").

附：思惟导图

使用 AJAX 的步骤

(一) 建立 XMLHttpRequest 对象

针对不一样版本的浏览器，建立 XMLHttpRequest 对象有着不一样的方法，分为两类：

  • 比较新的现代浏览器：IE7+, Firefox, Chrome, Opera, Safari
  • 旧版本的IE浏览器等：IE6, IE5

针对不一样的状况咱们能够须要一个能够兼容各类浏览器的通用函数

<script language="javascript" type="text/javascript">
    
    function ajaxFunction() {
        var ajaxRequest;
        try {
            // 兼容 IE7+, Firefox, Chrome, Opera, Safari
            ajaxRequest = new XMLHttpRequest();
        } catch (e) {
            // 兼容 Internet Explorer Browsers
            try {
                ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {
                    return false;
                }
            }
        }
    }

</script>

简单的也能够这么写

<script language="javascript" type="text/javascript">

    function ajaxFunction() {
        var xhr;
        if (window.XMLHttpRequest) {
            xhr=new XMLHttpRequest();
        }
        else {
            xhr=new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
    
</script>

(二) 准备AJAX请求

xhr.open(method, URL, async);

  • 参数1：请求方式（Get、Post）

    • get：请求参数在URL后拼，send方法为空
    • post：请求参数在send方法中写，open方法中仅仅写 URL便可
  • 参数2：请求URL
  • 参数3：true-异步，false-同步（通常均为 true）

(1) 必须知道的 GET 与 POST

GET 请求：

GET 请求经常使用于获取服务器的数据，例如咱们使用 连接（href）或 URL 等发起请求，而咱们经常须要将页面中的参数，传递到后端进行定位或处理，GET请求的方式就会将数据拼接到 RUL后面，方便服务器进行解析

格式：？、开头，& 分隔字符串，参数之间不须要空格，参数值不须要单双引号包括，例如：

loginServlet?username=admin&password=admin

POST 请求：

POST 请求用于向服务器发送被处理的数据，提交表单既可使用GET，也可使用POST方式，推荐使用POST方式，查询数据的时候推荐使用GET方式

GET：没有请求体，但空行是存在的，附带的参数有限制，数据容量不能超过1k

POST：存在请求体，能够在请求的实体内容中向服务器发送数据，传送的数据量是无限制的

(2) GET 方式请求的格式：

xhr.open("GET","loginServlet?username=admin&password=admin",true);

(3) POST 方式请求的格式：

xhr.open("POST",loginServlet,true);

使用 POST 方式提交的时候，其须要发送的数据怎么办呢？ 答案是：在 send 的方法中做为参数进行传递，发往服务器

(三) AJAX 发送请求

xhr.send();

(1) GET 方式请求的格式：

xhr.send(null);

使用 GET 方式仍是比较简单的，只须要在send方法汇总传入一个null值便可了

(2) POST 方式请求的格式：

若是须要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。而后在 send() 方法中规定您但愿发送的数据：

xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send("username=admin&password=admin");

(四) 处理响应

xhr.onreadystatechange=function() {
//判断readyState就绪状态是否为4，判断status响应状态码是否为200
if (xhr.readyState==4 && xhr.status==200) {
    //获取服务器的响应结果
    var responseText = xhr.responseText;
    alert(responseText);
    }
}
状态 描述
readyState = 0 请求未初始化：在建立XMLHttpRequest对象以后，但在调用open（）方法以前
readyState = 1 请求已创建：在调用open（）方法以后但在调用send（）以前
readyState = 2 请求已发送：调用send（）以后
readyState = 3 求正在处理中：浏览器与服务器创建通讯以后，但服务器未完成响应以前
readyState = 4 求已完成：请求完成后，而且已从服务器彻底接收到响应数据
状态码 解释
200 请求成功
302 请求重定向
304 请求资源没有改变
404 请求资源补不存在，属性客户端错误
500 服务器内部错误

编写一个简单的 AJAX 程序（原生方式）咱们简单的模拟一个表单校验的程序

  • index.html

    注：为效果更容易理解，设置按钮点击事件进行校验，实际可以使用失/获焦点相关方法进行优化

<input type="text" id="username">
<input type="button" onclick="ajaxFunction()" value="向后台判断用户名是否存在"></br>
<div id="msgError">校验显示区域</div>
  • JavaScript 代码
<script language="javascript" type="text/javascript">
    function ajaxFunction() {
        var ajaxRequest;
        try {
            // 兼容 IE7+, Firefox, Chrome, Opera, Safari
            ajaxRequest = new XMLHttpRequest();
        } catch (e) {
            // 兼容 Internet Explorer Browsers
            try {
                ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {
                    return false;
                }
            }
        }
        //准备请求
        ajaxRequest.open("POST", "loginServlet", true);

        //因为是POST提交方式，因此添加 HTTP 头
        ajaxRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

        //获取到表单中输入的值
        var name_input = document.getElementById("username").value;

        //发送请求
        ajaxRequest.send("username=" + name_input);

        ajaxRequest.onreadystatechange = function () {
            //判断readyState就绪状态是否为4，判断status响应状态码是否为200
            if (ajaxRequest.readyState == 4 && ajaxRequest.status == 200) {
                //获取服务器的响应结果
                var responseText = ajaxRequest.responseText;

                var div = document.getElementById("msgError");
                div.innerText = responseText;

            }
        }
    }
</script>
  • loginServlet
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        request.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=utf-8");

        String username = request.getParameter("username");
        
        //此语句仅为方便判断是否后端正常收到了前端的数据，可选择删除
        System.out.println("接收到的数据：" + username);

        try {
            if (username.equals("admin")) {
                Thread.sleep(5000);
                response.getWriter().print("该用户名已经存在");
            } else {
                Thread.sleep(5000);
                response.getWriter().print("该用户名能够注册");
            }
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
    }

咱们这样就在无需从新加载整个网页的状况下 就能够实现与客户端与服务器的异步通信，咱们为了演示，同时在后台主动设置 延时5秒响应的状况下，但咱们用户仍然能够在此期间进行操做，具体状况，能够自行简单模拟试验

JQuery 实现方式

使用原生的 JavaScript 实现 AJAX 确实比较麻烦，而 使用 Jquery 也能够帮助咱们实现这样一种需求，并且也会让咱们的代码更加简洁，直观

举个例子：

<script language="javascript" type="text/javascript">

    function ajaxFunction() {
        var name_input = document.getElementById("username").value;

        $.ajax({
            url: "loginServlet",
            type: "POST",
            data: {"username": name_input},
            success: function (data) {
                var div = document.getElementById("msgError");
                div.innerText = data;
            },
            error: function () {
                alert("发生错误");
            }
        });
    }

</script>
  • url：请求路径
  • type：请求方式
  • date：请求参数，想对应于原生JS实现的，data: "username=admin&age=20"
  • success：响应成功后的回调函数
  • error：果请求响应出现错误，会执行的回调函数
  • dateType：设置接受到的响应数据的格式（上例中未写）

固然它的参数和设置选项不止这些，在这里只选择了一些相对简单或者说必须的，详情能够参考 JQuery API 文档

举个例子：

在 Servlet 和 html 均不变的基础上，咱们修改 js代码，使用jquery的方式来实现一样的功能

<script language="javascript" type="text/javascript">

    function ajaxFunction() {
        var name_input = document.getElementById("username").value;

        $.ajax({
            url: "loginServlet",
            type: "POST",
            data: {"username": name_input},
            success: function (data) {
                var div = document.getElementById("msgError");
                div.innerText = data;
            },
            error: function () {
                alert("发生错误");
            }
        });
    }

</script>

通过测试结果是同样的

JQuery确实极大的简化了咱们的代码，可是若是你只是想快速的实现这一种需求，JQuery 其实还提供了两个更为简单的方式，以取代复杂 $.ajax

(一) $.get()方法

说明：这是一个简单的 GET 请求功能，来取代复杂的 $.ajax

完整结构： $.get(url,[data],callback,type)

  • url：待载入页面的URL地址
  • data：待发送 Key/value 参数
  • callback：载入成功时回调函数
  • type：返回内容格式，xml, html, script, json, text, _default

这种方式旨在快速的实现请求，当请求成功的时候能够调用回调函数，若是须要在出错的时候执行函数，仍是须要使用 $.ajax()

(二) $.post()方法

说明：这是一个简单的 POST 请求功能，来取代复杂的 $.ajax

完整结构： $.post(url, [data], [callback], [type])

  • url：发送请求地址
  • data：待发送 Key/value 参数
  • callback：发送成功时回调函数
  • type：返回内容格式，xml, html, script, json, text, _default。

仍是沿用上面的 html和Servlet，修改function代码

<script language="javascript" type="text/javascript">

    function ajaxFunction() {
        var name_input = document.getElementById("username").value;

        $.get("loginServlet",{username:name_input},function (data) {
            var div = document.getElementById("msgError");
            div.innerText = data;
        },"text");
    }

</script>

总结：$.get()方法 和 $.post()方法方法都可以快速简洁的完成一些基本操做，若是操做比较复杂，仍是须要使用 $.ajax()方式

总结：

AJAX 的的基本知识，以及使用 JavaScript 和 JQuery 这两种实现方式，咱们就已经介绍完了，到如今为止，如何发起而且接收响应已经不在话下了，而且咱们对 AJAX 有了必定的认识，可是 AJAX 的一些应用场景，以及AJAX 如何搭配 常见的 如 JSON 等数据格式，实现先后端的交互，并无提到，咱们就放到后面说，将所有的内容挤到一块儿，不管是从篇幅或者说内容的针对性都是不够强的，不过AJAX 也确实是咱们成长路上不可不学的一门技术了，有什么不清楚的， 能够尝试着看一些国内外的资源站点，w3chool、tutorialspoint 等等，多翻翻 API 文档，尤为是一些英文的文档和资料，我感受对我我的帮助仍是很大的。

一样在此感谢你们的支持！谢谢！

你们的每个阅读和赞我都当作了喜欢！❤️

结尾：

若是文章中有什么不足，或者错误的地方，欢迎你们留言分享想法，感谢朋友们的支持！

若是能帮到的话，那就来关注我吧！若是你更喜欢微信文章的阅读方式，也能够关注个人公众号哈

在这里的咱们素不相识，却都在为了本身的梦而努力 ❤

一个坚持推送原创开发技术文章的公众号：理想二旬不止

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程