AJAX 前端开发利器:实现网页动态更新的核心技术

  • AJAX 前端开发利器:实现网页动态更新的核心技术已关闭评论
  • 29 次浏览
  • A+
所属分类:Web前端
摘要

AJAX是开发者的梦想,因为你可以:HTML页面HTML页面包含一个 <div> 部分和一个 <button>


AJAX

AJAX是开发者的梦想,因为你可以:

  • 在不重新加载页面的情况下更新网页
  • 在页面加载后请求来自服务器的数据
  • 在页面加载后接收来自服务器的数据
  • 在后台向服务器发送数据

HTML页面

<!DOCTYPE html> <html> <body>  <div id="demo">   <h2>让AJAX更改这段文字</h2>   <button type="button" onclick="loadDoc()">更改内容</button> </div>  </body> </html> 

HTML页面包含一个 <div> 部分和一个 <button>

<div> 部分用于显示来自服务器的信息

<button> 调用一个函数(如果被点击)

该函数从Web服务器请求数据并显示它

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

上面示例中使用的 "ajax_info.txt" 文件是一个简单的文本文件,内容如下:

<h1>AJAX</h1> <p>AJAX不是一种编程语言。</p> <p>AJAX是一种从网页访问Web服务器的技术。</p> <p>AJAX代表异步JavaScript和XML。</p> 

什么是AJAX?

AJAX = 异步JavaScript和XML。

AJAX不是一种编程语言。

AJAX只是使用以下组合:

  • 浏览器内置的XMLHttpRequest对象(用于从Web服务器请求数据)
  • JavaScript和HTML DOM(用于显示或使用数据)

AJAX是一个具有误导性名称的技术。AJAX应用程序可能使用XML传输数据,但以纯文本或JSON文本传输数据同样常见。

AJAX允许通过在幕后与Web服务器交换数据,异步更新Web页面。这意味着可以更新Web页面的部分,而不必重新加载整个页面。

AJAX的工作原理

AJAX 前端开发利器:实现网页动态更新的核心技术

  1. 网页中发生事件(页面加载,按钮被点击)
  2. JavaScript创建XMLHttpRequest对象
  3. XMLHttpRequest对象向Web服务器发送请求
  4. 服务器处理请求
  5. 服务器将响应发送回网页
  6. JavaScript读取响应
  7. JavaScript执行适当的操作(例如页面更新)

AJAX - XMLHttpRequest对象

AJAX的核心是XMLHttpRequest对象。

XMLHttpRequest对象

所有现代浏览器都支持XMLHttpRequest对象。

XMLHttpRequest对象可用于在幕后与服务器交换数据。这意味着可以更新Web页面的部分,而无需重新加载整个页面。

创建XMLHttpRequest对象

创建XMLHttpRequest对象的语法:

variable = new XMLHttpRequest(); 

示例:

var xhttp = new XMLHttpRequest(); 

上面示例中使用的 "ajax_info.txt" 文件是一个简单的文本文件,内容如下:

<h1>AJAX</h1> <p>AJAX不是一种编程语言。</p> <p>AJAX是一种从网页访问Web服务器的技术。</p> <p>AJAX代表异步JavaScript和XML。</p> 

跨域访问

出于安全原因,现代浏览器不允许跨域访问。

这意味着网页和它尝试加载的XML文件必须位于同一服务器上。

W3Schools的示例都打开位于W3Schools域上的XML文件。

如果您想在自己的网页上使用上述示例,则加载的XML文件必须位于您自己的服务器上。

XMLHttpRequest对象方法

方法 描述
new XMLHttpRequest() 创建一个新的XMLHttpRequest对象
abort() 取消当前请求
getAllResponseHeaders() 返回标头信息
getResponseHeader() 返回特定标头信息
open(method,url,async,user,psw) 指定请求
send() 将请求发送到服务器
send(string) 将请求发送到服务器
setRequestHeader() 将标签/值对添加到要发送的标头

XMLHttpRequest对象属性

属性 描述
onreadystatechange 定义在readyState属性更改时调用的函数
readyState 保存XMLHttpRequest的状态。
responseText 以字符串形式返回响应数据
responseXML 以XML数据形式返回响应数据
status 返回请求的状态码
statusText 返回状态文本(例如 "OK" 或 "Not Found")

AJAX - 发送请求到服务器

XMLHttpRequest对象用于与服务器交换数据。

发送请求到服务器

要向服务器发送请求,我们使用XMLHttpRequest对象的open()send()方法:

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

