Ajax 入门 - Getting started with AJAX using PHP : Tutorial

最新推荐文章于 2021-08-06 08:55:50 发布

soleilcharles

最新推荐文章于 2021-08-06 08:55:50 发布

阅读量81

点赞数

文章标签： Ajax PHP JavaScript IE Safari ViewUI

Getting started with AJAX using PHP : Tutorial
By : Mamun Zaman

Translated by: garcon1986

AJAX stands for Asynchronous JavaScript And XML. Any server side technology that supports JavaScript also supports AJAX. AJAX is a browser technology, and is therefore independent of web server platforms.

AJAX 代表了异步 Javascript 和 XML 。任何支持 Javascript 的服务器端技术也同样支持 AJAX 。 AJAX 是一种浏览器技术，因此也独立于网络服务器平台。

In this article we will learn about what AJAX is, how it works, and how can we use AJAX with PHP. Please remember, AJAX is not a programming language, so you don’t have to learn any new technology. AJAX can be implemented by using existing standards (JavaScript and XML) in a different way.

在这篇文章中，我们会了解到什么是 AJAX ， AJAX 如何工作以及在 PHP 中如何使用 AJAX 。请牢记： AJAX 不是一门编程语言，因此你并不需要学习任何一门新技术。 AJAX 能通过现行的标准（ Javascript 和 XML ）以另一种方式来实现。

If we are using PHP or any server side technology and need to extract data from storage on a server (eg a database or a file), we will have to make an HTTP request (either POST or GET) to get the data. Once the data is received the web page will need to be reloaded to show the data. Using AJAX technology we can request and receive the data from server in background and then display it on the page without a reload. AJAX uses HTTP requests for this. With AJAX, JavaScript communicates directly with the server, through the JavaScript XMLHttpRequest object (XML over HTTP). With an HTTP request, a web page can make a request to, and get a response from a web server without reloading the page.

如果我们使用 PHP 或者其他任何服务器端技术，并需要从一个服务器存储（数据库或文件）中提取数据，我们就必须通过一个 HTTP 请求（ POST 或 GET ）来获得这些数据。一旦接收完数据，网页需要重新载入来显示数据。通过 AJAX 技术我们能从服务器端请求并接收数据，然后无需重载就能在页面中显示出来。这个过程中， AJAX 使用 HTTP 请求。通过 AJAX, Javascript 使用 XMLHttpRequest 对象（ XML over HTTP ）直接和服务器交流。通过 HTTP 请求，网页不需重载就能从服务器端请求并返回结果。

The XMLHttpRequest object is supported in Internet Explorer 5.0+, Safari 1.2, Mozilla 1.0 / Firefox, Opera 8+, and Netscape 7. But the creation of XMLHttpRequest object is different in Internet Explorer than the other browsers. I will discuss this later. To use AJAX to request a data from the server we need to do the following.

IE 5.0+, Safari 1.2, Mozilla 1.0/Firefox, Opera 8+ 以及 Netscape 7 都支持 XMLHttpRequest 对象。但 IE 中 XMLHttpRequest 对象的创建不同于其他浏览器。这一点在下面会讨论到。为了从服务器端请求数据，我们需要做以下的工作：

Create an XMLHttpRequest object.

2. Then using this object, request data from the server.

3. JavaScript will then monitor for the changing of state of the request.

4. If the response is successful, then the content from the data store requested will be returned as response (response can be in the form of a String or XML).

5. Use the response in your web page.

创建一个 XMLHttpRequest 对象

使用这个对象从服务器请求数据

Javascript 会监控请求状态的改变

如果响应成功，向数据库请求的内容将被返回，返回的形式是字符串或 XML

网页中调用响应结果

1. Create an XMLHttpRequest object

JavaScript has a built-in XMLHttpRequest object. You can use that for Firefox, Safari, and Opera. For Internet Explorer use the ActiveXObject, there is also a difference between IE 5.0 and IE 6.0+ in how to create the object. The following codes create an XMLHttpRequest for all browsers:

Javascript 有一个内置的 XMLHttpRequest 对象，它能在 Firefox, Safari, 和 Opera 中使用。 IE 使用 ActiveXObject, 但 IE5.0 和 IE6.0+ 在创建 XMLHttpRequest 对象时也有所不同。以下代码适用于所有浏览器：

var req;

if(window.XMLHttpRequest){

//For Firefox, Safari, Opera

req = new XMLHttpRequest();

}

else if(window.ActiveXObject){

//For IE 5

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

} else if(window.ActiveXObject){

//For IE 6+

req = new ActiveXObject("Msxml2.XMLHTTP");

}

else{

//Error for an old browser

alert('Your browser is not IE 5 or higher, or Firefox or Safari or Opera');

}

Here, first we are using the built-in JavaScript function XMLHttpRequest() for creating an XMLHttpRequest for Firefox, Safari and Opera. If the browser does support window.ActiveXObject, then it is Internet Explorer. For IE versions 5.0+, use new ActiveXObject("Microsoft.XMLHTTP") and for IE 6.0+ use new ActiveXObject("Msxml2.XMLHTTP"). If the browser does not support the built-in JavaScript function XMLHttpRequest() or ActiveXObject, then it does not support AJAX. You can also use JavaScript try-catch blocks for the same output.

