Ajax基础

2020-03-30 本文已影响0人 MoreCode

1.AJAX(asynchronous javascript and xml)简介

AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。AJAX = 异步 JavaScript 和 XML。 AJAX 是一种用于创建快速动态网页的技术。
AJAX is not a programming language. It is just a technique for creating better and more interactive web applications.

图1 使用ajax响应搜索输入

2.AJAX使用

2.1 发送请求

XMLHttpRequest 是 AJAX 的基础。
如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：

   xmlhttp.open("GET","test1.txt",true);
   xmlhttp.send();

GET 还是 POST？

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。然而，在以下情况中，请使用 POST 请求:

无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

具体知识以及使用可参考w3school官网

2.2 接收请求

如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

3.应用实例

通过ajax请求json数据，并展示。

图2 案例网页

网页元素代码:

<body>
    <div id="container">
        <div id="father">
            <a id="name">XXX</a><a>是一位</a><a id="age">XX</a><a>岁的天才！</a>
            <br />
            <button id="btn" onclick="loadRequest()">变化</button>
        </div>
    </div>
</body>

js代码:

<script>
    function loadRequest() {
        var xhr;
        xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                var data = JSON.parse(xhr.responseText);
                document.getElementById("name").innerHTML = data.name;
                document.getElementById("age").innerHTML = data.age;
            }
        }
        xhr.open("GET", "./data.xml", true);
        xhr.send();
    }
</script>

通过实例化XMLHttpRequest对象，将存储数据的.xml文件中的字符串通过JSON.parse()方法转化为对象，再将对象中的响应数值传输给网页页面元素上。

图3 数据对象

页面刷新：

图4 ajxa响应