学习AJAX请求(初步)24.10.21-10.23

时间:2024-10-24 14:37:28

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>