65.9K
CodeProject 正在变化。 阅读更多。
Home

在您的应用程序中实现AJAX。它有多简单？

Sabah u Din Irfan
starIconstarIcon
emptyStarIcon
starIcon
emptyStarIconemptyStarIcon

2.48/5 (9投票s)

2006年12月12日

GPL3

5分钟阅读

viewsIcon

84588

downloadIcon

889

本文将解释在您的Web应用程序中实现AJAX的基础知识。

Sample Image - SimpleAJAX.jpg

引言

我曾经在做一个使用JSP和Java的Web项目时，需要实现AJAX。当时，我刚刚听说AJAX技术。一如既往，时间非常紧迫，所以我搜索了一些关于AJAX的PDF书籍。我打开了这些书，这让我更加担心，因为它们太长了，我想在这么短的时间内可能无法读完一些基本章节。总之，在粗略浏览了大量材料后，我成功实现了AJAX。

我认为本文对AJAX的初学者非常有帮助。我希望读完本文后，您也能在您的应用程序中实现AJAX。

AJAX 是 Asynchronous (异步) JavaScript (JavaScript) And (和) XML (XML) 的缩写。

AJAX不是任何一种新的编程语言，而只是一种创建更好、更快、更具交互性的Web应用程序的新技术。AJAX使用JavaScript在Web浏览器和Web服务器之间发送和接收数据。

AJAX技术通过在后台与Web服务器交换数据，而不是在用户进行更改时重新加载整个Web页面，从而使Web页面更具响应性。AJAX实现的最佳示例是Yahoo邮件。另一个AJAX实现示例是根据在TextBox中输入的邮政编码填充城市和州，或者进行部分页面更新。

它使用客户端浏览器和Web服务器之间的异步数据传输（HTTP请求），允许Web页面请求服务器上的少量信息，而不是重新加载整个页面。

AJAX的基础

AJAX是一项非常简单的技术，基于以下开放标准

  • JavaScript
  • XML
  • HTML
  • CSS

AJAX使用的开放标准得到了所有主流浏览器的支持。AJAX应用程序是浏览器和平台独立的。您可以说它同时是跨平台和跨浏览器技术。传统的Web应用程序通常会将输入（使用HTML表单）提交给Web服务器。Web服务器处理完数据/请求后，会将一个全新的Web页面返回给用户的浏览器。

由于服务器每次用户提交输入时都会返回一个新页面，因此传统的Web应用程序通常运行缓慢，并且用户友好性较差。
使用AJAX，Web应用程序可以在不重新加载整个Web页面的情况下发送和检索数据。这是通过向服务器发送HTTP请求（在后台进行），并在服务器返回数据时使用JavaScript仅修改Web页面的一部分来实现的。
AJAX技术的核心是 `XMLHttpRequest` 对象。

要创建AJAX Web应用程序，您必须熟悉一个名为 `XMLHttpRequest` 的JavaScript对象。

XMLHttpRequest

`XMLHttpRequest` 对象是AJAX的关键。自Internet Explorer 5.5发布以来它就一直存在，但在人们开始谈论AJAX和Web 2.0（2005年）之前，它并未被充分发掘。

创建 `XMLHttpRequest` 对象非常简单，如下所示

// available in Internet Explorer 6 and later
var XMLHttp=new  ActiveXObject("Msxml2.XMLHTTP") 

// available in Internet Explorer 5.5
var XMLHttp=new  ActiveXObject("Microsoft.XMLHTTP")  

// built in JavaScript object available in almost all of the Internet Explorers.    
var XMLHttp=new  XMLHttpRequest()

XMLHttpRequest 可用方法

open() 方法

`open()` 方法设置对Web服务器的请求。

send() 方法

`send()` 方法将请求发送到服务器。（在后台。客户端浏览器不会刷新或进行任何往返。）

abort() 方法

`abort()` 方法中止当前的服务器请求。

XMLHttpRequest 的 readyState 属性

`readyState` 属性定义了 `XMLHttpRequest` 对象的当前状态。以下是 `readyState` 属性的可能值

状态 描述

readyState=0

请求未初始化。在您创建 `XMLHttpRequest` 对象之后，但在调用 `open()` 方法之前。

readyState=1

请求已设置。在您调用 `open()` 方法之后，但在调用 `send()` 之前。

readyState=2

请求已发送。在您调用 `send()` 之后。

readyState=3

请求正在进行中。在浏览器与服务器建立通信之后，但在服务器完成响应之前。

