用YUI实现跨域提交

     主题词：YUI AJAX 跨域

     一、前言

     AJAX的POST及GET方式提交相信已经被人们熟知了，且应用面非常广，在同一工程中实现起来非常简单。由于项目的需要在本项目中跨域是很正常的现象，如何实现在同一项目的不同域中实现提交就摆在我们面前了。  

     二、方法分析

     1.ajax+webservice

     这是一种比较常用的模式。WEBSERVICE中返回的是XML结构,ajax直接对XML进行操作.

     2.ajax+wcf

     fm3.0的中新增的wcf，对以上的模式进行了优化，允许返回json形式，这种形式跟今天探讨的理论可能是一样的,我对wcf也是刚刚学习内部机理还不是太了解,不敢妄加断言.

     2.内嵌js实现方式

     这是今天要讨论的。

     众所周知，在浏览器中css和JS是允许跨域调用的，因为这种都是资源性文件，w3c是不会限制他们跨域的。这种方式是利用这种方式，在服务器端生成JSON代码，页面以调用JS的形式调用这个服务器端生成的JSON页面，以实现提交及接收返回值。

     YUI中具体的实现方法可以参见YAHOO开发者社区。

     三、YUI实现

     为了比较实现方式，利用YUI制作了本域内AJAX提交及跨域提交两部分。

     1. 制作HTML的调用页面

         调用YUI基础JS:

<!--共通调用-->
<script type="text/javascript" src="JS/yahoo-min.js"></script>
<!--传统AJAX提交-->
<script type="text/javascript" src="JS/event-min.js"></script>
<script type="text/javascript" src="JS/connection-min.js"></script>
<!--跨域提交-->
<script type="text/javascript" src="JS/get-min.js"></script>

         JS调用内容: 

<script type="text/javascript">
       //ajax成功处理
        var handleSuccess = function(o){
            alert(o.responseText);
        };
        //javascript成功处理
        var handleJsSuccess = function(o){
            alert(data[0].mess);
        };
        //失败处理
        var handleFailure = function(o){
            alert('connect service failt');
        };
        //传统ajax callback
        var callback =
        {
          success:handleSuccess,
          failure:handleFailure
        };
        //传统ajax post
        function makeRequest_Ajax_Post(){
            var postData = "a=b";
            var request = YAHOO.util.Connect.asyncRequest('POST', "../Ajax.aspx", callback, postData);
        }
        //传统ajax get
        function makeRequest_Ajax_Get(){
            var request = YAHOO.util.Connect.asyncRequest('GET', "../Ajax.aspx?b=c", callback);
        }
        //跨域提交
        function makeRequest(){
            //此处url需要改为不在本域的地址,该页需要返回json数据
            var request = YAHOO.util.Get.script("http://localhost:8313/yui_post_get_host/Json.aspx?a=b",
                                            { onSuccess: handleJsSuccess, 
                                              onFailure: handleFailure
                                            });
        }
    </script>

          调用控件

<input id="btnAjaxPost" type="button" onclick="makeRequest_Ajax_Post();" value="传统AJAX_POST提交" />
        <input id="btnAjaxGet" type="button" onclick="makeRequest_Ajax_Get();" value="传统AJAX_GET提交" />
        <input id="btnJson" type="button" onclick="makeRequest();" value="跨域提交" />

 

     2.服务器端JSON生成:不分语言，不分平台。实现的方法很多,只要符合JSON的格式就可.

        简单JSON示例:

        var data = [{'mess':'ok'}];

     

     四、总结

     YUI是我比较喜欢的框架，原来用过一阵的EXT，感觉对页面的编辑上有些不自由。我个人感觉YUI从上手和自由度上要好一些，EXT在集成度上，快速实现界而UI上要好一些。

 

     五、源码下载

     https://files.cnblogs.com/delphiren/yui_post_get_host.rar

 

     六、参考资料

     http://developer.yahoo.com/yui/   YAHOO YUI社区

     http://json.org/json-zh.html    json介绍