JavaScript中AJAX用法实例分析

AJAX（Asynchronous JavaScript And XML），即异步JavaScript与XML。JavaScript通过XMLHttpRequest对象来向服务器发异步请求，从服务器获得数据，并更新网页，而不用在页面加载时刷新整个页面。

AJAX的基本用法

创建XMLHttpRequest对象

XMLHttpRequest对象用于在后台与服务器交换数据。其属性和方法的详细介绍可以参考MDN文档 XMLHttpRequest。

创建XMLHttpRequest对象的基本代码如下：

var xmlhttp;
if (window.XMLHttpRequest) {
    //针对IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
}
else {
    //针对IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

发送请求

向服务器发送请求需要用到XMLHttpRequest对象的open()和send()方法。最基本的用法如下：

xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

其中，第一个参数是请求的方式（GET或POST），第二个参数是请求的URL，第三个参数表示请求是否异步，true表示异步，false表示同步。

接收数据

用XMLHttpRequest对象的onreadystatechange事件来异步接收服务器的响应。这个事件在接收数据时会被触发。当readyState=4以及status=200时，表示响应已经成功返回。代码如下：

xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}

其中，readyState属性存有XMLHttpRequest的状态信息，从0到4发生变化：
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪

status存有XMLHttpRequest的HTTP状态信息。

AJAX实例1：获取文本文件内容并显示

下面是一个AJAX异步获取文本文件内容并在网页显示的完整示例代码：

<!DOCTYPE html>
<html>
<head>
<title>AJAX异步获取文本文件内容示例</title>
<script>
function loadXMLDoc() {
  var xmlhttp=new XMLHttpRequest();
  xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
      document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","ajax_info.txt",true);
  xmlhttp.send();
}
</script>
</head>
<body>

<div id="myDiv"><h2>让 AJAX 异步地修改文本文件内容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改内容</button>

</body>
</html>

在上面代码中，我们定义了一个loadXMLDoc()函数，用于异步获取文本文件内容，并将获取的内容在<div id="myDiv">元素中显示出来。

AJAX实例2：向服务器提交表单数据

下面是一个AJAX异步提交表单数据到服务器的完整示例代码：

<!DOCTYPE html>
<html>
<head>
<title>AJAX异步提交表单数据示例</title>
<script>
function submitForm() {
  var xmlhttp=new XMLHttpRequest();
  xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
      document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
  var name = document.getElementById("name").value;
  var email = document.getElementById("email").value;
  var queryString = "name=" + name + "&email=" + email;
  xmlhttp.open("POST", "submit.php", true);
  xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xmlhttp.send(queryString);
}
</script>
</head>
<body>

<form>
  <label for="name">姓名:</label>
  <input type="text" id="name" name="name"><br><br>
  <label for="email">邮箱:</label>
  <input type="email" id="email" name="email"><br><br>
  <input type="button" value="提交" onclick="submitForm()">
</form>

<div id="myDiv"><h2>等待异步提交结果...</h2></div>

</body>
</html>

在上面代码中，我们定义了一个submitForm()函数，用于异步提交表单数据到服务器，并将提交结果在<div id="myDiv">元素中显示出来。其中，name、email是表单中的输入项，我们将它们的值拼接成queryString，用POST方法异步提交到服务器的submit.php页面。在AJAX请求的头部中，我们设置了HTTP请求的Content-type为application/x-www-form-urlencoded，表示将queryString数据编码成URL参数。在PHP页面中，可以通过$_POST["name"]、$_POST["email"]获取提交的数据。

通过上面的两个示例，我们可以基本掌握AJAX的应用方法。当然，AJAX的应用还有很多细节需要注意，例如AJAX请求的跨域问题、AJAX的安全性等。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：javascript中AJAX用法实例分析 - Python技术站