readyState=4

请求已完成。在请求完成之后，并且已从服务器完全接收到响应数据。

对于您的AJAX应用程序，您实际上只需要关心状态4，即请求完成并且可以安全地使用接收到的数据时。

掌握了 `XMLHttpRequest` 的这些基本且精确的知识后，您现在就可以实现AJAX技术了。它是不是很简单！

Using the Code

有三个代码文件。第一个包含JavaScript代码，第二个包含您的前端HTML代码，第三个包含将在客户端后台执行的服务器端代码，并通过JavaScript文件向前端HTML页面返回响应。

步骤 1 - 在您的HTML文件中放入以下代码

<html>
<head>
<script src="getEmployee.js"></script>
</head><body><form> 
Select a  Employee:
<select name="Employees" onChange="showEmployee(this.value)">
<option value="SABAH">Sabah u din
<option value="HASAN">Hasan Tanvir
<option value="MUZIO">Muzaffar Iqbal
<option value="YASIR">Yasir Siddiq
<option value="WAQAS">Waqas u Din
</select>
</form>
<div id="EmployeesDIV"><b>Employees info will be listed here.;)</b></div>
</body>
</html>

步骤 2. 使用以下代码创建一个JavaScript文件

// JavaScript Document... save this with the file name getEmployee.js
var xmlHttp 

function showEmployee(str)
  { 
  xmlHttp=CreateXmlHttpObject()
  if (xmlHttp==null)
  {
  alert ("Browser does not support HTTP Request")
  return
  } 
  var url="GetEmployeeInfo.jsp"
  url=url+"?qparam="+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("EmployeesDIV").innerHTML=xmlHttp.responseText 
  } 
  } 
function CreateXmlHttpObject()
  { 
  var objXMLHttp=null
  if (window.XMLHttpRequest)
  {
  objXMLHttp=new XMLHttpRequest()
  }
  else if (window.ActiveXObject)
  {
  objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
  }
  return objXMLHttp
  }

步骤 3. 创建一个服务器端页面（JSP/ASP/PHP/...）

由于我正在使用JSP，我将为您提供JSP代码示例。您可以根据您使用的服务器端编程语言（如PHP，ASP等）或您正在使用的任何其他语言来修改此代码。请记住在JavaScript的 `showEmployee()` 函数中包含此文件的正确名称和扩展名，您将在其中构建要后台调用的URL。

这是JSP代码。将其保存为 *GetEmployeeInfo.jsp*。

// File GetEmployeeInfo.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<%

String responseText=new String("");

String OptionValue=(String) request.getParameter("qparam");

responseText="<table width=\"200\" border=\"1\"><tr>  <td>Name</td>  
	<td>Designation</td>  <td>Age</td></tr>";

if(OptionValue==null){OptionValue="NULL";} 

if(OptionValue.equals("SABAH"))
  {
  responseText+="<tr>  <td>1610</td>    
	<td>Software Engineer </td>    
	<td>22</td>  </tr>";
  }
  else if (OptionValue.equals("HASAN"))
  {
  responseText+="<tr>  <td>1592</td>    
	<td>System Engineer </td>    <td>24</td>  </tr>";
  }
  else if (OptionValue.equals("MUZIO"))
  {
  responseText+="<tr>  <td>1598</td>    
	<td>Graphic Designer </td>    <td>25</td>  </tr>";
  }
  else if (OptionValue.equals("YASIR"))
  {
  responseText+="<tr>  <td>1626</td>    
	<td>Network Engineer </td>    <td>23</td>  </tr>";
  }
  else if ( OptionValue.equals("WAQAS"))
  {
  responseText+="<tr>  <td>1595</td>    
	<td>Recuiter </td>    <td>19</td>  </tr>";
  }
  else
  {
  responseText+="<tr>  <td>N/A</td>    <td>N/A</td>    <td>N/A</td>  </tr>";
  }   
  responseText+="</table> ";
  out.print(responseText);
%>
  </body>
</html>

在上面的服务器端代码中，您可以从数据库（MYSQL，Microsoft SQL Server 2005，Oracle，Microsoft Access，XML）获取值。只需要记住一件事，您必须生成一个有效的HTML并将其发送到该页面的 `Response` 中。

浏览器支持

AJAX应用程序只能在具有完整XML支持的Web浏览器中运行。Internet Explorer（IE）和Mozilla Firefox对XML的支持足以运行AJAX应用程序。

历史

  • 2006年12月12日：首次发布
© . All rights reserved.