AJAX 简介学习笔记

什么是 AJAX

AJAX（Asynchronous JavaScript and XML）是一种创建快速动态网页的技术。AJAX 通过在后台与服务器进行少量数据交换，可以使网页实现异步更新，避免了完全刷新页面的问题。

AJAX 的优点

减少页面的传输量
提高页面的交互性和响应速度
增强用户体验

AJAX 的缺点

对搜索引擎的支持不好
对浏览器的支持不好
对开发人员的要求较高

AJAX 的应用

示例一：展示实时股票数据

htmlCopy Code
<html>
<head>
<script>
function showStock(str) {
  if (str.length==0) { 
    document.getElementById("txtHint").innerHTML="";
    return;
  }
  var xmlhttp=new XMLHttpRequest();
  xmlhttp.onreadystatechange=function() {
    if (this.readyState==4 && this.status==200) {
      document.getElementById("txtHint").innerHTML=this.responseText;
    }
  }
  xmlhttp.open("GET","getstock.php?q="+str,true);
  xmlhttp.send();
}
</script>
</head>
<body>

<form>
<select onchange="showStock(this.value)">
<option value="">选择一个股票：</option>
<option value="AAPL">苹果公司</option>
<option value="GOOG">谷歌公司</option>
<option value="MSFT">微软公司</option>
<option value="AMZN">亚马逊公司</option>
</select>
</form>
<br>
<div id="txtHint">股票信息将在此处显示...</div>

</body>
</html>

此示例展示了如何使用 AJAX 在不刷新整个页面的情况下实时更新股票数据。

示例二：表单验证

htmlCopy Code
<html>
<head>
<script>
function validateForm() {
  var xmlhttp=new XMLHttpRequest();
  var name=document.getElementById("name").value;
  var email=document.getElementById("email").value;
  var mobile=document.getElementById("mobile").value;
  xmlhttp.onreadystatechange=function() {
    if (this.readyState==4 && this.status==200) {
      document.getElementById("txtHint").innerHTML=this.responseText;
    }
  }
  xmlhttp.open("POST","validate.php",true);
  xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  xmlhttp.send("name="+name+"&email="+email+"&mobile="+mobile);
}
</script>
</head>
<body>

<form>
<label for="name">姓名:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">电邮:</label>
<input type="text" id="email" name="email"><br><br>
<label for="mobile">手机号码:</label>
<input type="text" id="mobile" name="mobile"><br><br>
<input type="button" value="提交" onclick="validateForm()">
</form>
<br>
<div id="txtHint">表单验证结果将在此处显示...</div>

</body>
</html>

此示例展示了如何使用 AJAX 在用户提交表单之前对其进行验证，并在不刷新整个页面的情况下显示验证结果。

总结

AJAX 能有效地提高网页的响应速度和用户体验，但仍然具有一些缺点需要开发人员注意。通过示例可以看出，AJAX 可以应用于许多领域，并且能够提供良好的效果。