AJAX实现不刷新页面点击按钮在目标位置加载目标内容_ajax点击按钮获取数据不更新页面-优快云博客

本文介绍了AJAX技术的基本原理和使用方法，包括如何通过JavaScript和DOM实现页面局部刷新，以及使用XMLHttpRequest对象进行异步数据交换的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

AJAX可以实现异步请求数据，即不刷新页面的情况下请求服务器，加载目标内容到页面。

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

AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下

AJAX主要使用XMLHttpRequest对象来实现异步地与服务器交换数据，XMLHttpRequest 对象如果要用于 AJAX 的话，其 open() 方法的 async 参数必须设置为 true；

AJAX使用Javascript/DOM实现页面信息的交互和显示

AJAX使用XML作为转换数据的格式。

通过 AJAX，JavaScript 无需等待服务器的响应，而是：

在等待服务器响应时执行其他脚本
当响应就绪后对响应进行处理

通过下面的例子可以加深对上面内容的理解：

js的AJAX实现方法：

<head>
<script type="text/javascript">
function loadXMLDoc(){ //该函数实现，一单击按钮就能在相应的位置显示目前页面
    //AJAX 创建XMLHttpRequest对象
    var xmlhttp;
    if(window.XMLHttpRequest){//IE7+，Firefox，Chrome，Opera,Safari浏览器执行
        xmlhttp = new XMLHttpRequest();
    }else{ //IE6,IE5浏览器执行代码
        xmlhttp = new ActiveXObject("Microsoft.XMLHTPT");
    }

//规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数
    xmlhttp.onreadystatechange = function(){//存储函数，每当readyState属性改变时，就会调用此函数
        if(xmlhttp.readyState==4 && xmlhttp.status == 200){ 
            //存有XMLHttpRequest的状态信息，4：表示请求已完成，响应已就绪
            document.getElementById("myDiv1").innerHTML = xmlhttp.responseText; //指定ajax响应内容的加载处
        }
    }
    //向服务器发送请求
    xmlhttp.open("GET","/scan/help",true); //以get方式向服务器请求数据http://xxx/scan/help(服务器上文件的地址)页面的内容，true指定为异步方式；
    xmlhttp.send();
}

</script> </head>

html:

<button type="button" onclick="loadXMLDoc()">请求数据</button>
<div id="myDiv1"></div>  //通过ajax请求的内容在此处展现

其中，

XMLHttpRequest对象的responseText或responseXML属性可用来获得来自服务器的响应。

responseText：获得字符串形式的响应数据

responseXML：获得XML形式的响应数据

Onreadystatechange事件：

当请求被发送到服务器时，我们需要执行一些基于响应的任务。

每当 readyState 改变时，就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息。

使用回调函数

回调函数是一种以参数形式传递给另一个函数的函数。

如果您的网站上存在多个 AJAX 任务，那么您应该为创建 XMLHttpRequest 对象编写一个标准的函数，并为每个 AJAX 任务调用该函数。

该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务（每次调用可能不尽相同）：

function myFunction()
{
    loadXMLDoc("/try/ajax/ajax_info.txt",function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
    });
}

参考AJAX菜鸟教程：

http://www.runoob.com/ajax/ajax-tutorial.html