AJAX实现不刷新页面点击按钮在目标位置加载目标内容

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" οnclick="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

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页