AJAX 实例

本文目录结构

AJAX 实例

为了帮助您理解 AJAX 的工作原理,我们创建了一个小型的 AJAX 应用程序:

这是您当前看到的内容,你可以点击下面按钮来更改内容!然后再看变化!!!

AJAX 实例解析

上面的 AJAX 应用程序包含一个 div 和一个按钮。

div 部分用于显示来自服务器的信息。当按钮被点击时,它负责调用名为 loadXMLDoc() 的函数:

<div style="background-color: #fff000;padding: 10px;">
    <div id="myDiv">
        <strong>这是您当前看到的内容,你可以点击下面按钮来更改内容!然后再看变化!!!</strong>
    </div>
    <button type="button" onclick="loadXMLDoc()">
        通过AJAX请求内容
    </button>
</div>

接下来,在页面的 head 部分添加一个 标签。该标签中包含了这个 loadXMLDoc() 函数:

function loadXMLDoc(){
    if (window.XMLHttpRequest){
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhttp=new ActiveXObject("/");
    }
    xmlhttp.onreadystatechange=function(){
        if (xmlhttp.readyState==4 && xmlhttp.status==200){
        document.getElementById("myDiv").innerHTML='----- 这里从 阿西河前端教程 的后台拿到的数据!当您看到这段话的时候,页面并没有刷新 -----';
        }
    }
    xmlhttp.open("GET","/",true);
    xmlhttp.send();
}

函数里,拿到内容后,我手动更改内容,您可以打个console.log来查看拿到的是什么值

阿西河

AXIHE / 精选教程

浏览全部教程

HTML

CSS

JS

关于本站

阿西河前端教程more,是一个提供大前端开发教程的网站;这里不仅会有传统的WEB开发教程,还会包含Nodejs,Docker,云服务相关的介绍;