AJAX——JavaScript前后台交互技术

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 执行正确的动作（比如更新页面）

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 对象方法

XMLHttpRequest对象属性

XMLHttpRequest 对象发送请求
向服务器发送请求

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

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");

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 对象的状态。

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

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>")
%>