方法描述:

  • open(method, url, async):指定请求类型
    • method: 请求类型:GET或POST
    • url: 服务器(文件)位置
    • async: true(异步)或 false(同步)
  • send():将请求发送到服务器(用于GET)
  • send(string):将请求发送到服务器(用于POST)

GET还是POST?

GET比POST更简单更快,并且在大多数情况下都可以使用。

但是,在以下情况下始终使用POST请求:

  • 无法使用缓存文件(更新服务器上的文件或数据库)。
  • 向服务器发送大量数据(POST没有大小限制)。
  • 发送用户输入(可能包含未知字符),POST比GET更健壮和安全。

GET请求

一个简单的GET请求:

示例:

xhttp.open("GET", "demo_get.asp", true); xhttp.send(); 

在上面的示例中,您可能会得到一个缓存的结果。为了避免这种情况,向URL添加一个唯一的ID:

示例:

xhttp.open("GET", "demo_get.asp?t=" + Math.random(), true); xhttp.send(); 

如果要使用GET方法发送信息,请将信息添加到URL:

示例:

xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford", true); xhttp.send(); 

POST请求

一个简单的POST请求:

示例

xhttp.open("POST", "demo_post.asp", true); xhttp.send(); 

要像HTML表单一样发送POST数据,请使用setRequestHeader()添加带有HTTP头的请求。在send()方法中指定要发送的数据:

示例

xhttp.open("POST", "demo_post2.asp", true); xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xhttp.send("fname=Henry&lname=Ford"); 

方法描述:

  • setRequestHeader(header, value):向请求添加HTTP头
    • header: 指定标头名称
    • value: 指定标头值

文件位于服务器上的URL

open()方法的url参数是指向服务器上文件的地址:

xhttp.open("GET", "ajax_test.asp", true); 

文件可以是任何类型的文件,如 .txt 和 .xml,或服务器脚本文件,如 .asp 和 .php(它们可以在发送响应之前在服务器上执行操作)。

异步 - True还是False?

服务器请求应该异步发送。

open()方法的async参数应设置为true:

xhttp.open("GET", "ajax_test.asp", true); 

通过异步发送,JavaScript无需等待服务器响应,而是可以:

  • 在等待服务器响应时执行其他脚本
  • 在响应准备好后处理响应

onreadystatechange属性

使用XMLHttpRequest对象,您可以定义在请求接收答案时要执行的函数。

该函数在XMLHttpResponse对象的onreadystatechange属性中定义:

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

上面示例中使用的 "ajax_info.txt" 文件是一个简单的文本文件,内容如下:

<h1>AJAX  </h1> <p>AJAX不是一种编程语言。</p> <p>AJAX是一种从网页访问Web服务器的技术。</p> <p>AJAX代表异步JavaScript和XML。</p> 

同步请求

要执行同步请求,将open()方法中的第三个参数更改为false:

xhttp.open("GET", "ajax_info.txt", false); 

有时候async = false用于快速测试。您还会在旧的JavaScript代码中找到同步请求。

由于代码将等待服务器完成,因此无需onreadystatechange函数:

示例

xhttp.open("GET", "ajax_info.txt", false); xhttp.send(); document.getElementById("demo").innerHTML = xhttp.responseText; 

不推荐使用同步XMLHttpRequest(async = false),因为JavaScript将停止执行,直到服务器响应准备就绪。如果服务器很忙或很慢,应用程序将挂起或停止。

同步XMLHttpRequest正在从Web标准中删除的过程中,但此过程可能需要很多年。

现代开发工具建议警告使用同步请求,可能在发生时抛出InvalidAccessError异常。

AJAX - 服务器响应

在AJAX中,通过onreadystatechange属性、readyState属性、status属性和statusText属性来管理XMLHttpRequest对象的状态和服务器响应。

  • onreadystatechange 属性

    定义在 readyState 属性更改时要调用的函数。

  • readyState 属性

    保存 XMLHttpRequest 的状态。

    • 0:请求未初始化
    • 1:服务器连接已建立
    • 2:接收请求
    • 3:处理请求
    • 4:请求完成且响应准备就绪
  • status 属性

    200:"OK"
    403:"Forbidden"
    404:"Page not found"

    获取完整列表请查看 Http Messages Reference

  • statusText 属性

    返回状态文本(例如 "OK" 或 "Not Found")

每次 readyState 更改时都会调用 onreadystatechange 函数。

readyState 为 4 且 status 为 200 时,表示响应已准备好。

示例

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

上述示例中使用的 "ajax_info.txt" 文件是一个简单的文本文件。

