用js动态加载的方法代替ajax, 解决跨域处理问题

本帖最后由 evangui 于 2009-5-8 23:56 编辑

关于js的动态加载，可以参见http://www.guigui8.com/index.php/archives/168.html这篇文章。

根据第三种方式，对浏览器客户端向服务端发送请求的处理，用下面函数进行了封装.[code]function requestSvc(id, url, funcName) {
    if (typeof(funcName) == 'undefined') { funcName = 'callbackFunc'; }
    url += '&func_name=' + funcName;
    oScript = document.getElementById(id);
    var head = document.getElementsByTagName("head").item(0);
    if (oScript) {
        head.removeChild(oScript);
    }
    oScript = document.createElement("script");
    oScript.setAttribute("src", url);
    oScript.setAttribute("id",id);
    oScript.setAttribute("type","text/javascript");
    oScript.setAttribute("language","javascript");

    head.appendChild(oScript);
    return oScript;
}[/code]这个函数，在与服务端交互过程中，就表现为异步地向服务端发送get请求。并将服务端的程序输出，直接输出在页面的head标签下。
那么，可以想见，只要服务器端的请求脚本，能输出正确的js内容，那么就可以在服务端将返回的数据直接抛给页面js处理。可以模拟ajax请求，当向服务端发送请求时，在参数中传递一个js回调函数名。

在与服务端通信完成后，自动调用这个回调函数。因此本人在上面给出的requestSvc函数中，加了第3个参数，用于标识回调函数。

而服务器端，需要直接用js语句调用该函数即可。如php程序代码，可以用类似如下方式进行js函数的回调：

[php]/**
*服务端处理示例脚本
*
* @version $Id: svc_demo.php, v 1.0 2009/4/29 $
* @package systen
* @link http://www.guigui8.com/index.php/archives/133.html
*/

$func_name = isset($_GET['func_name']) ? trim($_GET['func_name']) : 'callbackFunc';
$action = isset($_GET['action']) ? trim($_GET['action']) : '';

$arr_out = array(
    'action'  => $action,
    'outParam2' =>  '22222'
);
$str_out = json_encode($arr_out);
exit_msg($func_name, $str_out);

/**
* 以js形式进行回调函数的输出，并退出服务端脚本
*
* @param string $func_name - js的回调函数名
* @param string $str_out
*/
function exit_msg($func_name, $str_out) {
    echo "$func_name('" . $str_out . "');";
    exit();
}[/php]


有了上面的处理，客户端js就可以用类似ajax的处理方式，实现异步的跨域服务端脚本调用了。下面给出调用示例：[code]var sRequestUrl = 'http://hostname/svc_demo.php?&action=test&s=' + (new Date()).getTime();
requestSvc('randomId', sRequestUrl, 'callbackDemoFunc');

function callbackDemoFunc(s) {
     eval("var oJson = " + s.toString + ";");
     alert(oJson.action);
     alert(oJson.outParam2);
}[/code]发表于http://www.guigui8.com/index.php/archives/133.html

恩，试用了下，确实可以
以后不用担心异步的跨域处理问题了

这个和jquery .ajax的JSONP是不是一样功能呢？

能否支持ie意外的其他浏览器？

呃，这个，不能进行POST。

但的确是一个好方法~我GET用这个，POST用FORM~

我前面起试了一下没有什么问题

en ,其实就类似于jquery里的jsonp了。
通过script标签来跨域获取数据，名为JSON with Padding，或者就叫JSONP。JSONP的原理很简单，但需要服务器端给予相应配合。

在不方便使用jquery的时候，倒是可以用文中的方法替代

好方法呀，帖子不要沉太快了哦