Link:http://www.phpbuilder.com/columns/kassemi20050606.php3?aid=917
XMLHttpRequest and AJAX for PHP programmers
php程序中的XMLHttpRequest 和 AJAX
Introduction:
前言：
Although the concept isn't entirely new, XMLHttpRequest technology is implemented on more sites now than ever. Compatibility is no longer an issue (IE, Mozilla and Opera all support it), and the benefits to using it are amazing. There are too many PHP programmers avoiding any work with javascript beyond simple form validation, and for good reason. It's difficult to keep several languages proficiently under your belt. But using the XMLHttpRequest object is not as hard as everybody thinks, and you don't need to buy and memorize another reference manual.
虽然 XMLHttpRequest概念并不是新的，但最近在网站上的应用远多于以前。兼容性也不存在问题了（IE, Mozilla and Opera都支持），其应用有时也是令人惊奇的。很多PHPer通过这一方式来避免使用javascript来验证简单的表单输入。同时使用几种语言是很困难的。而使用XMLHttpRequest并不象人们想象的那么难，你也不需要去为此买一本参看书或者记忆一本参考手册。
Let's Get To It!
开始！
Asynchronous JavaScript and XML, or AJAX is a method of sending and receiving data (usually XML) from a server-side application through javascript. Since javascript offers the ability to change the contents of a web page on-the-fly, this technique allows web programmers to venture closer to programming truly interactive web applications similar to those built with Java and ActiveX.
Ajax(Asynchronous JavaScript and XML)是通过javascript去请求和获取一个服务器端操作。由于这种功能，javascript可以改变网页中的内容。这种技术使得web程序员可以像Java和ActiveX程序一样进行交互设计。
As PHP developers, it might seem tempting to avoid the use of Javascript and leave it to the designer. After all, we aren't usually programming the UI, but the processing components required by the UI. The distinction between the two is disappearing. Here's a simple diagram that demonstrates just how AJAX works:
PHP开发人员更倾向于不使用javascript，而把他交给前台设计人员来处理。毕竟，我们不常对UI进行编码。但AJAX过程中的一些部分是在UI中的。这两者没有什么区别。这里是演示AJAX如何运行的一个简单图表。
点击查看原始尺寸
If you're working for a small or medium sized company interested in implementing AJAX solutions, you might end up responsible for figuring out how.
如果你任职于一家中小型公司，仅仅对AJAX的解决方案感兴趣的话，你可能仅仅能够理解到AJAX是如何工作的而已。
XMLHttpRequest objects can be a simple way of getting data to and from a PHP application while keeping your client right at home on the same page. Our example today will allow a user to select a specific piece of software that your company makes. We will show a selection box with several categories. When a user selects a category, a request is sent to a PHP application which returns a list of applicable software. The information is used to generate a list of the results underneath the selection box. Since the information is not loaded with the initial page, your company saves bandwidth, and because the user doesn't have to bounce from page to page for results, he will find your company's page more inviting and faster to load.
XMLHttpRequest对象在客户端的同一页面可以简单的从获得数据后从PHP程序结果。这里的例子允许用户选择贵公司的程序模块。我们通过一个选择框来实现。当用户选择一个种类时，就会发送一个请求到PHP程序，以得到应用程序的列表。这些生成的列表信息属于用户所选择类别之下。由于信息不需要在首次全部载入，这为贵公司省下了流量。对用户来讲，他们不需要在页面间跳来跳去，他们对觉得贵网站很有吸引力，加载也很快。
Javascript for PHP Programmers
PHPer需要的Javascript
Since we'll be working with Javascript, it's good to get a basic tutorial given a background in PHP.
因为我们需要编写Javascript，先通过PHP背景来了解一下Javascript语言的基础。
Variables:
变量：
Variables in javascript are declared in much the same was as in PHP. To declare a variable in javascript, use the following:
Javascript中的变量声明与PHP中的很相似。在Javascript中声明一个变量如下：
var varname = varvalue; //Declaring your variable is not mandatory, but good practice.
var varname = varvalue; //变量声明不是必须的，但这是一个好的习惯
Control Structures:
控制结构：
PHP and javascript have a very similar way of using these as well... You can use if/else statements, switch statements, for and while loops and nested loops all with PHP syntax. If/elseif/else statements are a little different, but not much:
PHP和Javascript具有非常相似的语法结构，你可以使用PHP语法中的if/else句型，swicth句型，for和while循环和嵌套循环。if/elseif/else句型有一点点区别。
var variable1 = 1; //Declare a variable.
if(variable1 == 1){
// Increment variable value by 1
variable1++;
/* The following brings up a message box, a handy way of checking variable values as you
go. Be careful not to use these in loops that are too long. */
alert(variable1);
}else if(variable1 == 2){ //Elseif's in javascript require a space between the else and if.javascript中Elseif一定需要一个空格
for(i=0;i < 20;i++){ //For loop.
variable1++;
}
switch(variable1){ //Switch conditional
case 22:
alert("variable 1 has value of 22!");
break;
default:
alert("didn't have value of 22!");
break;
}
}else{
alert('The final else statement');
}
Functions
函数
To declare a function in javascript, use the following:
在javascript中声明一个函数的方式如下：
function functioname(argument1, argument2, argument3){
/* Arguments not provided will be null */
if(argument3 == null){
return argument1 + argument2
}else{
return argument1 + argument2 + argument3
}
}
/* And call it with */
alert(functionname(1, 2)); //returns 3
/* or */
alert(functionname(1, 2, 3)); //returns 6
Other than the difference with default values for optional arguments, you should assign a default when a passed argument has a null value.
和PHP不同的是可选参数，你需要比较它是否是空的，再赋给它一个默认值。
Using Javascript in a Document:
在文档中使用Javascript
Javascript can be included in your document in two ways, similar to CSS inclusion:
Javascript可以通过两种方式在文档中使用，与CSS很像：
<!--Placing your javascript in the head tag of your html document is the standard-->
<!-- 把你的代码放在head标签间 -->
<script language="javascript" type="text/javascript" src="./javascript_file.js"></script>
<script language="javascript" type="text/javascript">
/*Javscript code goes in here*/
alert("Hello World!");
</script>
The first way is to link to the file directly, and the second is to include it on the page itself. If your code is getting long and is used on multiple pages, it is preferable to use the first method, as the browser will cache the file for future use. And that's all you need to know about Javascript to continue.
第一种方式是从文件中引用，第二种是在文档自身调用。如果你的代码需要很长后者需要在多个页面中使用的话，最好使用地一种方法，浏览器会缓存这些文件以便将来之用。现在你需要的是继续看下文。
Developing the Initial Page
第一个页面
Below we're going to be creating the page the user loads to view your companies products.
以下我们准备建立一个用户调用和查看公司产品的页面。
<html>
<head>
<title>CompanyXYZ Software</title>
<script language="javascript" type="text/javascript"
src="./internal_request.js">
</script>
</head>
<body>
<div id="product_categories">
<!--Category selection box...-->
<form name="form_category_select">
<select>
<option>Audio</option>
<option>Games</option>
<option>Internet</option>
</select>
</form>
</div>
<div id="product_cage">
<!--This is where we'll be displaying the products once they're loaded-->
^ Please select a category from above.
</div>
</body>
</html>
The above HTML first links to a javascript file, internal_request.js, and displays a page with two <div> tags, the second of which is where we'll be displaying our data. Go ahead and copy the above code into a file called products.html.
以上的HTML文件第一行指向了一个Javascript文件，internal_request.js，页面通过两个DIV标签来显示，我们会在第二个标签里显示我们的内容。复制以上代码到一个文件中，保存为products.html
Creating the XMLHttpRequest Object
建立XMLHttpRequest对象
The XMLHttpRequest object works differently in Internet Explorer and Mozilla-like browsers. To create an XMLHttpRequest object in IE, the following can be used:
XMLHttpRequest对象调用方式在Internet Explorer和Mozilla的浏览器不同，在IE中可以像如下方式使用：
var request_o = new ActiveXObject("Microsoft.XMLHTTP");
[/geshi
And the following works for supporting browsers other than IE:
这种方式对其他IE外的浏览器使用：
[geshi lang=javascript]
var request_o = new XMLHttpRequest();
Determining what browser you are working with and creating the appropriate object is simple:
兼容代码如下：
/* The following function creates an XMLHttpRequest object... */
function createRequestObject(){
var request_o; //declare the variable to hold the object.
var browser = navigator.appName; //find the browser name
if(browser == "Microsoft Internet Explorer"){
/* Create the object using MSIE's method */
request_o = new ActiveXObject("Microsoft.XMLHTTP");
}else{
/* Create the object using other browser's method */
request_o = new XMLHttpRequest();
}
return request_o; //return the object
}
/* You can get more specific with version information by using
parseInt(navigator.appVersion)
Which will extract an integer value containing the version
of the browser being used.
*/
Copy the above code into a file called internal_request.js, located in the same directory as the products.html file.
复制以上代码，保存到文件internal_request.js，与products.html放在同意目录。
We now have a function that will create an XMLHttpRequest object in internal_request.js, and we have an HTML file that calls upon the code in internal_request.js. Remember how we left the product selection <div> in products.html blank? Let's write the code that utilizes our createRequestObject function to get the list of products.
我们现在已经有了一个可以创建XMLHttpRequest对象的internal_request.js和调用这个JS的HTML文件，注意我们把DIV中的列表留空了。我们来写一段代码利用createRequestObject函数来的得到公司产品列表。
/* The variable http will hold our new XMLHttpRequest object. */
var http = createRequestObject();
/* Function called to get the product categories list */
function getProducts(){
/* Create the request. The first argument to the open function is the method (POST/GET),
and the second argument is the url...
document contains references to all items on the page
We can reference document.form_category_select.select_category_select and we will
be referencing the dropdown list. The selectedIndex property will give us the
index of the selected item.
*/
http.open('get', 'internal_request.php?action=get_products&id='
+ document.form_category_select.select_category_select.selectedIndex);
/* Define a function to call once a response has been received. This will be our
handleProductCategories function that we define below. */
http.onreadystatechange = handleProducts;
/* Send the data. We use something other than null when we are sending using the POST
method. */
http.send(null);
}
/* Function called to handle the list that was returned from the internal_request.php file.. */
function handleProducts(){
/* Make sure that the transaction has finished. The XMLHttpRequest object
has a property called readyState with several states:
0: Uninitialized
1: Loading
2: Loaded
3: Interactive
4: Finished */
if(http.readyState == 4){ //Finished loading the response
/* We have got the response from the server-side script,
let's see just what it was. using the responseText property of
the XMLHttpRequest object. */
var response = http.responseText;
/* And now we want to change the product_categories <div> content.
we do this using an ability to get/change the content of a page element
that we can find: innerHTML. */
document.getElementById('product_cage').innerHTML = response;
}
}
The above code should be appended to what you already have in the internal_request.js file.
以上的代码依赖于internal_request.js文件。
Conclusion
结论
We'll followup with the rest of this informative article next week, so be sure to visit us again for the conclusion! btw, don't miss the important Quick Tips listed below!
剩下的内容我们将在下周进行介绍，记得对本站的继续关注！顺便提一下，不要忘记以下的快速提示。
Quick Tip 1: (Using the POST method instead of GET):
The following will send the request to the PHP file using the POST method:
快速提示1：使用Post方法替代GET
下面是使用POST方法发送请求的例子：
http.abort;
http.open('post', 'back_end.php');
http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
http.send('arg1=val1&arg2=val2&arg3=val3');
Quick Tip 2: (Parsing XML results):
快速提示2：（解析XML结果）：
If you're receiving XML instead plain-text results from your processing PHP script, you can use the javascript DOM to parse them. Suppose you receive the following:
如果你从PHP程序返回XML结果而非纯文本结果，你可以使用Javascript DOM来解析他们。假设你得到了以下结果：
<product_list>
<product id=
"1">
<name>EeasySMS</name>
<version>
2.
2</version>
</product>
<product id=
"2">
<name>BabyMon</name>
<version>
1.
2</version>
</product>
</product_list>
To receive a DOM compatible response from our XMLHttpRequest object, instead of using the responseText property, substitute the responseXML property. In this case we'll refer to it by assigning it the variable XMLResponse.
为了使DOM模型可用，需要使用responseXML来替代responseText属性。这是，我们把结果赋给变量XMLResponse。
The product_list element contains two elements of interest: product elements. In order to get to these, we can use the following:
product_list元素包含有两个product元素，为了获得他们，可以使用以下代码：
/* Reference the product_list element to the variable product_list */
product_list = XMLReponse.getElementByTagName('product_id');
/* By substituting product_list for XMLResponse, we will be searching
only the product_list element, not the entire response
We also use getElementsByTagName, not getElementByTagName,
since we are interested in all of the results, not just one. */
product_id = XMLResponse.getElementsByTagName('product');
/* getElementsByTagName produces an array, which we can access like this:
product_id[n], the same way we access an array item in PHP.
Let's get the id attribute from the product elements like this: */
for(i=0; i < product_id.length; i++){ //length is the same as count($array)
id = product_id[i].getAttribute('id') //Grabs the id attribute.
/* To get the text from within a text node, we use firstChild.data
for the corresponding element. */
name = product_id[i].getElementByTagName('name').firstChild.data;
version = product_id[i].getElementByTagName('version').firstChild.data;
}
This may seem like a bit to work with at first, but with a little work, you can get what you want to work. If you want to avoid this, you could use the responseText method, parsing the XML in PHP before sending it to the XMLHttpRequest object.
你可以少量的工作来使的这段代码来实现你自己的功能。如果你不想使用他，你可以在返回XMLHttpRequest对象前使用PHP来解析XML文档而使用responseText属性。
Quick Tip 3: (Relevant Links):
快速参考3：（相关参考）
* Microsoft XMLHttpRequest Documentation
* XMLHttpRequest @ Apple Developer Connection
* The DOM Model in Mozilla
About the Author:
关于作者：
James Kassemi lives in Albuquerque, New Mexico. He works mainly with PHP, programming for a variety of clients in the southwest.
翻译：rollenc
作者 rollenc
