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>