关于ajax的使用方法和数据处理，我来为你提供详细的攻略。
AJAX的使用方法
什么是AJAX
AJAX（Asynchronous JavaScript and XML）是一种用于创建快速动态网页的技术，使用AJAX可以实现无需重新加载整个页面就可以更新页面的局部内容，增强了用户交互体验。
AJAX的基本组成部分
- XMLHttpRequest 对象：用于向服务器发送请求和获取服务器的响应。
- HTML DOM：以 HTML DOM 作为树结构对 HTML 文档进行操作。
- JavaScript：绑定在 HTML 事件与 DOM 事件中，实现异步刷新。
AJAX的基本使用方法
- 创建 XMLHttpRequest 对象
var xhttp = new XMLHttpRequest();
- 发送请求：调用 xhttp.open() 方法与 xhttp.send() 方法发送 AJAX 请求
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
- 检测状态改变：调用 xhttp.readyState 和 xhttp.status 属性来检测请求状态和服务器响应状态
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
AJAX的完整示例
<!DOCTYPE html>
<html>
<head>
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}
</script>
</head>
<body>
<div id="demo">
<h2>使用 AJAX 修改文本内容</h2>
<button type="button" onclick="loadDoc()">修改内容</button>
</div>
</body>
</html>
AJAX的数据处理
AJAX的数据类型
- 文本（text）
- XML
- JSON
- HTML
AJAX获取text类型数据
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
AJAX获取XML类型数据
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var xmlDoc = this.responseXML;
document.getElementById("demo").innerHTML = xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
}
};
xhttp.open("GET", "cd_catalog.xml", true);
xhttp.send();
AJAX获取JSON类型数据
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var myObj = JSON.parse(this.responseText);
document.getElementById("demo").innerHTML = myObj.name;
}
};
xhttp.open("GET", "json_demo.txt", true);
xhttp.send();
AJAX获取HTML类型数据
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("GET", "html_demo.html", true);
xhttp.send();
以上就是关于AJAX的基本使用方法和数据处理的攻略以及示例，希望可以帮助到你。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：关于ajax的使用方法_例题、ajax的数据处理 - Python技术站
微信扫一扫 
支付宝扫一扫 