Ajax基础知识详解
什么是Ajax
Ajax全称为 Asynchronous JavaScript And XML，即异步的JavaScipt和XML。Ajax可以通过JavaScript在不刷新页面的情况下向服务器发送数据请求，并能够通过JavaScript在不刷新页面的情况下更新页面。
Ajax的优点
- 用户能够更快地获取数据并更新页面，提升用户体验度。
- 减少服务器和带宽的使用，降低服务器压力，提升网站的性能。
- 和服务器的交互不需要重新加载整个页面，从而减少了带宽的使用。
Ajax的实现
Ajax的实现可以通过XMLHttpRequest对象来实现。以下是一个基本的Ajax示例：
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhr.open("GET", "ajax_info.txt", true);
xhr.send();
上述代码会向服务器发送请求，获取文件 "ajax_info.txt" 的内容，并将内容显示在id为demo的页面元素上。
Ajax的步骤
Ajax的实现步骤如下：
- 创建XMLHttpRequest对象。
- 发送请求到服务器。
- 服务器响应请求。
- 更新页面内容。
Ajax的实例
1. 简单Ajax实例
以下是一个简单的Ajax示例，通过点击按钮来获取服务器返回的时间并在页面上显示：
<!DOCTYPE html>
<html>
<head>
<script>
function showTime() {
var xhttp;
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else {
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "time.php", true);
xhttp.send();
}
</script>
</head>
<body>
<div id="demo">
<button type="button" onclick="showTime()">显示时间</button>
</div>
</body>
</html>
以上代码中，当用户点击"显示时间"按钮后，会向服务器发送请求，并在页面上显示服务器返回的时间。
2. Ajax实现搜索
以下是一个实现搜索功能的Ajax示例，通过用户输入关键字，自动向服务器发送请求，并在搜索结果区域展示搜索结果：
<!DOCTYPE html>
<html>
<head>
<script>
function showResult(str) {
if (str.length==0) {
document.getElementById("livesearch").innerHTML="";
document.getElementById("livesearch").style.border="0px";
return;
}
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
} else {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (this.readyState==4 && this.status==200) {
document.getElementById("livesearch").innerHTML=this.responseText;
document.getElementById("livesearch").style.border="1px solid #A5ACB2";
}
}
xmlhttp.open("GET","livesearch.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<h3>搜索</h3>
<form>
<input type="text" size="30" onkeyup="showResult(this.value)">
<div id="livesearch"></div>
</form>
</body>
</html>
以上代码中，当用户在搜索框中输入关键字时，会向服务器发送请求，服务器返回相关结果，并在页面上展示搜索结果。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Ajax基础知识详解 - Python技术站
微信扫一扫 
支付宝扫一扫 