16
2013-01

AJAX跨域访问

  Ajax同步请求我们已经司空见惯了,每天复制那段代码岂止n次。但AJAX跨域不能访问,我想没有亲自遇到这个问题的人,可能根本就不理解。

  刚刚做了个呼叫中心的项目,大部分操作需要ajax跨域访问,于是成就了一段痛苦的记忆。

  现在我给出一个例子,让大家体会一下什么是跨域访问。

  首先找到一个有返回值的网址,用于ajax请求(例如:http://www.shiyayong.cn)。

image

  为了简便起见,我封装了个AJAX文件代替Ex

  t的ajax功能,demo源代码附在文章最后。这个demo只是简单实现,目的只是让大家对AJAX不能跨域访问有一个感性的认识。

<html >
      
<head>
      
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      
<title>ajax_test</title>
      
<script type="text/javascript" src="Ajax.js"></script>
      
<script type="text/javascript">
      
function send (){
      
Ajax.get('1.html','',function (data){
      
document.getElementById('result').innerHTML = data;
      
});
      
}
      
function send1 (){
      
Ajax.get('http://117.74.74.76:32766/cti/lt_agent_login.php?agentid=8002&interface=SIP/8001&queue=1000','',function (data){
      
document.getElementById('result').innerHTML = data;
      
});
      
}
      
</script>
      
</head>
      
<body>
      
<input type="button" value="测试" onclick="send();" />
      
<input type="button" value="测试1" onclick="send1();" />
      
<br />
      
<h1>结果显示如下:</h1>
      
<div id="result"></div>
      
</body>
      
</html>

  本域访问是可以的,但是跨域访问就会提示拒绝访问:

图片7.png

图片8.png


  ajax是通过XMLHttpRequest对象来进行数据的交互,而浏览器出于安全考虑,不允许js代码进行跨域操作。浏览器对于跨域名的判断非常严格,不同的子域名,或者相同域名的不同端口,都会被认作是不同的域名,我们不能向它们的资源发出AJAX请求。

  网上的解决方案也都是转来转去没什么让人出奇的,总结如下:

  1、 使用domain属性只能实现AJAX跨子域访问;

  2、 iframe需要双方服务器请求和被请求页面都要做轮询监听location对象的hash属性;

  3、 使用script标记则要求被访问数据格式为js可调用的变量或函数;

  4、 使用flash调用需要被请求服务器根目录有crossdomain.xml文件;

  5、 使用jsonp需要被请求服务器接受地址加回调函数参数和返回json数据;

  6、 Ajax请求本地的php,由php通过fopen完成跨域请求;

  7、 设置本域apache服务器的反向代理。

  显然前5种都不适合,后两种能实现。

  6的php代码如下:

//test.php?url=http://117.74.74.76:32766/cti/lt_agent_login.php?agentid=8002&interface=SIP/8001&queue=1000
      
$url = isset ( $_GET['url'] ) ? trim ( $_GET['url'] ) : '' ;
      
if($url){
      
$fp = fopen($url,'rb');
      
$data='';
      
while(!feof($fp)){
      
$data.=fread($fp,1024);
      
}
      
echo $data;
      
}
      
echo '';

  7的apache配置如下:

  ;加载以下两个模块

  LoadModule proxy_module modules/mod_proxy.so

  LoadModule proxy_http_module modules/mod_proxy_http.so

  ;在文件最后增加如下代码(cti_ivr文件夹是虚拟的,不需要创建;10.1.78.97修改为CTI的IP,共3处都要改哦)。

ProxyRequests off
        
ProxyPass /cti/smartvox/cti_ivr http://10.1.78.97:32766/cti
        
ProxyPassReverse /cti/smartvox/cti_ivr http://10.1.78.97:32766/cti
        
<proxy http://10.1.78.97:32766/cti>
        
AllowOverride None
        
Order Deny,Allow
        
Allow from all
        
</proxy>

  最终采用了7的方案。



除非注明,文章均为史亚永原创,欢迎转载!转载请注明本文地址,谢谢。

本文地址:http://www.shiyayong.cn/post/104.html

评论列表:

9  一格电  2013-1-17 22:19:52 回复该留言  IP:119.179.249.11
亲,我也是非程序人员,我也属于看不懂人群中的一员,有空的话写点博客教程之类的,那样的话我也许能插上话,呵呵
  茶馆老板  2013-1-18 9:41:36 回复该留言  IP:124.205.133.34
视频教程还是语音教程啊,哈哈
  一格电  2013-1-18 10:18:08 回复该留言  IP:221.1.224.165
哈哈,都行,我没意见
一格电
茶馆老板
一格电
8  三号博客  2013-1-17 17:24:06 回复该留言  IP:121.15.58.60
主题不错哦,是原创的么? 另外为什么标题有点模糊,莫不是我那啥多了- -
  茶馆老板  2013-1-17 19:34:12 回复该留言  IP:220.181.73.124
是啊,集合了好多网站的优点呢,那是我用了阴影的效果
  三号博客  2013-1-17 19:45:26 回复该留言  IP:121.15.58.60
原创给力! 支持原创!嘿嘿当然也支持开源。。
  茶馆老板  2013-1-17 19:46:46 回复该留言  IP:220.181.73.124
你让我公开我这个模板吗?这个模板我已经在zblog2.0的论坛上发布了
  三号博客  2013-1-17 19:48:35 回复该留言  IP:121.15.58.60
额。。 原来是zblog 我还以为是wordpress 呢,我说怎么没见过 - -
  茶馆老板  2013-1-18 9:41:03 回复该留言  IP:124.205.133.34
是啊,我这个是zblog2.0的,不过wordpress也可以用这个模板
茶馆老板
三号博客
茶馆老板
三号博客
茶馆老板
三号博客
7  夏日博客  2013-1-17 13:30:18 回复该留言  IP:175.25.240.8
简单的AJAX应用还会,这个还真没接触过。
  茶馆老板  2013-1-17 19:33:46 回复该留言  IP:220.181.73.124
亲,我知道你是高手,嘿嘿
茶馆老板
夏日博客
6  sunhaiwei.net  2013-1-17 7:32:59 回复该留言  IP:210.22.136.170
不错~~~这个我要看看~~
  茶馆老板  2013-1-17 9:15:18 回复该留言  IP:124.205.133.34
看看好好学习哦,实质性的用一下
茶馆老板
sunhaiwei.net
5  小清新  2013-1-16 23:42:15 回复该留言  IP:175.8.22.220
异步与同步
  茶馆老板  2013-1-17 9:13:45 回复该留言  IP:124.205.133.34
嘿嘿,你也懂啊?莫非也是同行?
  小清新  2013-1-17 14:35:53 回复该留言  IP:175.0.175.194
必须的
  茶馆老板  2013-1-17 19:34:33 回复该留言  IP:220.181.73.124
那以后多多交流哦,嘿嘿
茶馆老板
小清新
茶馆老板
小清新
4  单钰彤  2013-1-16 23:06:21 回复该留言  IP:182.90.49.146
天书。。。又见天书!
  茶馆老板  2013-1-17 9:13:22 回复该留言  IP:124.205.133.34
好吧,我承认非程序人员看不懂
茶馆老板
单钰彤
3  奇爱谷博客  2013-1-16 21:46:23 回复该留言  IP:122.70.96.152
茶馆兄。。。?网络上到处是你的身影啊!又来到你的博客了呢!O(∩_∩)O~
  茶馆老板  2013-1-17 9:13:06 回复该留言  IP:124.205.133.34
真的想让网络里面布满我的身影,哈哈
茶馆老板
奇爱谷博客
2    2013-1-16 16:58:17 回复该留言  IP:117.22.7.229
我曾经给某汽车门户网站新添功能的时候,遇到了JQuery.Ajax跨域。实例就是CMS和dealer部分不再一台服务器,最终是通过Json这种数据格式来解决的。
  茶馆老板  2013-1-16 17:12:09 回复该留言  IP:124.205.133.34
是啊,外部数据的调用,你也搞php的啊?
    2013-1-16 17:29:03 回复该留言  IP:117.22.7.229
我java
  茶馆老板  2013-1-17 9:12:44 回复该留言  IP:124.205.133.34
好啊,那你教教我吧,哈哈,多交流下
茶馆老板
追
茶馆老板
追
1  IFan  2013-1-16 16:10:24 回复该留言  IP:60.221.240.102
每天都更新很快啊,都写的蛮不错,学习了。
  茶馆老板  2013-1-16 16:35:18 回复该留言  IP:124.205.133.34
php涉及到的内容很多,这个是ajax操作,也很强大的
茶馆老板
IFan

发表评论:

(设置个性头像)

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

无觅相关文章插件,快速提升流量