<h1>AJAX</h1> <p>AJAX 不是一种编程语言。</p> <p>AJAX 是一种从网页访问 Web 服务器的技术。</p> <p>AJAX 代表异步 JavaScript 和 XML。</p> 

onreadystatechange 事件被触发四次(1-4),每次 readyState 更改都会触发一次。

使用回调函数

回调函数是作为参数传递给另一个函数的函数。

示例

loadDoc("url-1", myFunction1); loadDoc("url-2", myFunction2);  function loadDoc(url, cFunction) {   var xhttp;   xhttp=new XMLHttpRequest();   xhttp.onreadystatechange = function() {     if (this.readyState == 4 && this.status == 200) {       cFunction(this);     }  };   xhttp.open("GET", url, true);   xhttp.send(); }  function myFunction1(xhttp) {   // 具体操作在这里 } function myFunction2(xhttp) {   // 具体操作在这里 } 

服务器响应属性和方法

  • responseText 以字符串形式获取响应数据
  • responseXML 以 XML 数据形式获取响应数据
  • getAllResponseHeaders() 从服务器资源返回所有标头信息
  • getResponseHeader() 从服务器响应返回特定的标头信息

示例

var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() {   if (this.readyState == 4 && this.status == 200) {     document.getElementById("demo").innerHTML = this.getAllResponseHeaders();   } };  var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() {   if (this.readyState == 4 && this.status == 200) {     document.getElementById("demo").innerHTML = this.getResponseHeader("Last-Modified");   } }; xhttp.open("GET", "ajax_info.txt", true); xhttp.send(); 

AJAX XML 示例

AJAX可用于与XML文件进行交互式通信。以下是一个展示如何使用AJAX从XML文件中获取信息的示例:

示例说明

当用户点击上面的 "获取 CD 信息" 按钮时,将执行 loadDoc() 函数。

loadDoc() 函数创建一个XMLHttpRequest对象,添加在服务器响应就绪时要执行的函数,并将请求发送到服务器。

当服务器响应就绪时,将构建一个HTML表格,从XML文件中提取节点(元素),最终使用包含XML数据的HTML表格更新 "demo" 元素:

LoadXMLDoc()

function loadDoc() {   var xhttp = new XMLHttpRequest();   xhttp.onreadystatechange = function() {     if (this.readyState == 4 && this.status == 200) {       myFunction(this);     }   };   xhttp.open("GET", "cd_catalog.xml", true);   xhttp.send(); }  function myFunction(xml) {   var i;   var xmlDoc = xml.responseXML;   var table = "<tr><th>标题</th><th>艺术家</th></tr>";   var x = xmlDoc.getElementsByTagName("CD");   for (i = 0; i < x.length; i++) {     table += "<tr><td>" +       x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +       "</td><td>" +       x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +       "</td></tr>";   }   document.getElementById("demo").innerHTML = table; } 

在上述示例中,通过点击按钮触发 loadDoc() 函数,该函数使用AJAX从名为 "cd_catalog.xml" 的XML文件中获取信息。当服务器响应就绪时,myFunction() 函数会解析XML并构建一个包含CD信息的HTML表格,最终更新具有 "demo" ID 的元素。

AJAX PHP 示例

AJAX可用于创建更交互式的应用程序。以下示例演示了如何在用户在输入字段中输入字符时,网页可以与Web服务器通信:

示例说明

在上述示例中,当用户在输入字段中键入字符时,将执行名为 "showHint()" 的函数。该函数由 onkeyup 事件触发。

以下是HTML代码:

<html> <head> <script> function showHint(str) {     if (str.length == 0) {         document.getElementById("txtHint").innerHTML = "";         return;     } else {         var xmlhttp = new XMLHttpRequest();         xmlhttp.onreadystatechange = function() {             if (this.readyState == 4 && this.status == 200) {                 document.getElementById("txtHint").innerHTML = this.responseText;             }         };         xmlhttp.open("GET", "gethint.php?q=" + str, true);         xmlhttp.send();     } } </script> </head> <body>  <p><b>在下面的输入字段中开始输入名字:</b></p> <form> 姓氏:<input type="text" onkeyup="showHint(this.value)"> </form> <p>建议:<span id="txtHint"></span></p> </body> </html> 

代码解释

首先,检查输入字段是否为空(str.length == 0)。如果是,清除 txtHint 占位符的内容并退出函数。

但是,如果输入字段不为空,则执行以下操作:

  • 创建一个 XMLHttpRequest 对象
  • 创建在服务器响应就绪时要执行的函数
  • 将请求发送到服务器上的 PHP 文件(gethint.php)
  • 注意,添加了 q 参数 gethint.php?q="+str
  • str 变量保存输入字段的内容

PHP 文件 - "gethint.php"

PHP文件检查一个包含名字的数组,并将相应的名字返回给浏览器:

<?php // 包含名字的数组 $a[] = "Anna"; $a[] = "Brittany"; // ...(省略了其他名字)  // 从 URL 获取 q 参数 $q = $_REQUEST["q"];  $hint = "";  // 如果 $q 与 "" 不同,则从数组中查找所有提示 if ($q !== "") {     $q = strtolower($q);     $len = strlen($q);     foreach ($a as $name) {         if (stristr($q, substr($name, 0, $len))) {             if ($hint === "") {                 $hint = $name;             } else {                 $hint .= ", $name";             }         }     } }  // 如果没有找到提示,则输出 "no suggestion",否则输出正确的值 echo $hint === "" ? "no suggestion" : $hint; ?> 

在上述示例中,当用户在输入字段中输入字符时,通过AJAX与服务器通信,并从PHP文件中获取相应的建议。建议将在 "txtHint" 元素中显示。

AJAX ASP 示例

AJAX可用于创建更交互式的应用程序。以下示例演示了如何在用户在输入字段中输入字符时,网页可以与Web服务器通信:

示例说明

在上述示例中,当用户在输入字段中键入字符时,将执行名为 "showHint()" 的函数。该函数由 onkeyup 事件触发。

以下是HTML代码:

<html> <head> <script> function showHint(str) {     if (str.length == 0) {         document.getElementById("txtHint").innerHTML = "";         return;     } else {         var xmlhttp = new XMLHttpRequest();         xmlhttp.onreadystatechange = function() {             if (this.readyState == 4 && this.status == 200) {                 document.getElementById("txtHint").innerHTML = this.responseText;             }         };         xmlhttp.open("GET", "gethint.asp?q=" + str, true);         xmlhttp.send();     } } </script> </head> <body>  <p><b>在下面的输入字段中开始输入名字:</b></p> <form> 姓氏:<input type="text" onkeyup="showHint(this.value)"> </form> <p>建议:<span id="txtHint"></span></p> </body> </html> 

代码解释

首先,检查输入字段是否为空(str.length == 0)。如果是,清除 txtHint 占位符的内容并退出函数。

但是,如果输入字段不为空,则执行以下操作:

  • 创建一个 XMLHttpRequest 对象
  • 创建在服务器响应就绪时要执行的函数
  • 将请求发送到服务器上的 ASP 文件(gethint.asp)
  • 注意,添加了 q 参数 gethint.asp?q="+str
  • str 变量保存输入字段的内容

ASP 文件 - "gethint.asp"

ASP文件检查一个包含名字的数组,并将相应的名字返回给浏览器:

<% response.expires=-1 dim a(30) ' 填充数组 a(1)="Anna" a(2)="Brittany" ' ...(省略了其他名字)  ' 从 URL 获取 q 参数 q=ucase(request.querystring("q"))  ' 如果 q 的长度大于 0,则查找数组中的所有提示 if len(q)>0 then   hint=""   for i=1 to 30     if q=ucase(mid(a(i),1,len(q))) then       if hint="" then         hint=a(i)       else         hint=hint & " , " & a(i)       end if     end if   next end if  ' 如果没有找到提示,则输出 "no suggestion",否则输出正确的值 if hint="" then   response.write("no suggestion") else   response.write(hint) end if %> 

在上述示例中,当用户在输入字段中输入字符时,通过AJAX与服务器通信,并从ASP文件中获取相应的建议。建议将在 "txtHint" 元素中显示。

AJAX 数据库示例

AJAX可用于与数据库进行交互式通信。以下示例演示了如何使用AJAX从数据库获取信息:

示例

选择一个客户:

<select onchange="showCustomer(this.value)">   <option value="">选择客户:</option>   <option value="ALFKI">ALFKI</option>   <option value="ANATR">ANATR</option>   <option value="ANTON">ANTON</option>   <!-- 其他选项 --> </select>  <div id="txtHint">客户信息将在此处列出...</div> 

示例说明 - showCustomer() 函数

当用户在上面的下拉列表中选择一个客户时,将执行名为 "showCustomer()" 的函数。该函数由 "onchange" 事件触发:

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

showCustomer() 函数执行以下操作:

  • 检查是否选择了客户
  • 创建一个 XMLHttpRequest 对象
  • 创建在服务器响应就绪时要执行的函数
  • 将请求发送到服务器上的文件

注意,将一个参数(q)添加到 URL(带有下拉列表的内容)

AJAX 服务器页面 - "getcustomer.php"

由上面的 JavaScript 调用的服务器上的页面是一个名为 "getcustomer.php" 的 PHP 文件。

"getcustomer.php" 中的源代码针对数据库运行一个查询,并以 HTML 表格的形式返回结果:

<?php $mysqli = new mysqli("servername", "username", "password", "dbname"); if($mysqli->connect_error) {   exit('Could not connect'); }  $sql = "SELECT customerid, companyname, contactname, address, city, postalcode, country FROM customers WHERE customerid = ?";  $stmt = $mysqli->prepare($sql); $stmt->bind_param("s", $_GET['q']); $stmt->execute(); $stmt->store_result(); $stmt->bind_result($cid, $cname, $name, $adr, $city, $pcode, $country); $stmt->fetch(); $stmt->close();  echo "<table>"; echo "<tr>"; echo "<th>CustomerID</th>"; echo "<td>" . $cid . "</td>"; echo "<th>CompanyName</th>"; echo "<td>" . $cname . "</td>"; echo "<th>ContactName</th>"; echo "<td>" . $name . "</td>"; echo "<th>Address</th>"; echo "<td>" . $adr . "</td>"; echo "<th>City</th>"; echo "<td>" . $city . "</td>"; echo "<th>PostalCode</th>"; echo "<td>" . $pcode . "</td>"; echo "<th>Country</th>"; echo "<td>" . $country . "</td>"; echo "</tr>"; echo "</table>"; ?> 

在上述示例中,当用户选择一个客户时,通过AJAX与服务器通信,并从数据库中获取相应的客户信息。客户信息将以HTML表格的形式显示在具有 "txtHint" ID 的元素中。

在HTML表格中显示XML数据

此示例循环遍历每个 <CD> 元素,并在HTML表格中显示 <ARTIST><TITLE> 元素的值:

<html> <head> <style> table, th, td {   border: 1px solid black;   border-collapse:collapse; } th, td {   padding: 5px; } </style> </head> <body>  <button type="button" onclick="loadXMLDoc()">获取我的CD收藏</button> <br><br> <table id="demo"></table>  <script> function loadXMLDoc() {   var xmlhttp = new XMLHttpRequest();   xmlhttp.onreadystatechange = function() {     if (this.readyState == 4 && this.status == 200) {       myFunction(this);     }   };   xmlhttp.open("GET", "cd_catalog.xml", true);   xmlhttp.send(); } function myFunction(xml) {   var i;   var xmlDoc = xml.responseXML;   var table="<tr><th>Artist</th><th>Title</th></tr>";   var x = xmlDoc.getElementsByTagName("CD");   for (i = 0; i <x.length; i++) {     table += "<tr><td>" +     x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +     "</td><td>" +     x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +     "</td></tr>";   }   document.getElementById("demo").innerHTML = table; } </script>  </body> </html> 

在HTML div元素中显示第一个CD

此示例使用一个函数来在具有id="showCD"的HTML元素中显示第一个CD元素:

<script> displayCD(0);  function displayCD(i) {     var xmlhttp = new XMLHttpRequest();     xmlhttp.onreadystatechange = function() {         if (this.readyState == 4 && this.status == 200) {             myFunction(this, i);         }     };     xmlhttp.open("GET", "cd_catalog.xml", true);     xmlhttp.send(); }  function myFunction(xml, i) {     var xmlDoc = xml.responseXML;     x = xmlDoc.getElementsByTagName("CD");     document.getElementById("showCD").innerHTML =     "Artist: " +     x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +     "<br>Title: " +     x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +     "<br>Year: " +     x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue; } </script> 

在CD之间导航

要在上述示例中在CD之间导航,添加next()previous()函数:

<script> var i = 0;  function next() {   // 显示下一个CD,除非你在最后一个CD上   if (i < x.length-1) {     i++;     displayCD(i);   } }  function previous() {   // 显示前一个CD,除非你在第一个CD上   if (i > 0) {     i--;     displayCD(i);   } } </script> 

点击CD时显示专辑信息

最后一个示例显示了当用户点击CD时如何显示专辑信息:

<script> function displayCD(i) {     document.getElementById("showCD").innerHTML =     "Artist: " +     x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +     "<br>Title: " +     x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +     "<br>Year: " +     x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue; } </script> 

最后

为了方便其他设备和平台的小伙伴观看往期文章:

微信