首先，我们使用一个内置的 Javascript 函数 XMLHttpRequest() 来为 FF, Safari 和 opera 创建一个 XMLHttpRequest 请求。如果这个浏览器支持 window.ActiveXObject ，则它是 IE 。对于 IE5.0+ 版本，使用 new ActiveXObject(“Microsoft.XMLHTTP”) ；对于 IE6.0+ 版本，使用 new ActiveXObject(“Msxml2.XMLHTTP”) 。如果浏览器不支持 XMLHttpRequest() or ActiveXObject, 则无法支持 AJAX 。你也能使用 Javascript try-catch 块来得到相同的输出结果。

如下：

var req;

try

{

// Firefox, Opera, Safari

xmlHttp=new XMLHttpRequest();

}

catch (e)

{

// Internet Explorer

try

{

xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

}

catch (e)

{

try

{

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

}

catch (e)

{

alert('Your browser is not IE 5 or higher, or Firefox or Safari or Opera');

}

In JavaScript, if statements within a try section fail, then the execution resumes from the corresponding catch block. Here first we are trying to get create a XMLHttpRequest using the built-in function, and if it fails then we will try using ActiveXObject("Msxml2.XMLHTTP"), and if it fails also we will try ActiveXObject("Microsoft.XMLHTTP"). If all these fail, then we will alert the user that his/her browser does not support AJAX.

在 Javascript 中，如果 try 部分的语句失败，则执行相对应的 catch 块。首先，我们试着用内置函数创建 XMLHttpRequest 对象，如果失败，我们试着使用 ActiveXObject("Msxml2.XMLHTTP") ，如果再失败，我们试着使用 ActiveXObject("Microsoft.XMLHTTP") 。如果以上都失败了，我们显示一个警告来告知用户他 / 她的浏览器不支持 AJAX 。

2. Request for a web page

After creating the XMLHttpRequest we now need to send the web request using the open method. We also need to specify the HttpRequest method, GET or POST. Use the following code to send the request.

创建 XMLHttpRequest 之后，我们使用 open() 方法来发送网页请求。必须指定 HttpRequest 方法， GET 或者 POST 。使用以下代码发送请求：

req.open(“GET”,”somedata.php”);

req.send(null);

Here, req is the XMLHttpRequest object. It will request to the server for somedata.php using GET method. The open function also has a third parameter, an optional boolean parameter. You should set that to true :

这里 req 是 XMLHttpRequest 对象。它会通过 GET 方法向服务器请求 somedata.php 的数据。 Open() 函数可以包含第三个参数，一个可选的布尔值 (boolean) 参数 , 并且应该把它设为真 (true) 。

req.open(“GET”,”somedata.php”,true);

req.send(null);

Both of the above is correct.

以上两个例子都是正确的。

3. Monitor for the response of the request

You will need to monitor for the state of the request. For doing this you can assign a function to req.onreadystatechange (Here, req is the XMLHttpRequest object), like below.

为了监控请求的状态，你需要赋给 req.onreadystatechange 一个函数，就像下面：

req.onreadystatechange=function()

{

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

{

var resp = req.responseText;

}

Or like this,

或者：

req.onreadystatechange = handleResponse;

function handleResponse(){

if(req.readyState == 4 && req.status == 200){

//returned text from the PHP script

var response = req.responseText;

}

The readyState property holds the status of the server's response. Each time the readyState changes, the onreadystatechange function will be executed. Here are the possible values for the readyState property:

readyState 属性持有服务器响应的状态。每次 readyState 改变， onreadystatechange 函数都会执行。以下是 readyState 的几种值：

State Description

0 The request is not initialized

1 The request has been set up

2 The request has been sent

3 The request is in process

4 The request is complete

And status is the status of the HTTP Request, like 500 Internal Server Error, 400 Bad Request, 401 Unauthorized, 403 Forbidden, 404 Not Found etc. 200 means no error.

这里的状态是指 HTTP 请求的状态，就像 500 是内部服务器错误， 400 是坏的请求， 401 是未验证， 403 禁止， 404 未发现等等。 200 意味着 ok 。

4. Get the response

The response will be as string or as XML. The data sent back from the server can be retrieved with the responseText property as string. Use responseXML for getting the response as XML.

响应将以字符串或 XML 的形式出现。从服务器发回来的数据能通过 responseText 以字符串的形式获得，或者通过 responseXML 以 XML 的形式获得。

5. Use the response on your web page

You can use the response you got from the XMLHttpRequest in your web page/application. You can either set a value of a text field or use the returned HTML from the web request as innerHTML for a <div></div> tag or <span></span> tag (See below for the implementation of this)

你能将从 XMLHttpRequest 得到的响应运用到网页或应用程序中。你能设置文本区域的值或者使用请求返回的 HTML 作为 div 或 span 标签的 innerHTML 内容。（请看下面的实现方法）

Using AJAX with PHP

I usually place all the AJAX related functions in one JavaScript (ajax.js), and later add the JavaScript in my PHP pages. My ajax.js looks like below.

我经常把关于 AJAX 的函数放到一个 Javascript 文件 (ajax.js) 里，之后加到 php 页面里。

function createRequestObject(){

var req;

if(window.XMLHttpRequest){

//For Firefox, Safari, Opera

req = new XMLHttpRequest();

}

else if(window.ActiveXObject){

//For IE 5+

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

}

else{

//Error for an old browser

alert('Your browser is not IE 5 or higher, or Firefox or Safari or Opera');

}

return req;

}

//Make the XMLHttpRequest Object

var http = createRequestObject();

function sendRequest(method, url){

if(method == 'get' || method == 'GET'){

http.open(method,url,true);

http.onreadystatechange = handleResponse;

http.send(null);

}

function handleResponse(){

if(http.readyState == 4 && http.status == 200){

var response = http.responseText;

if(response){

document.getElementById("ajax_res").innerHTML = response;

}

Now I add a <script></script> tag in my PHP pages like following to access the JavaScript functions.

现在我添加一个 <script> 标签到 PHP 页面来访问 javascript 函数。

Then I create a function called sendReq() as shown above for preparing the URL to the PHP page to get some data from the database. If you look into the ajax.js, you will see that I’m assigning the output of the PHP page to a <div> tags innerHTML. My div tag has the id=’ajax_res’.

然后，我创建一个叫做 sendReq() 的函数来准备 php 页面的 URL 从数据库中获得数据。如果你仔细看 ajax.js, 你会发现我付给了 php 页面的输出给了一个 div 标签。这个 div 标签的 id 是 ajax_res 。

</div>

After calling the sendReq function with a value of ‘success’, it will connect to the server for sending a request to the URL get_lcm.php?status=success, then get the data from the database using the value ‘success’, and set the innerHTML attribute of the div tag whose id is ‘ajax_res’ according to the response. Initially my div tag shows an image, but after AJAX responds successfully this image will be replaced with the response. You can also get the response as the value of an input text.

通过 success 值成功调用 sendReq 函数之后，它会由发送请求到 URL get_lcm.php?status=success 连接到数据库，然后使用 success 值从数据库中获得数据，并根据响应设置 id 是 ajax_res 的 div 标签的 innerHTML 属性。最初我的 div 标签显示一张图片，但是 AJAX 响应成功之后，这张图片会被响应代替。你也能获得响应作为输入文本的值。

My get_lcm.php looks like this.

<?php

include_once("create_table.php");

if(!empty($status)){

echo "<strong>Search Result for Status: ".$status."</strong><br><br>";

$ct = new createtable("select * from lcm where state=$status");

$ct->table_viewer();

}

I used one of my PHP classes ‘create_table.php’ for creating a table from SQL queries. ‘create_table.php’ has a function, table_viewer(), to print the SQL output as a HTML table. I will discuss about this class and some other data abstraction classes I used in some later articles, if necessary.

我使用了我的一个 php 类 create_table.php 来通过 sql 语句创建一个表格。 Create_table.php 有一个函数， table_viewer(), 以一个 HTML 表格的形式打印 SQL 输出。如果需要的话，我会讨论到我在其他文章中用过的类和其他数据抽象类。

I had the following HTML code for calling the AJAX function using the sendReq() as described earlier.

像上面所描述的，我通过 sendReq() 来调用 AJAX 函数。

<a class="none" href="#" onClick="sendReq(1)">ACTIVE</a>

If a user clicks the above hyperlink, then the JavaScript function sendReq is invoked using the value of status equal to 1. After that the webpage with URL get_lcm.php?status=1 will be invoked. This PHP will get the information from database and shows the result as table. This result will then be displayed within the <div> tag.

如果一个用户点击了上面的超链接，然后通过 status 的值等于 1 ，这个 javascript 函数 sendReq 被调用。 PHP 会从数据库中获得信息并显示将结果在表格中。这个结果会在 div 标签中显示。

Using AJAX from PHP is very easy as described here. All you need is the JavaScript functions for sending the XMLHttpRequest and then handle the Http Response. It will simplify development is you place all your AJAX related code in a single JavaScript file and reference it from anywhere you need AJAX.

就像这里描述的一样，使用 AJAx 是非常简单的。你只需要 javascript 函数来发送 XMLHttpRequest 然后处理 Http 响应。它会简化开发过程，因为你把所有Ajax 相关的代码放到一个单独的javascript 文件，并能在任何需要Ajax 的地方引用它。

There is another way of getting the same result from PHP without using the XMLHttpRequest object. But I personally do not like the concept, because it is missing one of the main ingredients of Asynchronous JavaScript And XML (AJAX), XML. This concept is good for the old browsers with no supports for XMLHttpRequest object, but as all the newer versions are supporting XMLHttpRequest object you can use AJAX for the common browsers.

还有另外一种方式从 php 中得到数据，但不是使用 XMLHttpRequest 对象。但是我个人不喜欢这个概念，因为他缺少了一个很重要的 AJAX 成分， XML 。这个概念对于不支持 XMLHttpRequest 对象的旧浏览器很好，但是所有的新版本都支持 XMLHttpRequest 对象。