AJAX异步的 JavaScript

2023-08-05 22:48:04

什么是AJAX：

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。

Google Suggest

在 2005 年，Google 通过其 Google Suggest 使 AJAX 变得流行起来。

Google Suggest 使用 AJAX 创造出动态性极强的 web 界面：当您在谷歌的搜索框输入关键字时，JavaScript 会把这些字符发送到服务器，然后服务器会返回一个搜索建议的列表。

创建 XMLHttpRequest 对象

所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。

创建 XMLHttpRequest 对象的语法：

variable=new XMLHttpRequest();

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：

variable=new ActiveXObject("Microsoft.XMLHTTP");

为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：

var xmlhttp;

if (window.XMLHttpRequest)

  {// code for IE7+, Firefox, Chrome, Opera, Safari

  xmlhttp=new XMLHttpRequest();

  }

else

  {// code for IE6, IE5

  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

  }

AJAX - 向服务器发送请求

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

向服务器发送请求

如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：

xmlhttp.open("GET","test1.txt",true);

xmlhttp.send();
方法 描述
open(method,url,async)

规定请求的类型、URL 以及是否异步处理请求。

  • method：请求的类型；GET 或 POST
  • url：文件在服务器上的位置
  • async：true（异步）或 false（同步）
send(string)

将请求发送到服务器。

  • string：仅用于 POST 请求

GET 还是 POST？

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。

然而，在以下情况中，请使用 POST 请求：

  • 无法使用缓存文件（更新服务器上的文件或数据库）
  • 向服务器发送大量数据（POST 没有数据量限制）
  • 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

GET 请求

一个简单的 GET 请求：

为了避免这种情况，请向 URL 添加一个唯一的 ID：

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

xmlhttp.send();

如果您希望通过 GET 方法发送信息，请向 URL 添加信息：

xmlhttp.open("GET","demo_get2.asp?fname=Bill&lname=Gates",true);

xmlhttp.send();

POST 请求

一个简单 POST 请求：

xmlhttp.open("POST","demo_post.asp",true);

xmlhttp.send();

如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：

xmlhttp.open("POST","ajax_test.asp",true);

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

xmlhttp.send("fname=Bill&lname=Gates");





方法
描述




setRequestHeader(header,value)


向请求添加 HTTP 头。


    

  • 
header: 规定头的名称
    • 

  • 
value: 规定头的值
    • 








异步 - True 或 False？


AJAX 指的是异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。


XMLHttpRequest 对象如果要用于 AJAX 的话，其 open() 方法的 async 参数必须设置为 true：


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


对于 web 开发人员来说，发送异步请求是一个巨大的进步。很多在服务器执行的任务都相当费时。AJAX 出现之前，这可能会引起应用程序挂起或停止。


通过 AJAX，JavaScript 无需等待服务器的响应，而是：


    

  • 在等待服务器响应时执行其他脚本
    • 

  • 当响应就绪后对响应进行处理
    • 





Async = true




当使用 async=true 时，请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数：

xmlhttp.onreadystatechange=function()

  {

  if (xmlhttp.readyState==4 && xmlhttp.status==200)

    {

    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

    }

  }

xmlhttp.open("GET","test1.txt",true);

xmlhttp.send();




服务器响应


如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。





属性
描述




responseText
获得字符串形式的响应数据。




responseXML
获得 XML 形式的响应数据。







responseText 属性


如果来自服务器的响应并非 XML，请使用 responseText 属性。


responseText 属性返回字符串形式的响应，因此您可以这样使用：


document.getElementById("myDiv").innerHTML=xmlhttp.responseText;






responseXML 属性


如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，请使用 responseXML 属性：


请求 books.xml 文件，并解析响应：


xmlDoc=xmlhttp.responseXML;

txt="";

x=xmlDoc.getElementsByTagName("ARTIST");

for (i=0;i<x.length;i++)

  {

  txt=txt + x[i].childNodes[0].nodeValue + "<br />";

  }

document.getElementById("myDiv").innerHTML=txt;








AJAX - onreadystatechange 事件




onreadystatechange 事件


当请求被发送到服务器时，我们需要执行一些基于响应的任务。


每当 readyState 改变时，就会触发 onreadystatechange 事件。


