浅谈AJAX

最新推荐文章于 2024-04-12 23:21:02 发布

TAO_GIS

最新推荐文章于 2024-04-12 23:21:02 发布

阅读量193

点赞数 1

分类专栏： ajax 文章标签： ajax 前端 javascript

本文链接：https://blog.csdn.net/tao_gis/article/details/79886876

版权

ajax 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

AJAX就是异步的javascript和XML。

在ajax出现以前，浏览器发起请求只有3种方式。

1.浏览器地址栏

2.a标签(a href)

3.img标签

可是以上三种方式有的会导致整个页面刷新，有的只能请求部分文件（img、css、js）

后来微软提供在ie5.0 6.0提供了一个接口ActiveXObject，这个接口用于在后台与服务器交换数据，这意味可以在不刷新整个页面的情况下，对网页的某部分进行更新。后来的浏览器都提供XMLHttpRequest这个新的接口。他们功能是一样的。

ActiveXObject，这个接口用于在后台与服务器交换数据，这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。后来的浏览器都提供XMLHttpRequest这个新的接口。

ajax的核心就是XHR这个对象，我们可以通过实例化XHR，然后调用实例的open方法来确定请求方式和内容（GET,POST），调用send()方法来发送请求。

xmlhttp.open("GET","/try/ajax/demo_get.php",true);
xmlhttp.send();

用responseText或responseHTML来获取响应，并写入HTML文档。

responseText:

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

responseHTML：

xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
{
    txt=txt + x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("myDiv").innerHTML=txt;

onreadystatechange事件：

请求发送到服务器时，我们需要执行一些操作。

xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}

当readystate为4 ，status为200时候，说明服务器已经准备响应。我们在事件中写入处理响应的方法。

回调函数

存在多个ajax时，我们将可重用部分封装为主要函数，使用新的函数（参数含有回调函数）来实现不同功能，避免代码之间的干扰。

function myFunction()//调用这个函数来实现不同功能
{
    loadXMLDoc("/try/ajax/ajax_info.txt",function()//loadXMLDoc为主要函数（可重用部分代码），参数中的回调函数来实现不同功能
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
    });
}

ajax向服务器发送请求的过程：

创建 XMLHttpRequest 对象
当服务器响应就绪时执行所创建的函数
把请求发送到服务器上的文件

请求数据库上的数据时：url指向的是node管理数据库的.js数据库

xmlhttp.open("GET","/try/ajax/getcustomer.php?q="+str,true);

url增加？.q=来指向所需要访问的“主键”

一个简单的ajax例子

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
<button type="button" οnclick="loadXMLDoc()">修改内容</button>

<script>
 function loadXMLDoc(){
     var XHR = new XMLHttpRequest()
     XHR.onreadystatechange = function(){
         if(XHR.readyState ==4 && XHR.status == 200){
             document.getElementById('myDiv').innerHTML == XHR.responseText
         }
     }
     XHR.open('GET','./test.txt',true)
     XHR.send()
 }
</script>
</body>
</html>

TAO_GIS

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浅谈AJAX

AJAX就是异步的javascript和XML。在ajax出现以前，浏览器发起请求只有3种方式。 1.浏览器地址栏 2.a标签(a href) 3.img标签可是以上三种方式有的会导致整个页面刷新，有的只能请求部分文件（img、css、js）后来微软提供在ie5.0 6.0提供了一个接口ActiveXObject，这个接口用于在后台与服务器交换数据，这意味可以在不刷新整个页面的情况下，对网页的某部...
复制链接

扫一扫