zoukankan      html  css  js  c++  java

  • AJAX

    AJAX = Asynchronous JavaScript And XML（异步 JavaScript 及 XML）

    AJAX 使用 XML 和 HTTP 请求

    传统的 web 应用程序会把数据提交到 web 服务器（使用 HTML 表单）。在 web 服务器把数据处理完毕之后，会向用户返回一张完整的新网页。

    由于每当用户提交输入，服务器就会返回新网页，传统的 web 应用程序往往运行缓慢，且越来越不友好。

    通过 AJAX，web 应用程序无需重载网页，就可以发送并取回数据。完成这项工作，需要通过向服务器发送 HTTP 请求（在幕后），并通过当服务器返回数据时使用 JavaScript 仅仅修改网页的某部分。

    一般使用 XML 作为接收服务器数据的格式，尽管可以使用任何格式，包括纯文本

    XMLHttpRequest 对象使 AJAX 成为可能。

    XMLHttpRequest

    XMLHttpRequest 对象是 AJAX 的关键。

    该对象在 Internet Explorer 5.5 与 2000 年 7 月发布之后就已经可用了，但是在 2005 人们开始讨论 AJAX 和 Web 2.0 之前，这个对象并没有得到充分的认识。

    创建 XMLHttpRequest 对象

    不同的浏览器使用不同的方法来创建 XMLHttpRequest 对象。

    Internet Explorer 使用 ActiveXObject。

    其他浏览器使用名为 XMLHttpRequest 的 JavaScript 内建对象。

    要克服这个问题，可以使用这段简单的代码：

    var XMLHttp=null
if (window.XMLHttpRequest)
  {
  XMLHttp=new XMLHttpRequest()
  }
else if (window.ActiveXObject)
  {
  XMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
  }

    代码解释：

    1. 首先创建一个作为 XMLHttpRequest 对象使用的 XMLHttp 变量。把它的值设置为 null。
    2. 然后测试 window.XMLHttpRequest 对象是否可用。在新版本的 Firefox, Mozilla, Opera 以及 Safari 浏览器中，该对象是可用的。
    3. 如果可用，则用它创建一个新对象：XMLHttp=new XMLHttpRequest()
    4. 如果不可用，则检测 window.ActiveXObject 是否可用。在 Internet Explorer version 5.5 及更高的版本中，该对象是可用的。
    5. 如果可用，使用它来创建一个新对象：XMLHttp=new ActiveXObject()

    改进的例子

    一些程序员喜欢使用最新最快的版本的 XMLHttpRequest 对象。

    下面的例子试图加载微软最新版本的 "Msxml2.XMLHTTP"，在 Internet Explorer 6 中可用，如果无法加载，则后退到 "Microsoft.XMLHTTP"，在 Internet Explorer 5.5 及其后版本中可用。

    function GetXmlHttpObject()
{
var xmlHttp=null;

try
 {
 // Firefox, Opera 8.0+, Safari
 xmlHttp=new XMLHttpRequest();
 }
catch (e)
 {
 // Internet Explorer
 try
  {
  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
 catch (e)
  {
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
 }
return xmlHttp;
}

    代码解释：

    1. 首先创建用作 XMLHttpRequest 对象的 XMLHttp 变量。把它的值设置为 null。
    2. 按照 web 标准创建对象 (Mozilla, Opera 以及 Safari)：XMLHttp=new XMLHttpRequest()
    3. 按照微软的方式创建对象，在 Internet Explorer 6 及更高的版本可用：XMLHttp=new ActiveXObject("Msxml2.XMLHTTP")
    4. 如果捕获错误，则尝试更老的方法 (Internet Explorer 5.5) ：XMLHttp=new ActiveXObject("Microsoft.XMLHTTP")

    AJAX 请求

    在下面的 AJAX 例子中，我们将演示当用户向 web 表单中输入数据时，网页如何与在线的 web 服务器进行通信。

    在下面的文本框中输入名字：

    Suggestions：

    这个例子包括三张页面：

    • 一个简单的 HTML 表单
    • 一段 JavaScript
    • 一张 PHP 页面

    HTML 表单

    这是 HTML 表单。它包含一个简单的 HTML 表单和指向 JavaScript 的链接：

    <html>
<head>
<script src="clienthint.js"></script> 
</head>

<body>

<form> 
First Name:
<input type="text" id="txt1"
onkeyup="showHint(this.value)">
</form>

<p>Suggestions: <span id="txtHint"></span></p>

</body>
</html>

    例子解释 - HTML 表单

    正如您看到的，上面的 HTML 页面含有一个简单的 HTML 表单，其中带有一个名为 "txt1" 的输入字段。

    该表单是这样工作的：

    1. 当用户在输入域中按下并松开按键时，会触发一个事件
    2. 当该事件被触发时，执行名为 showHint() 的函数
    3. 表单的下面是一个名为 "txtHint" 的 <span>。它用作 showHint() 函数所返回数据的占位符。

    JavaScript

    JavaScript 代码存储在 "clienthint.js" 文件中，它被链接到 HTML 文档：

    var xmlHttp

function showHint(str)
{
if (str.length==0)
  { 
  document.getElementById("txtHint").innerHTML=""
  return
  }
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
  {
  alert ("Browser does not support HTTP Request")
  return
  } 
var url="gethint.php"
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
} 

function stateChanged() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 
 document.getElementById("txtHint").innerHTML=xmlHttp.responseText 
 } 
}

