AJAX——JavaScript前后台交互技术

(25) 2024-05-05 15:01:01

AJAX简介

什么是AJAX?

  1. AJAX = Asynchronous JavaScript And XML.

  2. AJAX并非编程语言,是一种实现前后端数据交换的技术

  3. AJAX 仅仅组合了:

     - 浏览器内建的 XMLHttpRequest 对象(从 web 服务器请求数据)
     - JavaScript 和 HTML DOM(显示或使用数据)
    

AJAX工作流程

  1. 网页中发生一个事件(页面加载、按钮点击)
  2. 由 JavaScript 创建 XMLHttpRequest 对象
  3. XMLHttpRequest 对象向 web 服务器发送请求
  4. 服务器处理该请求
  5. 服务器将响应发送回网页
  6. 由 JavaScript读取响应
  7. 由 JavaScript 执行正确的动作(比如更新页面)

AJAX——JavaScript前后台交互技术 (https://mushiming.com/)  第1张

XMLHttpRequest对象

AJAX的核心是XMLHttpRequest对象。

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

XMLHttpRequest对象创建

所有现代浏览器(Chrom、IE7+、Firefox、Safari 以及 Opera)都有内建的 XMLHttpRequest 对象。

创建 XMLHttpRequest 的语法是:variable = new XMLHttpRequest();

为了应对所有浏览器,包括 IE5 和 IE6,请检查浏览器是否支持 XMLHttpRequest 对象。如果支持,创建 XMLHttpRequest 对象,如果不支持,则创建 ActiveX 对象:

var xhttp;
if (window.XMLHttpRequest) { 
   
    xhttp = new XMLHttpRequest();
    } else { 
   
    // code for IE6, IE5
     xhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
}

XMLHttpRequestduixang 对象方法
AJAX——JavaScript前后台交互技术 (https://mushiming.com/)  第2张

XMLHttpRequest对象属性

AJAX——JavaScript前后台交互技术 (https://mushiming.com/)  第3张
XMLHttpRequest 对象发送请求
向服务器发送请求

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

AJAX——JavaScript前后台交互技术 (https://mushiming.com/)  第4张
GET 还是 POST?

GET 比 POST 更简单更快,可用于大多数情况下。

不过,请在以下情况始终使用 POST:

  1. 缓存文件不是选项(更新服务器上的文件或数据库)
  2. 向服务器发送大量数据(POST 无大小限制)
  3. 发送用户输入(可包含未知字符),POST比 GET 更强大更安全

GET请求

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

POST请求

如需像 HTML 表单那样 POST 数据,请通过 setRequestHeader() 添加一个 HTTP 头部。请在 send() 方法中规定您需要发送的数据:

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

AJAX——JavaScript前后台交互技术 (https://mushiming.com/)  第5张
url - 服务器上的文件
open() 方法的 url 参数,是服务器上文件的地址:

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

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

异步 - ture 还是 false?

如需异步发送请求,open() 方法的 async 参数必须设置为 true:

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

发送异步请求对 web 开发人员来说是一个巨大的进步。服务器上执行的许多任务都非常耗时。在 AJAX 之前,此操作可能会导致应用程序挂起或停止。

通过异步发送,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();

同步请求

如需执行同步的请求,请把 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;

服务器响应

onreadystatechange 属性

readyState 属性存留 XMLHttpRequest 的状态。

onreadystatechange 属性定义当 readyState 发生变化时执行的函数。

status 属性和 statusText 属性存有 XMLHttpRequest 对象的状态。

AJAX——JavaScript前后台交互技术 (https://mushiming.com/)  第6张
每当 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 任务,那么您应该创建一个执行 XMLHttpRequest 对象的函数,以及一个供每个 AJAX 任务的回调函数。

该函数应当包含 URL 以及当响应就绪时调用的函数。

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) { 
   
  // 行动在这里
 } 

AJAX——JavaScript前后台交互技术 (https://mushiming.com/)  第7张
responseText 属性

responseText 属性以 JavaScript 字符串的形式返回服务器响应,因此您可以这样使用它:

document.getElementById("demo").innerHTML = xhttp.responseText;

responseXML 属性

XML HttpRequest 对象有一个內建的 XML 解析器。

ResponseXML 属性以 XML DOM 对象返回服务器响应。

使用此属性,您可以把响应解析为 XML DOM 对象:

xmlDoc = xhttp.responseXML;
txt = "";
x = xmlDoc.getElementsByTagName("ARTIST");
for (i = 0; i < x.length; i++) { 
   
  txt += x[i].childNodes[0].nodeValue + "<br>";
  }
document.getElementById("demo").innerHTML = txt;
xhttp.open("GET",  "music_list.xml", true);
xhttp.send();

getAllResponseHeaders() 方法

getAllResponseHeaders() 方法返回所有来自服务器响应的头部信息。

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() { 
   
  if (this.readyState == 4 && this.status == 200) { 
   
    document.getElementById("demo").innerHTML = this.getAllResponseHeaders();
  }
};

getResponseHeader() 方法

getResponseHeader() 方法返回来自服务器响应的特定头部信息。

```javascript
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实例

例子解释
当用户点击“获取 CD 信息”按钮时,执行 loadDoc() 函数。

loadDoc() 函数创建 XMLHttpRequest 对象,添加当服务器响应就绪时执行的函数,并向服务器发送请求。

当服务器响应就绪后,构建 HTML 表格,从 XML 文件提取节点(因素),最后使用由 XML 数据填充的 HTML 表格对元素“demo”进行更新:

function loadDoc() { 
   
  var xhttp = new XMLHttpRequest();
   xhttp.onreadystatechange = function() { 
   
    if (this.readyState  == 4 && this.status == 200) { 
   
    myFunction(this);
     }
  };
  xhttp.open("GET", "music_list.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("TRACK");
  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;
} 

AJAX PHP实例

下面的例子演示:当用户在输入字段中键入字符时,网页如何与 web 服务器进行通信:

在上面的例子中,当用户在输入字段中键入字符时,会执行名为 “showHint()” 的函数。

此函数被 onkeyup 事件触发。

<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=" + class="marked">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)
请注意添加到 gethint.php 的 q 参数
str 变量保存了输入字段的内容

PHP 文件 - "gethint.php"
这个 PHP 文件检查姓名数组,然后向浏览器返回对应的姓名:

<?php
// 姓名数组
 $a[] = "Ava";
 $a[] = "Brielle";
 $a[] = "Caroline";
 $a[] = "Diana";
 $a[] = "Elise";
 $a[] = "Fiona";
 $a[] = "Grace";
 $a[] = "Hannah";
 $a[] = "Ileana";
 $a[] = "Jane";
 $a[] = "Kathryn";
 $a[] = "Laura";
 $a[] = "Millie";
 $a[] = "Nancy";
 $a[] = "Opal";
 $a[] = "Petty";
 $a[] = "Queenie";
 $a[] = "Rose";
 $a[] = "Shirley";
 $a[] = "Tiffany";
 $a[] = "Ursula";
 $a[] = "Victoria";
 $a[] = "Wendy";
 $a[] = "Xenia";
 $a[] = "Yvette";
 $a[] = "Zoe";
 $a[] = "Angell";
 $a[] = "Adele";
 $a[] = "Beatty";
 $a[] = "Carlton";
 $a[] = "Elisabeth";
 $a[] = "Violet";

// 从 URL 获取 q 参数
$q = $_REQUEST["q"];

$hint = "";

// 查看数组中所有 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",如果未找到 hint 或输出正确的值
  echo $hint === "" ? "no suggestion" : $hint;
?>

AJAX ASP 实例

下面的例子演示:当用户在输入字段中键入字符时,网页如何与 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=" + class="marked">str, true); xmlhttp.send(); } } </script>
</head>
<body>

<p><b>请在下面的输入字段中键入字母 A-Z:</b></p>
<form> 
姓名:<input type="text" onkeyup="showHint(this.value)">
</form>
<p>搜索建议:<span id="txtHint"></span></p>
</body>

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

不过,如果输入字段不为空,则进行如下:

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

<%
 response.expires=-1
 dim a(32)
 '用姓名填充数组
 a(1)="Ava"
 a(2)="Brielle"
 a(3)="Caroline"
 a(4)="Diana"
 a(5)="Elise"
 a(6)="Fiona"
 a(7)="Grace"
 a(8)="Hannah"
 a(9)="Ileana"
 a(10)="Jane"
 a(11)="Kathryn"
 a(12)="Laura"
 a(13)="Millie"
 a(14)="Nancy"
 a(15)="Opal"
 a(16)="Petty"
 a(17)="Queenie"
 a(18)="Rose"
 a(19)="Shirley"
 a(20)="Tiffany"
 a(21)="Ursula"
 a(22)="Victoria"
 a(23)="Wendy"
 a(24)="Xenia"
 a(25)="Yvette"
 a(26)="Zoe"
 a(27)="Angell"
 a(28)="Adele"
 a(29)="Beatty"
 a(30)="Carlton"
 a(31)="Elisabeth"
 a(32)="Violet"

 '从 URL 获取 q 参数
 q=ucase(request.querystring("q"))

 '查看数组中所有 hint,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

 '如果未找到 hint,输出 "no suggestion",或输出正确的值
 if hint="" then
   response.write("no suggestion")
 else
   response.write(hint)
 end if
%>

AJAX Database 实例
下面的例子演示:网页如何通过 AJAX 从数据库中读取信息:

例子解释 - 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.asp?q=" + str, true);
  xhttp.send();
} 

showCustomer() 函数进行如下:

检查是否选取客户
创建 XMLHttpRequest 对象
创建当服务器响应就绪时执行的函数
向服务器上的文件发送请求
请注意,参数 q 被添加到 URL(带有下拉列表的内容)

AJAX 服务器页面

被以上 JavaScript 调用的服务器页面是名为 “getcustomer.asp” 的 ASP 文件。

使用 PHP 或其他服务器语言能够轻松重写该服务器文件。

请参见对应的 PHP 实例。

“getcustomer.asp” 中的源代码中运行面向数据库的查询,并在 HTML 表格中返回结果:

<%
response.expires=-1
sql="SELECT * FROM CUSTOMERS WHERE CUSTOMERID="
sql=sql & "'" & request.querystring("q") & "'"

set conn=Server.CreateObject("ADODB.Connection")
conn.Provider="Microsoft.Jet.OLEDB.4.0"
conn.Open(Server.Mappath("customers.mdb"))
set rs=Server.CreateObject("ADODB.recordset")
rs.Open sql,conn

response.write("<table>")
do until rs.EOF
 for each x in rs.Fields
   response.write("<tr><td><b>" & x.name & "</b></td>")
   response.write("<td>" & x.value & "</td></tr>")
 next
 rs.MoveNext
loop
response.write("</table>")
%>
THE END

发表回复