js之ajax的一点理解

最新推荐文章于 2023-04-10 10:17:36 发布

原创最新推荐文章于 2023-04-10 10:17:36 发布 · 248 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #js

js 专栏收录该内容

7 篇文章

订阅专栏

一、定义：

1.Ajax是Asynchronous Javascript And Xml 的缩写（异步javascript及xml），Ajax是使用javascript在浏览器后台操作HTTP和web服务器进行数据交换

不重新加载整个网页的情况下，对网页的某部分进行更新。

二、进步：

在等待服务器响应时执行其他脚本（异步处理，每个一段时间来轮询一下状态）
当响应就绪后对响应进行处理

三、代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> -->
    <title>php</title>
    <script type="text/javascript">

        window.addEventListener("load",function() {
            var btn = document.getElementById("btn");
            var content = document.getElementById("content");
            btn.addEventListener("click",function() {
                var request = new XMLHttpRequest();
                request.onreadystatechange = function() {

                    if(request.readyState === 4 && request.status == 200) {
                        // console.log(JSON.parse(request.responseText));
                        content.innerHTML = request.responseText;
                    }
                }
                request.open("GET","./test.php",true);
                // request.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=utf-8");
                request.send(null);
            });

        },false);
    </script>
</head>
<body>
<input type="button" value="点我" id="btn">
<h2>下面是点击后的内容：</h2>
<p id="content"></p>
</body>
</html>

注意:使用 async=false 时，请不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可

原因:当async=falsle时，是阻塞的，等待服务器响应才会执行后续的代码，所以可以这样写:

var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

xmlhttp.open("GET","test1.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

四、回调函数：

<html>
<head>
    <meta charset="utf-8">
    <script type="text/javascript">
        var xmlhttp;
        function loadXMLDoc(url,callback)
        {
            if (window.XMLHttpRequest)
            {// code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp=new XMLHttpRequest();
            }
            else
            {// code for IE6, IE5
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange=callback;
            xmlhttp.open("GET",url,true);
            xmlhttp.send();
        }
        function myFunction()
        {
            loadXMLDoc("./test.txt",function()
            {
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
                }
            });
        }
    </script>
</head>
<body>

<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="myFunction()">通过 AJAX 改变内容</button>

</body>
</html>

五、与XML的交互

function loadXMLDoc(url)
{
var xmlhttp;
var txt,xx,x,i;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    txt="<table border='1'><tr><th>Title</th><th>Artist</th></tr>";
    x=xmlhttp.responseXML.documentElement.getElementsByTagName("CD");
    for (i=0;i<x.length;i++)
      {
      txt=txt + "<tr>";
      xx=x[i].getElementsByTagName("TITLE");
        {
        try
          {
          txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
          }
        catch (er)
          {
          txt=txt + "<td> </td>";
          }
        }
    xx=x[i].getElementsByTagName("ARTIST");
      {
        try
          {
          txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
          }
        catch (er)
          {
          txt=txt + "<td> </td>";
          }
        }
      txt=txt + "</tr>";
      }
    txt=txt + "</table>";
    document.getElementById('txtCDInfo').innerHTML=txt;
    }
  }
xmlhttp.open("GET",url,true);
xmlhttp.send();
}