原生Ajax

AJAXAsynchronous Javascript And XML)翻译成中文就是异步的JavascriptXML”。即使用Javascript语言与服务器进行异步交互,传输的数据为XML(当然,传输的数据不只是XML)。

AJAX 不是新的编程语言,而是一种使用现有标准的新方法。

AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。(这一特点给用户的感受是在不知不觉中完成请求和响应过程)

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

  • 同步交互:客户端发出一个请求后,需要等待服务器响应结束后,才能发出第二个请求;
  • 异步交互:客户端发出一个请求后,无需等待服务器响应结束,就可以发出第二个请求(默认)。

 

AJAX的优缺点

优点:

  • AJAX使用JavaScript技术向服务器发送异步请求;
  • AJAX请求无须刷新整个页面;
  • 因为服务器响应内容不再是整个页面,而是页面中的部分内容,所以AJAX性能高; 

Ajax调用本地json文件示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ajax 2 - json</title>
</head>
<body>
    <button id=‘btn-1‘>单个用户</button>
    <button id=‘btn-2‘>所有用户</button>
    <br><br>
    <h1>单个数据</h1>
    <p id="user"></p>
    <h1>多个数据</h1>
    <p id="users"></p>
</body>
<script>
    let userBtn = document.getElementById(‘btn-1‘);
    let user = document.getElementById(‘user‘);
    let usersBtn = document.getElementById(‘btn-2‘);
    let users = document.getElementById(‘users‘);

    // 回调函数不要加括号,否则会变成立即执行函数
    userBtn.addEventListener(‘click‘,loadUser);
    usersBtn.addEventListener(‘click‘,loadUsers);

    function loadUser(){
        let xhr = new XMLHttpRequest();
        xhr.open(‘GET‘,‘user.json‘, true);
        xhr.onload = function(){
            if(user.innerHTML.length>0){
                user.innerHTML = ‘‘;
                return;
            }
            if((xhr.status >= 200 && xhr.status <= 300)||xhr.status==304){
                let userInfo = JSON.parse(this.responseText);
                //console.log(user);
                let output = ‘‘;
                output += `
                    <ul>
                        <li>id: ${userInfo.id}</li>
                        <li>name: ${userInfo.name}</li>
                    </ul>
                `
                user.innerHTML = output;
            }
        }
        xhr.send();
    }

    function loadUsers(){
        let xhr = new XMLHttpRequest();
        xhr.open(‘GET‘,‘users.json‘, true);
        xhr.onload = function(){
            if(users.innerHTML.length>0){
                users.innerHTML = ‘‘;
                return;
            }
            if((xhr.status >= 200 && xhr.status <= 300)||xhr.status==304){
                let usersInfo = JSON.parse(this.responseText);
                //console.log(users);
                let output = ‘‘;
                for(const e in usersInfo){
                    output += `
                    <ul>
                        <li>id: ${usersInfo[e].id}</li>
                        <li>name: ${usersInfo[e].name}</li>
                    </ul>
                `
                }
                users.innerHTML = output;
            }
        }
        xhr.send();
    }
</script>
</html>

Ajax调用API示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ajax 3 - API</title>
</head>
<body>
    <button id=‘btn‘>显示</button>
    <br><br>
    <h1>所有github的用户信息</h1>
    <div id="users"></div>
</body>
<script>
    let users;
    function loadInfo(){
        if(document.getElementById(‘users‘).innerHTML.length>0){
            users = ‘‘;
            document.getElementById(‘users‘).innerHTML=‘‘;
            document.getElementById(‘btn‘).innerText = ‘显示‘;
            return;
        }
        document.getElementById(‘btn‘).innerText = ‘隐藏‘;
        let xhr = new XMLHttpRequest();
        xhr.open(‘GET‘,‘https://api.github.com/users‘,true);
        xhr.onload = ()=>{
            if (xhr.status==304) return;
            if((xhr.status>=200 && xhr.status<=300)){
                users = JSON.parse(xhr.responseText);
                //console.log(JSON.stringify(users));
                for(const e in users){
                    let output =  `
                    <div style="width: 300px; margin: 10px; padding: 5px; background: lightblue; text-align: center;">
                        <img src=‘${users[e].avatar_url}‘ width=300 height=300>    
                        <p>${users[e].login}<p>
                        <a href=‘${users[e].html_url}‘>homepage</a>
                    </div>
                    `;
                    document.getElementById(‘users‘).innerHTML += output;
                }
            }

        }
        xhr.send();
    }
    document.getElementById(‘btn‘).addEventListener(‘click‘,loadInfo);
</script>
</html>

 

fetch方法

fetch是ES的新api,可以简化手写ajax。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fetch - API</title>
</head>
<body>
    <button id=‘btn‘>显示</button>
    <br><br>
    <h1>所有github的用户信息</h1>
    <div id="users"></div>
</body>
<script>
    let usersInfo = document.getElementById(‘users‘);
    let btn = document.getElementById(‘btn‘);
    async function getData(){
        const response = await fetch(‘https://api.github.com/users‘);
        users = await response.json();
        users.forEach(user=>{
            let output =  `
                <div style="width: 300px; margin: 10px; padding: 5px; background: lightblue; text-align: center;">
                    <img src=‘${user.avatar_url}‘ width=300 height=300>    
                    <p>${user.login}<p>
                    <a href=‘${user.html_url}‘>homepage</a>
                </div>
                `;
            usersInfo.innerHTML += output;
        });
    }
    btn.addEventListener(‘click‘,getData);
</script>
</html>

  

 

原生Ajax

上一篇:::在c++中的应用


下一篇:c++ stl algorithm: std::fill, std::fill_n