潘锦的空间 » Ajax https://www.phppan.com SaaS SaaS架构 团队管理 技术管理 技术架构 PHP 内核 扩展 项目管理 Sun, 12 Apr 2026 03:47:23 +0000 zh-CN hourly 1 https://wordpress.org/?v=3.9.40 Ajax与REST架构简单示例 https://www.phppan.com/2010/10/ajax-rest/ https://www.phppan.com/2010/10/ajax-rest/#comments Mon, 11 Oct 2010 01:36:30 +0000 http://www.phppan.com/?p=1029 话说某日有见54chen真人秀，在六体膜拜之后，鉴于之前也有看过REST的一些东东，于是便有了本文，正文如下：
REST(Representational State Transfer表述性状态转移)是一种体系架构，它为客户端和服务器之间的数据交互提供了指导。它将客户/服务器通信这种计算模型抽象到了Web层面。
REST最早是在Roy Thomas Fielding博士的博士论文中提出的，REST是一种针对网络应用的设计和开发方式，是一种风格，可以降低开发的复杂性，提高系统的可伸缩性。
REST强调如下的体系架构概念。
　　1、网络上的所有事物都被抽象为资源（resource）；
　　2、每个资源对应一个唯一的资源标识（resource identifier），
　　3、通过通用的连接器接口（generic connector interface）对资源进行操作；
　　4、对资源的各种操作不会改变资源标识；
5、所有的操作都是无状态的（stateless）。

REST对于信息的核心抽象是资源，一个资源是一组实体的概念上的映射，而REST使用一个资源标识符来标识组件之间交互所涉及到的特定资源。REST连接器提供了访问和操作资源的值集合的一个通用接口。在这里所有的操作中，它们都是无状态的，这样就不必在多个请求之间保存状态，不必考虑上下文的约束，从而允许服务器组件迅速释放资源，并进一步简化其实现，从而提高系统的可伸缩性。

