淘先锋技术网

首页 1 2 3 4 5 6 7

javascript ajax实例

在现代Web应用程序中，实时更新已经成为非常重要的功能。无需刷新整个页面即可更新部分内容，Ajax是重要的技术之一，它使得在页面上完成交互变得更加轻松。

Ajax 的核心是 XMLHttpRequest 对象，它可以在后台与服务器进行数据交换，允许使用 JavaScript 更新网页的一部分，而不是全部页面。

下面是JavaScript中Ajax的基本语法：

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
document.getElementById("demo").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET", "ajax_info.txt", true);
xmlhttp.send();

这段代码执行以下步骤：

  1. xmlhttp.onreadystatechange绑定了回调函数，每当 readyState 改变时就会被调用。当 readyState 为 4 且状态为 200 时表示响应已就绪。
  2. xmlhttp.open("GET", "ajax_info.txt", true)规定了请求的类型、URL 以及是否异步处理。对于异步请求，JavaScript 必须继续执行，而不必等待服务器响应。
  3. xmlhttp.send()发送请求。

使用Ajax以后可以避免整个页面的刷新，它可以增强用户体验并使应用程序更快和更好。例如，当用户点击“更新”按钮时，Ajax技术可以仅更新页面的一部分，而不需要刷新整个页面。也可以用 Ajax 实现自动完成文本框。

下面是一个 Ajax 实现自动完成文本框的例子：

function showHint(str) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET", "gethint.php?q=" + str, true);
xmlhttp.send();
}

gethint.php 文件包含了一些名字，当文本框内的文字与已存在的名字相同，就会选择该名字，如果没有相同的名字，则会显示“无匹配项”。

以下是gethint.php文件的代码：

在该例中，当用户输入字符时，JavaScript 函数会以该字符发送 GET 请求到 gethint.php 文件，并将 GET 请求作为参数。

gethint.php 文件将接收 GET 请求，并使用它在字符串数组中进行查找。如果有名字与它开头包含 GET 请求的字符串，则 PHP 文件将返回该名字或这些名字的列表。

Ajax 技术非常强大，它可以用于任何网络应用程序，而不仅限于数据交换。使用Ajax，改进您的网站并提供更好、更快的用户体验。