JavaScript 跨域访问实例

admin

写了个简单的跨域访问的例子，服务端用的PHP，其他语言类似，只要格式正确就可以了。

jsonp 跨域访问原理介绍：

JavaScript jsonp实现 跨域请求

客户端：

<html>
	<head>
		<title>php</title>
		<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
		
		<script type="text/javascript">

			// 对 jsonp 简单的封装
			// url 跨域url
			// callback 回调函数
			// args 请求的参数，可以包含要调用服务名和方法名等
			var Ajax = {
				jsonp : function(url, callback, args){

					var url = url + '?callback=' + callback;

					// 参数必须为object格式，key-value
					if(args && typeof(args) === 'object'){

						for(key in args){
							url = url + '&' + key + '=' + escape(args[key]);
						}
					}
					
					// 创建并添加script
					var script = document.createElement('script');
					script.setAttribute('src', url);
					document.getElementsByTagName('head')[0].appendChild(script); 
				}
			}

			// 回调函数
			// 当请求成功并返回时调用
			function getData(data){
				console.log(data);
			}


			//跨域调用
			var args = {};	// 参数列表
			args.controller = 'Test';
			args.action = 'a';

			// 请求（url, 回调函数， 参数列表key-value）
			Ajax.jsonp('http://localhost:8082/jsonp/index.php', 'getData', args);

		</script>
	</head>
</html>

服务端，也就是上面url的地址：

<?php
	// 服务端使用PHP，其他语言类似

	// 接收参数
	$controller = $_GET['controller'];
	$action = $_GET['action'];

	// 回调函数
	$callback =	$_GET['callback'];

	// 根据参数调用对应的服务和方法
	$c = new $controller;
	$data = $c->$action();

	// 输出 格式为  getData('此处是返回值')
	echo $callback . "('" . $data . "')";


	class Test{
		function a(){
			return 'you called me';
		}
	}

?>

 

发表评论