当前位置：首页 > article >正文

学习AJAX请求（初步）24.10.21-10.23

article 2024/10/24 23:57:30

1.AJAX概念

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

虽然所有的AJAX请求都是HTTP请求，但并非所有的HTTP请求都是AJAX请求。AJAX是一种利用HTTP协议实现特定功能（异步数据交换）的技术。

2.AJAX请求小案例（GET）

（1）根据浏览器类型创建XMLHttpRequest对象（需要考虑浏览器的兼容性）

（2）设置事件处理程序onreadystatechange

判断请求是否成功，若成功则执行响应要求

<script>
  function loadMessage(){
    let xmlhttp;
    if(window.XMLHttpRequest){
      xmlhttp = new XMLHttpRequest();
    }else{
      // 兼容IE6、IE5
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=()=>{
     let div=document.getElementById("loading")
      if(xmlhttp.readyState==1) {
        div.innerHTML="数据加载中...";
      }
      if(xmlhttp.readyState==4 && xmlhttp.status==200){
        div.innerHTML="加载完毕"
        const data = JSON.parse(xmlhttp.responseText);
        const ul=document.getElementById("myList");
        data.forEach(element => {
          const li=document.createElement("li");
          li.innerHTML=`name:${element.name},price:${element.price},type:${element.type}`;
          ul.appendChild(li);

        });
       
      }

    }
    xmlhttp.open("GET","https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json",true)
    xmlhttp.send();
  this.disabled=true;//点击一次后按钮被禁用


  }
  
</script>

<button type="button" onclick="loadMessage.apply(this)">获取数据</button>
<ul id="myList"></ul>

3.AJAX请求的服务器响应

XMLHttpRequest 对象有两种属性可获取服务器的响应数据，需要根据数据的格式选择：

1.responseText 属性

服务器返回的JSON格式的数据(json格式的数据更通用，不受编程语言限制），可以使用 JSON.parse() 方法来解析它。

2.responseXML 属性

返回的数据是已经解析好的 XML Document 对象，可以直接使用 DOM API 来访问和操作这个 XML 文档，例如获取元素、属性、文本内容等。

4.onreadystatechange 事件处理器

当请求被发送到服务器时，readyState会改变，进而触发 onreadystatechange 事件处理器，调用函数。

以下是XMLHttpRequest 对象的三个重要属性。

当 readyState 等于 4 且状态为 200 时，表示响应已就绪：

注意：

一旦设置了onreadystatechange 事件处理器， onreadystatechange 事件会被触发 4 次（0 - 4）, 分别是： 0-1、1-2、2-3、3-4，对应着 readyState 的每个变化。

5.用回调函数封装请求

当有多个AJAX请求时，可使用回调函数封装请求。

  let xmlhttp;
function loadXMLDoc(url,cfunc)
{
if (window.XMLHttpRequest)
  {// IE7+, Firefox, Chrome, Opera, Safari 代码
  xmlhttp=new XMLHttpRequest();
  }
else
  {// IE6, IE5 代码
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=cfunc;
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
function myFunction()
{
	loadXMLDoc("https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json",function()
	{
		if (xmlhttp.readyState==4 && xmlhttp.status==200)
		{
			document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
		}
	});
}

6.AJAX与数据库进行实时通信

AJAX 数据库 | 菜鸟教程

7.AJAX获取XML文件案例

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      table,th,td {
        border : 1px solid black;
        border-collapse: collapse;/*合并边框*/
      }
      th,td {
        padding: 5px;
      }
      </style>
</head>
<body>
  <button type="button" onclick="loadXMLDoc()">获取我收藏的 CD</button>
  <br><br>
  <table id="demo"></table>
  
  <script>
  function loadXMLDoc() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        myFunction(this);
      }
    };
    xhttp.open("GET", "https://www.runoob.com/try/demo_source/cd_catalog.xml", true);
    xhttp.send();
  }
  function myFunction(xml) {
    var i;
    var xmlDoc = xml.responseXML;
    var table="<tr><th>Artist</th><th>Title</th><th>Price</th></tr>";
    var x = xmlDoc.getElementsByTagName("CD");//获取全部标签名为CD的元素
    for (i = 0; i <x.length; i++) {
      table += "<tr><td>" +
      x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
      "</td><td>" +
      x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
       "</td><td>"+
       x[i].getElementsByTagName("PRICE")[0].childNodes[0].nodeValue +
      "</td></tr>" ;
    
    }
    document.getElementById("demo").innerHTML = table;
  }
  </script>
  


</body>