function GetXmlHttpObject()
{
var xmlHttp=null;
try
 {
 // Firefox, Opera 8.0+, Safari
 xmlHttp=new XMLHttpRequest();
 }
catch (e)
 {
 // Internet Explorer
 try
  {
  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
 catch (e)
  {
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
 }
return xmlHttp;
}

    例子解释：

    showHint() 函数

    每当在输入域中输入一个字符，该函数就会被执行一次。

    如果文本框中有内容 (str.length > 0)，该函数这样执行：

    1. 定义要发送到服务器的 URL（文件名）
    2. 把带有输入域内容的参数 (q) 添加到这个 URL
    3. 添加一个随机数，以防服务器使用缓存文件
    4. 调用 GetXmlHttpObject 函数来创建 XMLHTTP 对象，并在事件被触发时告知该对象执行名为 stateChanged 的函数
    5. 用给定的 URL 来打开打开这个 XMLHTTP 对象
    6. 向服务器发送 HTTP 请求

    如果输入域为空，则函数简单地清空 txtHint 占位符的内容。

    stateChanged() 函数

    每当 XMLHTTP 对象的状态发生改变，则执行该函数。

    在状态变成 4 （或 "complete"）时，用响应文本填充 txtHint 占位符 txtHint 的内容。

    GetXmlHttpObject() 函数

    AJAX 应用程序只能运行在完整支持 XML 的 web 浏览器中。

    上面的代码调用了名为 GetXmlHttpObject() 的函数。

    该函数的作用是解决为不同浏览器创建不同 XMLHTTP 对象的问题。

    这一点在上一节中已经解释过了。

    PHP 页面

    被 JavaScript 代码调用的服务器页面是一个名为 "gethint.php" 的简单服务器页面。

    "gethint.php" 中的代码会检查名字数组，然后向客户端返回对应的名字：

    <?php
// Fill up array with names
$a[]="Anna";
$a[]="Brittany";
$a[]="Cinderella";
$a[]="Diana";
$a[]="Eva";
$a[]="Fiona";
$a[]="Gunda";
$a[]="Hege";
$a[]="Inga";
$a[]="Johanna";
$a[]="Kitty";
$a[]="Linda";
$a[]="Nina";
$a[]="Ophelia";
$a[]="Petunia";
$a[]="Amanda";
$a[]="Raquel";
$a[]="Cindy";
$a[]="Doris";
$a[]="Eve";
$a[]="Evita";
$a[]="Sunniva";
$a[]="Tove";
$a[]="Unni";
$a[]="Violet";
$a[]="Liza";
$a[]="Elizabeth";
$a[]="Ellen";
$a[]="Wenche";
$a[]="Vicky";

//get the q parameter from URL
$q=$_GET["q"];

//lookup all hints from array if length of q>0
if (strlen($q) > 0)
{
$hint="";
for($i=0; $i<count($a); $i++)
  {
  if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
    {
    if ($hint=="")
      {
      $hint=$a[$i];
      }
    else
      {
      $hint=$hint." , ".$a[$i];
      }
    }
  }
}

//Set output to "no suggestion" if no hint were found
//or to the correct values
if ($hint == "")
{
$response="no suggestion";
}
else
{
$response=$hint;
}

//output the response
echo $response;
?>

    如果存在从 JavaScript 送来的文本 (strlen($q) > 0)，则：

    1. 找到与 JavaScript 所传送的字符相匹配的名字
    2. 如果找到多个名字，把所有名字包含在 response 字符串中
    3. 如果没有找到匹配的名字，把 response 设置为 "no suggestion"
    4. 如果找到一个或多个名字，把 response 设置为这些名字
    5. 把 response 发送到 "txtHint" 占位符

    AJAX 可与 XML 文件进行交互式通信。

    AJAX XML 实例

    在下面的 AJAX 实例中，我们将演示网页如何使用 AJAX 技术从 XML 文件中读取信息。

    在下面的下列列表中选择一个 CD

    TITLE: Empire Burlesque
    ARTIST: Bob Dylan
    COUNTRY: USA
    COMPANY: Columbia
    PRICE: 10.90
    YEAR: 1985

    本例包括三张页面：

    • 一个简单 HTML 表单
    • 一个 XML 文件
    • 一个 JavaScript 文件
    • 一张 PHP 页面

    HTML 表单

    上面的例子包含了一张简单的 HTML 表单，以及指向 JavaScript 的链接：

    <html>
<head>
<script src="selectcd.js"></script>
</head>

<body>

<form> 
Select a CD:
<select name="cds" onchange="showCD(this.value)">
<option value="Bob Dylan">Bob Dylan</option>
<option value="Bee Gees">Bee Gees</option>
<option value="Cat Stevens">Cat Stevens</option>
</select>
</form>

<p>
<div id="txtHint"><b>CD info will be listed here.</b></div>
</p>

</body>
</html>

    例子解释：

    正如您看到的，它仅仅是一张简单的 HTML 表单，其中带有名为 "cds" 的下拉列表。

    表单下面的段落包含了一个名为 "txtHint" 的 div。这个 div 用作从 web 服务器检索到的数据的占位符。

    当用户选择数据时，会执行名为 "showCD" 的函数。这个函数的执行是由 "onchange" 事件触发的。

    换句话说，每当用户改变了下拉列表中的值，就会调用 showCD 函数。

    XML 文件

    XML 文件是 "cd_catalog.xml"。该文件中包含了有关 CD 收藏的数据。

    JavaScript

    这是存储在 "selectcd.js" 文件中的 JavaScript 代码：

    var xmlHttp

function showCD(str)
{ 
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
 {
 alert ("Browser does not support HTTP Request")
 return
 } 
var url="getcd.php"
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}

function stateChanged() 
{ 
 if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 
 document.getElementById("txtHint").innerHTML=xmlHttp.responseText 
 } 
}

function GetXmlHttpObject()
{
var xmlHttp=null;

try
 {
 // Firefox, Opera 8.0+, Safari
 xmlHttp=new XMLHttpRequest();
 }
catch (e)
 {
 // Internet Explorer
 try
  {
  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
 catch (e)
  {
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
 }
return xmlHttp;
}

    例子解释：

    stateChanged() 和 GetXmlHttpObject 函数与上一节中的相同，您可以参阅上一页中的相关解释。

    showCD() 函数

    假如选择了下拉列表中的某个项目，则函数执行：

    1. 调用 GetXmlHttpObject 函数来创建 XMLHTTP 对象
    2. 定义发送到服务器的 URL（文件名）
    3. 向 URL 添加带有下拉列表内容的参数 (q)
    4. 添加一个随机数，以防服务器使用缓存的文件
    5. 当触发事件时调用 stateChanged
    6. 通过给定的 URL 打开 XMLHTTP 对象
    7. 向服务器发送 HTTP 请求

    PHP 页面

    这个被 JavaScript 调用的服务器页面，是一个名为 "getcd.php" 的简单 PHP 文件。

    这张页面是用 PHP 编写的，使用 XML DOM 来加载 XML 文档 "cd_catalog.xml"。

    代码运行针对 XML 文件的查询，并以 HTML 返回结果：

    <?php
$q=$_GET["q"];

$xmlDoc = new DOMDocument();
$xmlDoc->load("cd_catalog.xml");

$x=$xmlDoc->getElementsByTagName('ARTIST');

for ($i=0; $i<=$x->length-1; $i++)
{
//Process only element nodes
if ($x->item($i)->nodeType==1)
  {
  if ($x->item($i)->childNodes->item(0)->nodeValue == $q)
    { 
    $y=($x->item($i)->parentNode);
    }
  }
}

$cd=($y->childNodes);

for ($i=0;$i<$cd->length;$i++)
{ 
//Process only element nodes
if ($cd->item($i)->nodeType==1)
  { 
  echo($cd->item($i)->nodeName);
  echo(": ");
  echo($cd->item($i)->childNodes->item(0)->nodeValue);
  echo("<br />");
  } 
}
?>

    例子解释

    当请求从 JavaScript 发送到 PHP 页面时，发生：

    1. PHP 创建 "cd_catalog.xml" 文件的 XML DOM 对象
    2. 循环所有 "artist" 元素 (nodetypes = 1)，查找与 JavaScript 所传数据向匹配的名字
    3. 找到 CD 包含的正确 artist
    4. 输出 album 的信息，并发送到 "txtHint" 占位符
  • 相关阅读:
    "bs".endsWith()的使用注意，别用错了
    国外测试专家BLOG地址
    手机测试地址
    校验日期格式{YYYYMM_DD的java代码
    汉字的字节计算情况不同
    AssertThat汇集
    maven常见仓库
    取消冒泡事件
    好看的绿色阴影按钮
    IComparer 继承接口排序 实例 可选择排序
  • 原文地址：https://www.cnblogs.com/ouyangping/p/6347734.html
Copyright © 2011-2022 走看看