大罗-PHP/Python博客

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很像：

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.
以下我们准备建立一个用户调用和查看公司产品的页面。

    
        
        
    
    
        

            
            


                
                    Audio
                    Games
                    Internet

                
            
        
        

            
            ^ Please select a category from above.
        

    

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");

And the following works for supporting browsers other than IE:
这种方式对其他IE外的浏览器使用：

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 
 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来解析他们。假设你得到了以下结果：

    
        
            EeasySMS
            2.2
        
        
            BabyMon
            1.2
        
    

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

Posted by rollenc

现在网络对上AJAX的评论很多，我并不打算凑热闹，只是简单的对自己对AJAX的学习作点笔记和小结罢了。
IT界内没有迷信，只有一个一个的奇迹和突破，AJAX作为一种应用而不是一种新的技术出现，自然有一种使用习惯的影响在内。如我，喜欢LINUX，不喜欢WINDOWS，但有时候不得不用WIN。我不迷信某一种思想和技术。而使用AJAX与我使用LINUX相反，我喜欢AJAX的应用，但一般情况下我不会常用，现在产品的展示是一股脑信息的一次性给顾客，这比用户要一点得到一点要强，虽然在数据传输量上AJAX占优势，不要的不传，但在时间和对数据库压力增大了。
比较两个SQL
1. select id,name from user limit 30;
2. select name from user where id=$id
如果你要一两个用户的信，可能第二中方式要好些，但是我要10个用户的或者更多的话写第二种SQL就是自己跟自己的服务器，跟浏览者过不去了。
另外一点是为了浏览器兼容问题，要几十行代码来控制，在加上OPEN,SEND等一个简单的AJAX需要50行左右，如果应用量比较小，直接用 IFRAME实现（现在被称之为伪AJAX）要快得多。比方说前阵做了一个程序，是要求网站访问记数的，等页面加载完毕之后才算作是一次有效点击。实现方法：
ajax方法：
// 浏览器兼容性解决
function createXMLHttpRequest() {
var xmlHttp = null;
try
{

xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{

xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
//alert("Microsoft.XMLHTTP");
}
catch(oc)
{

xmlHttp=null;
//alert('null');
}
}
//alert(xmlHttp);

if ( !xmlHttp && typeof XMLHttpRequest != "undefined" )
{
xmlHttp = new XMLHttpRequest()
}
//alert(xmlHttp.readyState);
return xmlHttp;
}

function recordHit()
{
//建立xmlhttp
var xmlhttp = createXMLHttpRequest();
url = "record.php?id=<?php echo $id; ?>";
xmlhttp.open("get",url,true);
}
<html>
<body onload="recordHit();">
</body>
</html>

非AJAX解决方法要简洁的多：
<html>
<body onload="javascript: document.getElementById('iframe').src=record.php?id=<?php echo $id; ?>">
<iframe id="iframe" systle="display=none"></iframe>
</body>
</html>

上面是一个应用，强调一个问题，小应用的不需要用AJAX，比如在一些示例中演示了一些EMAIL验证，用户名唯一性验证等问题，验证EMAIL只用JS不行么，还要在服务器上验证？唯一性验证应用比较广，但用以个IFRAME照样可以解决问题。使IFRAME返回一个
<script language="javascript">
parent.document.getElement.tip.innerHTML = "The name has been used";
</script>
一样OK。

但是如果返回的数据量比较多，或者请求数比较多的时候，就可以，也建议使用AJAX了，发超量数据给用户是不行的，建立N多个IFRAME也不理智。前段时间写了一个聊天室，聊天室算是WEB里面交互行很强的一种应用，请求数很多，用AJAX就比较理智了。

创建于： 2006-04-29 17:33:31

Posted by rollenc