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技术站