现在我们就一个简单的示例演示下REST。
在我们的示例中以Javascript为客户端，与HTTP服务器体系架构配合工作，使用URL作为资源标识，并将HTTP作为连接器接口。
客户端的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

	function rest() {
                var XMLHttpFactories = [
                    function () {return new XMLHttpRequest()},
                    function () {return new ActiveXObject("Msxml2.XMLHTTP")},
                    function () {return new ActiveXObject("Msxml3.XMLHTTP")},
                    function () {return new ActiveXObject("Microsoft.XMLHTTP")}
                ];
 
                var xmlhttp = false;
                for (var i = 0; i < XMLHttpFactories.length; i++) {
                    try {
                        xmlhttp = XMLHttpFactories[i]();
                    } catch (e) {
                        continue;
                    }
                    break;
                }
                // 建立XMLHttpRequest对象
                this.xmlhttp = xmlhttp;
            }
 
            rest.prototype._get = function(url, data) {
                var xmlhttp = this.xmlhttp;
                xmlhttp.open ('GET', url + "&" + data, false);
                xmlhttp.send (null);
                return xmlhttp.responseText;
            };
 
            rest.prototype._post = function(url,  data) {
                var xmlhttp = this.xmlhttp;
                xmlhttp.open ('POST', url, false);
                xmlhttp.setRequestHeader ("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
                xmlhttp.setRequestHeader ("Content-Length", data.length);
                xmlhttp.send (data);
                return xmlhttp.responseText;
            };
 
            rest.prototype.get = function(url, data) {
                url = url += "?op=GET";
                return this._get(url, data);
            }
 
            rest.prototype.post = function(url,  data) {
                url = url += "?op=POST";
                return this._post(url, data);
            }
 
            rest.prototype.put = function(url, data) {
                url = url += "?op=PUT";
                return this._post(url, data);
            };
 
            rest.prototype.del = function(url, data) {
                url = url += "?op=DELETE";
                return this._get(url, data);
            };
 
            function t() {
                var restobj = new rest();
 
                document.write (restobj.get("http://localhost/test/service.php", "content=GET Content"));
                document.write (restobj.post("http://localhost/test/service.php", "content=POST Content"));
                document.write (restobj.put("http://localhost/test/service.php", "content=PUT Content"));
                document.write (restobj.del("http://localhost/test/service.php",  "content=DELETE Content"));
            }
 
            t();

如上所示，我们在客户端创建XMLHttpRequest对象，并且通过这个对象实现通过HTTP对服务器的操作GET、PUT、POST和DELETE以检索和修改资源。HTTP则把对每一个资源的操作都限制在了4个之内：GET、POST、PUT和DELETE。HTTP的这四个方法分别对应我们常见的CRUD操作，具体对应关系如下 ：
C(Create) <==> POST
R(Read/Retrieve) <==> GET
U(Update) <==> PUT
D(Delete/Destroy) <==> DELETE
虽然HTTP提供了这4个方法，但是在某些情况下，PUT和DELETE方法是不可用的，于是我们在这里使用GET方法和POST方法进行替代。另外，在JS操作时，需要注意同源策略（Same Origin Policy，SOP），考虑跨域的问题。
服务端代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

<?php
/**
 * REST后台程序简单示例
 */
class Resource {
    public function get($request) {
        echo 'content=', $request['content'], "; get resource Successful<br />";
    }
 
    public function post($request) {
        echo 'content=', $request['content'], "; post resource Successful<br />";
    }
 
    public function put($request) {
        echo 'content=', $request['content'], "; update resource Successful<br />";
    }
 
    public function delete($request) {
        echo 'content=', $request['content'], "; delete resource Successful<br />";
    }
}
 
$request = $_REQUEST;
$op = $request['op'];
$op = strtolower($op);
 
$ops = array(
    'get' => 1,
    'post' => 1,
    'put' => 1,
    'delete' => 1,
        );
 
if (!isset($ops[$op])) {
    die('input error!');
}
 
$resource = new Resource();
$resource->$op($request);
 
 
?>

如上所示，是我们提供REST数据的服务器端的代码。这里只是简单的应答请求，输出标识内容。
以上就是我们这个示例的全部了，在这个示例中，我们的整体架构是基于最简单的客户端/服务器模式，客户端使用Javascript，以Ajax实现。我们不需要使用PHP之类的语言生成客户端的页面，所有的客户端的工作都交给Javascript去做,包括从服务器端读取数据，生成页面内容，页面布局等等。在服务器端，我们需要做的是提供资源，针对客户端的请求返回对应的资源，此时的服务器是无状态的。客户与服务器之间的数据交换不依赖于服务器，由客户端来维护状态。

另外：REST只是一种体系架构风格，它并没有改变服务器，它改变的是我们的编码风格。

]]> https://www.phppan.com/2010/10/ajax-rest/feed/ 0 执行ajax加载的页面中包含的javascript https://www.phppan.com/2009/11/ajax-javascript-onload/ https://www.phppan.com/2009/11/ajax-javascript-onload/#comments Tue, 17 Nov 2009 04:05:39 +0000 http://www.phppan.com/?p=387 执行ajax加载的页面中包含的javascript

1、【使用iframe】
在需要加载的页面中添加一个iframe，如下

1

<iframe style="display:none" onload="javascript: close_ticket_onload()"></iframe>

onload中添加你所要调用的函数，如果加载的页面在弹出层中，此函数需要放在弹出此层的父页面！

2、【使用eval】
如果使用innerHTML填充XMLHttp取得的数据。如：xxx.innerHTML=XMLHttp取得的数据
这样是不会执行JS，添加eval方法就ok了：如：xxx.innerHTML=eval(返XMLHttp取得的数据);
其它细节请移步：http://blog.zol.com.cn/881/article_880154.html

]]> https://www.phppan.com/2009/11/ajax-javascript-onload/feed/ 0 Ajax总结 https://www.phppan.com/2009/09/ajax-summary/ https://www.phppan.com/2009/09/ajax-summary/#comments Sat, 26 Sep 2009 07:08:35 +0000 http://www.phppan.com/?p=237 在工作中用了Ajax N多次了，也看过一些相关方面的书籍，也算是认识了它，但是一直没有认真总结和整理过相关的东东，失败！
近有闲情，将之总结如下：

【名称】
Ajax是Asynchronous JavaScript and XML(以及 DHTML 等)的缩写。
详情请移步Ajax: A New Approach to Web Applications

