原创

    Ajax 和 Json 初识

    AJAX 知识

    AJAX 简介

    AJAX 【Asynchronous JavaScript and XML】 翻译过来是 异步的 JavaScript 和 XML ,它不是新的编程语言,而是一种使用现有标准的新方法。 AJAX 最大的优点是 在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容


    AJAX 不需要任何浏览器插件,但需要用户允许 JavaScript 在浏览器上执行


    AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新【传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面】。


    有很多使用 AJAX 的应用程序案例:新浪微博、Google 地图、开心网 等等。

    AJAX 原理图

    AJAX 实例

    这是一段前端代码,用于 模拟 AJAX就是不通过刷新页面就可以得到数据 。代码如下:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>AJAX 实例</title>
        </head>
        <script type="text/javascript">
            function loadPage() {
                var URL = document.getElementById('url').value;
                document.getElementById('iframePosition').src = URL;
            }
        </script>
        <body>
            <div>
                <h3>请输入要加载的网址:</h3>
                <p>
                    <input type="text" placeholder="https://www.baidu.com" value="" id="url" />
                    <input type="button" value="submit" id="url" onclick="loadPage()" />
                </p>
            </div>
    
            <div>
                <h3>加载页面的位置:</h3>
                <iframe style="width:100%;height: 500px;" id="iframePosition"></iframe>
            </div>
        </body>
    </html>
    

    最终效果如下图:

    AJAX 原理图

    AJAX 和 Java 交互

    这部分内容就不再写了,具体可参考以下教程。搜索关键词:【Ajax java】:

    菜鸟教程之AJAX Java Web 之 AJAX

    JSON 知识

    JSON 简介

    CSDN教程之JSON 菜鸟教程之JSON

    JSON 的数据格式一览:

    {
        "date": "2019.12.27",
        "src": "https://guoshizhan.github.io/avatar.gif",
        "name": "何年の再遇见",
        "desc": "愿你走出半生,归来仍是少年",
        "url": "https://guoshizhan.github.io",
        "address": {
            "street": "学苑路",
            "city": "吉安"
        },
        "hobby": [sleep, read, music]
    }
    
    Ajax
    Json
    • 文章作者:GuoShiZhan
    • 创建时间:2021-08-16 12:41:17
    • 更新时间:2021-08-16 12:42:52
    • 版权声明:本文为博主原创文章,未经博主允许不得转载!
    请 在 评 论 区 留 言 哦 ~~~
    1024