<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1> AJAX HELLO<span id="myName"></span></h1>
<p>
<button id="getCSS">请求 CSS</button>
<button id="getJs">请求 Js</button>
<button id="getHTML">请求 HTML</button>
<button id="getXML">请求XML</button>
<button id="getJSON">请求JSON</button>
<button id="getPage">请求下一页</button>
</p>
<div>
{{page1}}
</div>
<script src="/main.js"></script>
</body>
</html>
let n = 1;
getPage.onclick = () => {
const request = new XMLHttpRequest();
request.open('GET', `/page${n + 1}`)
request.onreadystatechange = () => {
if (request.readyState === 4 && request.status === 200) {
const array = JSON.parse(request.response);
array.forEach(item => {
const li = document.createElement("li");
li.textContent = item.id;
xxx.appendChild(li);
});
n += 1;
}
};
response.send();
};
getJSON.onclick = () => {
const request = new XMLHttpRequest();
request.open("open", "/5.json");
request.onreadystatechange = () => {
if (request.readyState === 4 && request.status === 200) {
console.log(request.response)
const object = JSON.parse(request.response)
myName.textContent = object.name
}
};
request.send();
};
getXML.onclick = () => {
const request = new XMLHttpRequest();
request.open('GET', '/4.xml')
request.onreadystatechange = () => {
if (request.readyState === 4 && request.status === 200) {
const dom = request.responseXML;
const text = dom.getElementsByTagName('warning')[0].textContent
console.log(text.trim())
}
};
request.send()
}
getHTML.onclick = () => {
const request = new XMLHttpRequest();
request.open("GET", "/3.html")
request.onload = () => {
//创建div标签
const div = document.createElement('div')
//填写div内容
div.innerHTML = request.response
//插入到身体里
document.body.appendChild(div)
};
request.onerror = () => { };
request.send();
};
getJS.onclick = () => {
const request = new XMLHttpRequest()
request.open('GET', '/2.js');
request.onload = () => {
//创建script标签
const script = document.createElement('script')
//填写script内容
script.innerHTML = request.response
// 插到身体里面
document.body.appendChild(script)
}
request.send();
}
getCSS.onclick = () => {
const request = new XMLHttpRequest()
request.open("GET", "/style.css");
request.onreadystatechange = () => {
if (request.readyState === 4) {
console.log("下载完成")
if (request.status >= 200 && request.status < 300) {
//创建style标签
const style = document.createElement("style");
//填写style内容
style.innerHTML = request.response;
// 插到头里面
document.head.appendChild(style);
} else {
alert("加载CSS失败")
}
}
};
request.send();
};