readyState 属性存有 XMLHttpRequest 的状态信息。


下面是 XMLHttpRequest 对象的三个重要的属性：





属性
描述




onreadystatechange
存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。




readyState


存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。


    

  • 0: 请求未初始化
    • 

  • 1: 服务器连接已建立
    • 

  • 2: 请求已接收
    • 

  • 3: 请求处理中
    • 

  • 4: 请求已完成，且响应已就绪
    • 







status


200: "OK"


404: 未找到页面







在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。


当 readyState 等于 4 且状态为 200 时，表示响应已就绪：


xmlhttp.onreadystatechange=function()

  {

  if (xmlhttp.readyState==4 && xmlhttp.status==200)

    {

    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

    }

  }


注释：onreadystatechange 事件被触发 5 次（0 - 4），对应着 readyState 的每个变化。






使用 Callback 函数


callback 函数是一种以参数形式传递给另一个函数的函数。


如果您的网站上存在多个 AJAX 任务，那么您应该为创建 XMLHttpRequest 对象编写一个标准的函数，并为每个 AJAX 任务调用该函数。


该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务（每次调用可能不尽相同）：




function myFunction()

{

loadXMLDoc("ajax_info.txt",function()

  {

  if (xmlhttp.readyState==4 && xmlhttp.status==200)

    {

    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

    }

  });

}




AJAX ASP/PHP 实例






<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script>

function showHint(str)

{

  var xmlhttp;

  if (str.length==0)

  {

    document.getElementById("txtHint").innerHTML="";

    return;

  }

  if (window.XMLHttpRequest)

  {

    // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码

    xmlhttp=new XMLHttpRequest();

  }

  else

  {

    // IE6, IE5 浏览器执行代码

    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

  }

  xmlhttp.onreadystatechange=function()

  {

    if (xmlhttp.readyState==4 && xmlhttp.status==200)

    {

      document.getElementById("txtHint").innerHTML=xmlhttp.responseText;

    }

  }

  xmlhttp.open("GET","/try/ajax/gethint.php?q="+str,true);

  xmlhttp.send();

}

</script>

</head>

<body>

<h3>在输入框中尝试输入字母 a:</h3>

<form action="">

输入姓名: <input type="text" id="txt1" onkeyup="showHint(this.value)" />

</form>

<p>提示信息: <span id="txtHint"></span></p> 

</body>

</html>




在输入框中尝试输入字母 a:


输入姓名:


提示信息:


AJAX 服务器页面 - ASP 和 PHP


由上面的 JavaScript 调用的服务器页面是 ASP 文件，名为 "gethint.asp"。


下面，我们创建了两个版本的服务器文件，一个用 ASP 编写，另一个用 PHP 编写。


ASP 文件


"gethint.asp" 中的源代码会检查一个名字数组，然后向浏览器返回相应的名字：




<%

response.expires=-1

dim a(30)

'Fill up array with names

a(1)="Anna"

a(2)="Brittany"

a(3)="Cinderella"

a(4)="Diana"

a(5)="Eva"

a(6)="Fiona"

a(7)="Gunda"

a(8)="Hege"

a(9)="Inga"

a(10)="Johanna"

a(11)="Kitty"

a(12)="Linda"

a(13)="Nina"

a(14)="Ophelia"

a(15)="Petunia"

a(16)="Amanda"

a(17)="Raquel"

a(18)="Cindy"

a(19)="Doris"

a(20)="Eve"

a(21)="Evita"

a(22)="Sunniva"

a(23)="Tove"

a(24)="Unni"

a(25)="Violet"

a(26)="Liza"

a(27)="Elizabeth"

a(28)="Ellen"

a(29)="Wenche"

a(30)="Vicky"

'get the q parameter from URL

q=ucase(request.querystring("q"))

'lookup all hints from array if length of 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

'Output "no suggestion" if no hint were found

'or output the correct values

if hint="" then

  response.write("no suggestion")

else

  response.write(hint)

end if

%>








PHP 文件


下面的代码用 PHP 编写，与上面的 ASP 代码作用是一样的。




<?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;

?>






上一篇：[转]一些NSArray,NSDictionary,NSSet相关的算法知识

下一篇：学DSP(一):开始