ajax实例 ajax技术分析

• 什么是ajax？

     ajax是以异步方式获得服务器端数据的技术。什么是异步？先说说什么是同步吧：

     传统的B/S结构的流程是这样的:用户输入url，浏览器根据url，会跟服务器建立一个连接，然后发送一些头信息到服务器，告诉服务器我要取数据，然后服务器将浏览器请求的页面发送到浏览器端。比如我输入：;浏览器会跟这台服务器建立连接，然后发送一些头信息，告诉服务器我要取abc.htm这个页面的数据，然后服务器就将这个页面的数据传过来，我的浏览器接收到之后，就把页面的内容显示出来。

     假如我输入，服务器就会将123.htm这个文件的内容传过来，我的浏览器就将显示成这个页面的内容。

     后来技术的发展，动态脚本出现，不仅可以服务器端向浏览器端传数据，也可以由浏览器端向服务器端传一些动态数据，比如在abc.htm里放一个表单：

<form action="abc.php" method="get">
    请输入你的名字:<input type="text" name="name" id="name" />
    <input type="submit" id="submit" name="submit" value="提交" />
</form>

      用户在浏览器输入，将看到1个表单，包含一个文本输入框和一个按钮，用户可以在文本输入框中输入内容，当点击按钮的时候，就将输入的内容传送到了服务器端，在服务器端的abc.php这个文件里我们可以通过$_GET这个数组来获得用户输入的数据，然后进行处理，服务器会把abc.php处理后的内容发送到浏览器端。

      这样一发一收就是同步，同步的最大特点就是每次向服务器发送数据和接受数据都得切换页面，就像上面的由abc.htm切换到了abc.php，这叫页面的刷新。

      那什么是异步呢？我们先来看这样的一个需求：我输入，然后填写表单，点击提交后向服务器发送数据，但页面还停在这个页面，就是不刷新页面。

      典型的应用是用户注册的时候可能要用户输入email，当用户提交的时候将用户输入的email发送到服务器端，但页面还停在当前的页面，服务器端查找数据库里是否已经有了这个email，然后发送一个提示信息到浏览器端，浏览器端根据这个提示信息，如果已经有了，用户可以修改后再提交。

      这就要用到ajax技术，异步（不刷新页面）跟服务器交互。

• ajax实例

     ajax是通过javascript来实现的，我写了一个封装起来的

 

var ajax='';
function requestAjax(url,parameter,method,callfunc)
{
    if (window.ActiveXObject)
    {
        ajax = new ActiveXObject("Microsoft.XMLHTTP");
    }
    else if (window.XMLHttpRequest)
    {
        ajax = new XMLHttpRequest();
    }
    else
    {
        return false;
    }

    if (method == 'GET' || method == 'get')
    {
        url = url + "?" + parameter;
     ajax.open("GET", url, true);
     ajax.send(null);
        ajax.onreadystatechange = function () {
            if(ajax.readyState == 4)
            {
                if(ajax.status == 200)
                {
                    callfunc();
                }
            }    
        };
    }
    else if (method == 'POST' || method == 'post')
    {
     ajax.open("POST", url, true);
        ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
     ajax.send(parameter);
        ajax.onreadystatechange = function () {
            if(ajax.readyState == 4)
            {
                if(ajax.status == 200)
                {
                    callfunc();
                }
            }    
        };
    }
}

       把上述代码保存在一个文件里，用的时候把这个文件包含进来，然后通过

      

requestAjax(url,parameter,method,callbackfunction);

        就可以调用了，其中url就是动态脚本的url地址，parameter是参数，method是传送的方式（get/post）,callbackfunction是服务器端发送数据回来后要执行的函数名。例：

requestAjax('','name=coolman','get',submitCallBack);

在abc.php文件里可以通过$_GET['name']来得到name的值，即coolman。

       服务器端向浏览器端发送数据有两种格式，一种是字符串，一种是XML格式，字符串的格式直接在abc.php里echo一个字符串就ok了。

 

<?php
$str_name = $_GET['name'];
echo 'hello '.$str_name . '!';
?>

我将获得的name值前面加了个hello，然后echo出来，那么浏览器端将得到“hello coolman！”。用上面的函数怎么来得到这个字符串呢？

可以通过ajax.responseText来得到这个字符串， 上面调用requestAjax函数的时候传了个“submitCallBack"的函数名给这个函数，我可以在这个函数里操作这个返回的字符串

 

function submitCallBack()
{
    alert(ajax.responseText);
}


    我是将这个字符串alert出来了，当然可以对它进行任何操作^_^

    关于ajax先写到这，返回XML格式的下篇再写，如果有不对之处，欢迎指正。