【原理】
简单一些，就是通过使用XmlHttpRequest对象向服务器发送异步请求，获取返回的数据，并使用Javascript和DOM操作页面内的元素，从而达到改变页面内容的目的。
其中XmlHttpRequest对象是关键，因为它支持异步请求。XMLHttpRequest是完全用来向服务器发出一个请求的。它所包含的方法和属性如下所示：
方法：
●abort() 导致当前正在请求被取消
●getAllResponseHeaders() 返回一个字符串，包含氖 响应标头的名称和值
●getResponseHeader(name) 返回指定的响应标头的值
●open(method, url, async, username, password) 设置请求的方法和目标URL。请求可以声明为同步的（可选），也可以给需要基于窗口谁的请求而提供用户名和口令（可选）
●send(content) 发起带有指定内容（可选）的请求
●setRequestHeader(name, value) 利用指定的名称和值，设置一个请求标头

属性：
●onreadystatechange 指派在请求的状态发生变化时所使用的事件处理程序
●readyState 一个整数值，指示请求的状态如下：
0—-未初始化
1—-正在加载
2—-已加载
3—-交互
4—–完成
●responseText 在响应里所返回的内容
●responseXML 如果内容是XML，就根据内容而创建XML DOM
●status 从服务器所返回的响应状态码。例如：200表示成功，404表示未找到，参考HTTP规范
●statusText 响应所返回的状态文本消息

对于此对象其它介绍请移步：XMLHttpRequest概述

【所包含的技术】
· 基于XHTML和CSS标准的表示；
· 使用Document Object Model进行动态显示和交互；
· 使用XMLHttpRequest与服务器进行异步通信；
· 使用JavaScript绑定一切；
· 使用XML和XSLT;交换和操作数据。
以上的技术都是一些广泛使用了的技术，都属于比较旧的技术，ajax是这几种技术的结合体。

【简单实例】

 
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript">
            function ajax() {
                var xmlHttp;
				//	 依据对象判断，而不是依据浏览器
                if(window.XMLHttpRequest)                {
                    xmlHttp=new XMLHttpRequest();//mozilla浏览器
                }else if(window.ActiveXObject){
                    try{
                        xmlHttp=new ActiveXObject("Msxmlx2.XMLHTTP");   //IE老版本
                    }catch(e){}
                    try{
                        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); //IE新版本
                    }catch(e){}
 
                    if(!xmlHttp){
                        window.alert("不能创建XMLHttpRequest对象实列");
                        return false;
                    }
                }
 
                if (!xmlHttp) {
                    alert("创建XMLHttpRequest对象失败！");
                    return false;
                }
 
                xmlHttp.open('POST', 'index.php?get_a=2&get_b=3', false);
     xmlHttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded;charset=UTF-8;');
                xmlHttp.send("post_a=1&post_b=2");
                xmlHttp.onreadystatechange = function() {
                    alert(xmlHttp.readyState);
                }
                if(xmlHttp.readyState == 4){    //判断对象状态
                    var content_obj = document.getElementById("content");
                    content_obj.innerHTML = "正在处理数据...";
                    if(xmlHttp.status == 200){  //信息已经成功返回，开始处理信息
                        var returnStr = xmlHttp.responseText;
                        content_obj.innerHTML =  returnStr;
                    }else{  //页面不正常
                        content_obj.innerHTML = "您所请求的页面存在异常！";
                    }
                }
            }
 
 
        </script>
    </head>
    <body>
        <input type="button" value="ajax" onclick="ajax();" />
        <div id="content">ajax内容显示区</div>
    </body>
</html>

切记：当发起一个POST请求时，需要对报头 Content-type（内容类型）进行设置。这样，服务器就知道如何来处理上传的内容。如果要模拟通过HTTP协议的POST方式来发送表单，则应将内容类型设置为application/x-www-form-urlencoded。

【优点】

●页面无刷新，用户体验好；
●异步，不打断用户操作，响应速度快；
●“按需取数据”，减少冗余请求，减轻服务器负担；
●基于标准化的并被广泛支持的技术，无需额外的插件；
●可以使数据和表现分离；

【存在的问题】
●一些设备还不支持
●开发成本提高
●使back按钮失效，用户操作后无法返回；
●对流媒体支持没有flash之流好；
●对搜索引擎不友好
●破坏程序的异常机制
●存在一些安全问题，暴露了一些程序接口和数据逻辑

]]> https://www.phppan.com/2009/09/ajax-summary/feed/ 0