• AJAX详解：

    目录

    一.AJAX简介：

    二.AJAX的使用：

    一.AJAX简介：

      1.1 什么是AJAX:

    AJAX 即 Asynchronous JavaScript + XML（异步JavaScript和XML）, 其本身不是一种新技术，而是一个在 2005年被Jesse James Garrett提出的新术语，是一个技术的集合，其中包括HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的 XMLHttpRequest。当使用结合了这些技术的AJAX模型以后， 网页应用能够快速地将增量更新呈现在用户界面上，而不需要重新加载（刷新）整个页面。这使得程序能够更快地回应用户的操作。

    例如我们使用的百度搜索框，每次输入不同的信息，下面的框会更新对应的信息。当我们每次局部刷新的时候，页面的局部会显示不同的数据。

    这都是AJAX的应用。

    • HTML/XHTML——主要的内容表示语言。
    • CSS——为XHTML提供文本格式定义。
    • DOM——对已载入的页面进行动态更新。
    • XML——数据交换格式，可扩展的标记语言，用自己定义的标签来存储数据的。
    • XSLT——将XML转换为XHTML（用CSS修饰样式）。
    • XMLHttp——用XMLHttpRequest来和服务器进行异步通信，是主要的通信代理。
    • JavaScript——用来编写Ajax引擎的脚本语言。

      最主要的是使用了异步通信——异步Javascript和XML（即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML） 也就是你可以同时发送多个请求，而服务器的响应顺序有可能不是请求顺序。第一次响应的有可能是请求的最后一个请求）。

      AJAX的应用：

    每次我们输入完之后，光标离开那么客户端发送请求到服务器，实现局部刷新。这就是AJAX请求 

      1.2  XMLHttpRequest：

    AJAX就是在Javascript中多添加了一个对象：XMLHttpRequest对象。所有的异步交互都是使用XMLHttpRequest对象完成的。其中 XMLHttpRequest 对象与服务器通信。 它可以使用JSON，XML，HTML和text文本等格式发送和接收数据。

    1.3 AJAX的原理：

    Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发送异步请求，从服务器获得数据，然后用JavaScript来操作DOM而更新页面。最主要是从服务器拿到请求的数据。 

    1. // 创建XMLHttpRequest对象,也就是创建一个异步调用对象
    2. const request = new XMLHttpReauest()
    3. // 调用对象的open方法，创建一个新的HTTP请求,并指定其请求的方法、URL及验证信息
    4. request.open(method, url, async);  
    5. // 设置响应 HTTP 请求状态变化的函数
    6. request.onreadystatechange = function () {
    7.    if(request.readyState === 4 && request.status === 200) {
    8.      console.log(request.responseText);
    9.    }};
    10. // 调用对象的send方法，发送请求  
    11. request.send();
    12. //  获取异步调用返回的数据
    13. // 使用 JavaScript 和 DOM 实现局部刷新

    二.AJAX的使用：

       2.1 使用jQuery使用AJAX：

    通过JavaScript书写AJAX方法相应的比较复杂,还要考虑到浏览器的兼容性等一系列问题.而JQuery中已经将AJAX相关的操作进行了封装,使用时只需要在合适的地方调用AJAX相关的方法即可,相比而言,JQuery实现AJAX更加简洁,方便。

         2.1.1 $.ajax()

    $.ajax()可以通过发送HTTP请求加载远程数据,是jQuery最底层的AJAX的实现,具有较高灵活性:

      语法：

    $.ajax([设置参数]);

    主要参数：

    参 数说 明
    String url发送请求的地址,默认为当前页地址
    String type请求方式(POST或者GET,默认为GET)
    Number timeout设置请求超时时间
    Object data 或 String data发送到服务器的数据
    String dataType预期服务器返回的数据类型,可用类型有:XML,HTML,Script,JSON,JSONP,Text
    function beforeSend(XMLHttpRequest xhr)发送请求前调用的函数参数xhr,可选, XMLHttpRequest对象
    function complete(XMLHttpRequest xhr,String ts)请求完成后调用的函数(请求成功或失败时均调用)参数: xhr,可选, XMLHttpRequest对象, ts可选,描述请求类型的字符串
    function success(Object result,String ts)请求成功后调用的函数参数result:可选,由服务器返回的数据参数ts可选,描述请求类型的字符串
    function error(XMLHttpRequest xhr,String em,Exception e)请求失败时调用的函数参数: xhr,可选, XMLHttpRequest对象, 参数em可选,错误信息参数e:可选 ,捕获的异常对象
    boolean global默认为true,表示是否触发全局的AJAX事件

      2.1.3 $.get()：

    $.get()方法是JQuery封装的发送HTTP GET请求从服务器加载数据的AJAX方法,具体语法如下:

      

     $.get(url,data,success(resp,status,xhr),dataType)

    post()方法和get（）的语法参数，差不多 

      主要参数：

    参 数说 明
    String url必选,规定将请求发送到呢个url
    Object data 或 String data可选,规定发送给服务器的数据
    function success(Object result,String status,XMLHttpRequest xhr)可选,请求成功后调用的函数:参数result:可选,服务器返回的结果参数status:可选,请求的状态参数xhr: 可选,XMLHttpRequest对象
    String dataType预期服务器返回的数据类型,可用类型有:XML,HTML,Script,JSON,JSONP,Text

    代码演示：

    1. DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>使用JQuery发送ajax请求title>
    6.     <script type="text/javascript" src="/js/jquery-2.1.0.min.js">script>
    7. head>
    8. <body>
    9. <script type="text/javascript">
    10.     $(function(){
    11.        $("#btn1").click(function(){
    12.             // 发送ajax请求
    13.            $.ajax({
    14.                url:'/AjaxServlet',
    15.                data:'name=zhangsan&age=18',
    16.                type:'GET',
    17.                dataType:'text',
    18.                success:function(rs){
    19.                     $("#text").html(rs);
    20.                }
    21.            });
    22.           $.get('/AjaxServlet','name=zhangsan&age=18',function(rs){
    23.                          $("#text").html(rs);
    24.                    },'text');
    25.            $.ajax({
    26.                url:'/AjaxServlet',
    27.                data:'name=lisi&age=20',
    28.                type:'POST',
    29.                dataType:'text',
    30.                success:function(rs){
    31.                     $("#text").html(rs);
    32.                }
    33.            });
    34.  
    35.            //post请求
    36.            $.post('/AjaxServlet','name=wangwu&age=18',function(rs){
    37.                $("#text").html(rs);
    38.            },'text');
    39.        });
    40.     });
    41. script>
    42.     <input type="text"  />
    43.     <button id="btn1">发送get请求button>
    44.     <h2 id="text">h2>
    45. body>
    46. html>

    登录实时判断验证码：

    1.  $(function(){
    2.  
    3.            $("#verifycode").blur(function () {
    4.             // 获取前端输入的数据
    5.                var ver2 = $("#verifycode").val();
    6.                $.ajax({
    7.                    url: '/LoginServlet',
    8.                    //使用数组存储数据
    9.                    data:{"verifycode":ver2,"time":new Date()},
    10.                    type:'post',
    11.                    datatype:'text',
    12.                 //    成功之后，返回后端数据（rs），之后使用html赋值给对应的
    13.                    success:function (rs) {
    14.                        $("#errorinfo2").html(rs);
    15.                    }
    16.                });
    17.            });
    18.        });

  • 相关阅读:
    【Docker】Docker的应用包含Sandbox、PaaS、Open Solution以及IT运维概念的详细讲解
    华为交换机端口类型：Access、Trunk、Hybrid
    C++一元多项式计算器的设计与实现
    Qt多线程
    MybatisPlus 从零开始 全面学习!
    One UI 5 升级来了
    深入理解Java中的转义字符
    FreeRTOS移植-教你修改portable(S3C2440、ARM9、gcc)
    讯飞AIUI智能机器人5-----让器理解你（语音技术综合应用）
    2022前端CSS经典面试题
  • 原文地址：https://blog.csdn.net/qq_50692350/article/details/127636174