文档创建

文档作者	吴川常	创建时间	2007年
文档描述	Ajax实验过程及建议	实验人	吴川常

 

目录：

名词解释… 1

实验背景… 1

实验目的… 2

验证通RewriteRule^/app2/(.*)$ http://ajax.test.com/$1 [P,L] 能代理http://x/ 站点… 2

验证ajax是能够跨域… 2

为application移植及在线漫画改造做好理论与实践基础… 2

实验方法、步骤及环境… 2

实验方法… 2

实验环境… 2

实验步骤… 3

实验过程数据记录… 5

压力测试… 6

结论… 6

 

名词解释

AJAX:是异步JavaScript和 XML单词的缩写(asynchronous JavaScript and XML)。正如Web服务开发者应该关于的一样，我们最应该的关注的技术是它的异步本质，以及随之而来的它的暗示了关于在一个语言可执行的环境的知识的JavaScript根源——命名为一个浏览器——并且也带来了在至少的一点来看，一旦能够运转之后它所产生的视觉效果(不是说我们要忽略这个最后的一点，而是图像设计师一般的比程序员更加熟练于解决这些问题)。

Apache Rewrite:语法RewriteRule search-pattern sulostitution-string [flag list]

使用环境：server config,virtual host,per-directory config(.htaccess)

该指令是在Apache中URL定义重写规则。规则必须有两个参数。第一个参数是必须适合于应用替代字符串的搜索模式。

Apache Mod_Proxy:       Apache 中对代理服务器的支持来自Mod_Proxy模块。

RewriteRule ^/app2/(.*)$ http://x/$1 [P,L]：[P,L]中P表示使用Mod_Proxy代理。

 

实验背景

我们知道，PHP应用程序事实是在服务器上运行的，用户的请求要不断地送往远程的服务器，服务器执行完本地的程序后把重新装载页面再发送客户端。所以就出现了不断刷新的问题，页面不断闪烁。用户不厌其烦，运行效率也大大降低，服务器的负荷加重。事实，客户端的请求在某一时刻只是通过向 Web 服务器提交新的请求来检索对用户输入所做的响应。这种情况下，开发人员可以使用 JavaScript 在客户端上加载所有响应，从而提供更好的用户体验。遗憾的是，在很多情况下，不必将所有响应都返回或加载到 JavaScript 要更好，只返回所要的结果，执行过程仍然在服务器上运行。AJAX 提供了一种新的中间选择，能够在维持及时响应和灵活性的同时利用基于服务器的应用程序。AJAX依靠服务器作为中介来分发和处理请求。但由于浏览器的安全限制导致AJAX不能跨域。

实验目的

验证通RewriteRule^/app2/(.*)$ http://ajax.test.com/$1 [P,L] 能代理http://x/ 站点

       使用apache 内置的RewriteRule 及Proxy 功能将，远程的WEB站点信息取到本地站点上。如访问 www.test.com/app2/ 返回的html相当于 访问http://ajax.test.com.返回的结果。

验证ajax是能够跨域

       在默认的情况下，由于客户端浏览器的安全限制的原因ajax是不能跨域异步处理的。但配置RewriteRule后，www.test.com/  是能够通过www.test.com/app2/ 间接访问http://ajax.test.com.的。也就是，www.test.com/ 要异步处理触发http://ajax.test.com.相当于出发本地app2目录下的程序或页面。这样就不存在跨域问题了。

为application移植及在线漫画改造做好理论与实践基础

实验方法、步骤及环境

实验方法

编写html页面 及简单的php返回状态值的程序。分别假设apache ,apache2。分别运行动静两个站点。采用web访问的方式记录访问时间、结果、apache日志。

实验环境

       WEB服务：apache2.0  php4.10

       服务器：AS4  PIII 500 *2

       内网测试

       IP地址：192.168.1.103  192.168.1.104

       ServerName :apache(192.168.1.103) apache2(192.168.1.104)

实验步骤

       实验分两组：1组、2组 多次进行

1．  分别在apache及apache2上装好apache

2．  在apache2上配置php环境（本文略）

3．  配置站点：apache上配置静态站点，放index.html文件

apache站点模块上配置RewriteRule^/app2/(.*)$ http://ajax.test.com/$1 [P,L]

apache2配置php站点，放aa.php文件

4．  编写页面代码：apache中index.html代码为：

<SCRIPT LANGUAGE=”JavaScript”>

<!–

var net = new Object();

net.READY_STATE_UNINITIALIZED = 0;

net.READY_STATE_LOADING = 1;

net.READY_STATE_LOADED = 2;

net.READY_STATE_INTERACTIVE = 3;

net.READY_STATE_COMPLETE = 4;

net.ContentLoader=function(url,onload,onerror){

this.url = url;

this.req = null;

this.onload = onload;

this.onerror = (onerror)?onerror:this.defaultError;

this.loadXMLDoc(url);

}

net.ContentLoader.prototype={

loadXMLDoc:function(url){

try{

        this.req = new XMLHttpRequest();

        } catch (trymicrosoft){

        try{

        this.req = new ActiveXObject(”Msxml2.XMLHTTP”);

        } catch (othermicrosoft){

        try{

                this.req = new ActiveXObject(”Microsoft.XMLHTTP”);

                } catch (failed){

                this.req = false;

                }

        }

        }

        if (this.req){

        try{

        var loader = this;

        this.req.onreadystatechange=function(){

                loader.onReadyState.call(loader);

                }

        this.req.open(’GET’,url,true);

        this.req.setRequestHeader(”If-Modified-Since”,”0″);

        this.req.send(null);

        } catch (err){

        this.onerror.call(this);

        }

        }

},

onReadyState:function(){

var req = this.req;

var ready = req.readyState;

        if (ready == net.READY_STATE_COMPLETE){

        var httpStatus = req.status;

        if (httpStatus == 200 || httpStatus == 0){

        this.onload.call(this);

        } else{

        this.onerror.call(this);

        }

        }

},

defaultError:function(){

alert(”系统繁忙请稍后.”

        +”\n\nreadyState:”+this.req.readyState

        +”\nstatus: “+this.req.status

        +”\nheaders: “+this.req.getAllResponseHeaders());

}

}

 

 

function ShowHot()

{

var response = this.req.responseText;

alert(response);

document.getElementById(”hot”).innerHTML = “<img src=’”+response+”‘ alt=” border=’0′ />”;

}

 

function gethot()

{

    var url = ‘/app2/aa.php’;

new net.ContentLoader(url, ShowHot);

}

//–>

</SCRIPT>

<html>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″>

<title>测试</title>

</head>

<body onLoad=”gethot();”>

<div id=”hot”></div>

</body>

</html>

apache2 aa.php代码为：

<?

echo “http://xyq.163.com/images/add_bbs.gif|a”;

?>

5．  记录apache日记RewriteLogLevel 9  RewriteLog logs/rewrite.log

6．  两组测试：

1．组

1．  在本机上加上hosts:

192.168.1.103  www.test.com 

192.168.1.104   ajax.test.com

                     2．访问www.test.com 记录结果

2．  组

1．  在本机上加上hosts:

192.168.1.103  www.test.com 

                     2．在apache2机器上加hosts:：

92.168.1.104   ajax.test.com

                     3．访问www.test.com 记录结果

实验过程数据记录

       1组测试失败败

       2组成功返回http://ajax.test.com/aa.php 内容

       4 apache日志：

        rewrite.log

压力测试

无

结论

站点。