分类为 "Ajax" 的存档

通过JSONP实现完美跨域

以前我经常在博客说JSONP,例如我的WordPress天气插件就是通过JSONP来调用的天气数据,今天就说说通过JSONP实现跨域的应用~

什么是JSONP

JSONP即JSON with Padding。由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名、协议、端口)的资源。如果要进行跨域请求,我们可以通过使用 html的script标记来进行跨域请求,并在响应中返回要执行的script代码,其中可以直接使用JSON传递javascript对象。这种跨域的通讯方式称为JSONP。

对于上面的解释,我们可以简单这样理解:JSONP就是可以通过JavaScript文件进行跨域通讯的方式,例如:现在各大网站风靡的搜索提示,搜狗云输入法
注意:JSONP服务器端代码需要充分做好安全措施。
阅读更多…

2010年6月11日

使用hash来实现Ajax前进后退

Ajax应用中容易导致浏览器的前进后退按钮失效,不产生前进后退功能,在本文中断桥残雪就通过改变location.hash值来解决Ajax过程中导致的浏览器前进后退按键失效的问题,此方法兼容IE6+,Firefox,chrome,Safari,Opera等浏览器。

在去年断桥残雪已经写了一篇使用iframe来解决Ajax前进后退的方法,也提到了通过改变hash的方法来解决这个问题,这也是比较方便的方法,而使用iframe实现Ajax前进后退可以在不改变浏览器地址栏地址的前提下通过iframe地址的变化来“欺骗”浏览器产生前进后退,hash的方法则是直接改变浏览器地址栏地址,从而使浏览器产生前进后退。

hash导致浏览器产生前进后退原理

浏览器URL的hash值,指的是URL地址之后的#hash部分,我们可以通过JavaScript的location对象的location.hash方法来获得或者改变,但是IE中,不能设置,好像是IE中只能通过连接来实现hash的改变,不过我们可以通过jQuery插件hashchange中的$.locationHash函数来解决这个问题。

比如一个页面的地址是:http://www.js8.in/#top,那么这个页面的location.hash=”#top”,如果要改变这个地址的hash,可以给location.hash赋值,如:location.hash=”#home”,在IE下可以使用hashchange函数中$.locationHash(hash)给hash赋值。在日常我们常见的使用hash应用中,hash值使用最多的方式是 “返回顶部” 功能。
阅读更多…

2010年1月26日

用document.domain+iframe实现Ajax跨子域

Ajax跨域一直是个比较麻烦的问题,例如:断桥残雪在一个项目中使用了open打开一个跟父窗口不同域名的新页面,结果子窗口就不能传值给父窗口了;再如:我在www.2fool.cn下不可以获取love.2fool.cn域名下的页面内容。浏览器的跨域限制是为了安全,可是当我们想要在一个域名下请求另外一个域名的内容的时候就感觉不那么爽了。

我在WordPress天气插件滔滔API接口处理上都使用了JSONP的方法来实现的跨域。而今天我要通过使用JS的document.domain和iframe来解决Ajax跨子域的问题

原理

通过给主页面跟请求页面设置相同的document.domain来,欺骗浏览器,达到Ajax跨子域的效果,此方法在IE,chrome,Firefox,Safari,Opera下测试通过。

缺点:无法实现不同主域名之间的通讯。并且当在一个页面中还包含有其它的iframe时,会产生安全性异常,拒绝访问。
阅读更多…

2010年1月9日

Wordpress Follow5 插件开发日记—插件后台Ajax应用及jQuery的使用

昨天写了一篇文章说自己已经写了一个Follow 5的PHP类(文章链接:写了一个Follow5 API的PHP类),而昨天趁着空闲的时间试着写了一下WordPress的Follow5的插件,并且与我之前写的一天一句的WordPress插件统一,假如那天Follow5被和谐了,我的数据还是存在我的数据库的,那样子方便管理,加上Follow5支持QQ发送消息,就是很强大啦~呵呵
由于之前自己开发过断桥残雪爱墙WordPress插件,所以我开始写的是轻车熟路,可是最后我写到发布消息的时候,总是刷新插件后台的页面,感觉很是不爽,就像办法实现Ajax,那样子用户体验会好点的,可是怎样实现WordPress插件后台中的Ajax还是一个难题~

Follow5 WordPress plunin 页面未美化版

Follow5 WordPress plunin 页面未美化版

开始试用了下传入到另一个Ajax的php页面Ajax.php可是不行,因为我要用到get_option函数,而这个函数需要引人一些wp的函数类,还是手动写数据库吧,于是引人了wp-config.php显示错误

Call to undefined method stdClass::set_prefix()

实在没有办法了,这个问题一直困扰着我下午,后来下班的时候找到了一篇文章说是使用在插件中使用Ajax的方法,说是使用wp内置的admin-ajax.php,晚上回家仔细的阅读,今天早上早早的来到公司试用了一下这个方式,还是不行!上了WP的官方找到了一个在“Ajax on the Administration Side”使用Ajax的方法,也是不行。

WordPress插件后台Ajax解决方法

后来我在百度找到了答案,看来百度也不是无用的!呵呵~表扬一下~
方法很简单,我这里稍微说明一下就可以了~

add_action(’init’, ‘wyq_ajax’);
function wyq_ajax(){
if($_POST["ajax"){
echo $_POST["what"];
die();//通过die()来防止下面的代码运行
}
}

阅读更多…

2009年11月25日

关于Ajax在浏览器中产生前进后退的实现方法

关于Ajax在使用中要使浏览器产生前进后退的方法,网上比较多的方法有两种:一是采用hash值的方式,这是我们在地图preview版中使用的方法(采用jQuery的history插件);二是使用iframe的方法,目前百度地图、Google地图采用。为使我们以后的mymap方便引用到博客等网页内容中去,并且给地图添加复制链接的方法,我们决定把地图中Ajax在浏览器产生前进后退的方法改变为iframe的方法。

实现的机制

主要使用的两个html:index.html,history.html(iframe src地址)。
主要代码参考index.html以及history.html的js部分:

现在说说实现的方式

Index.html中代码解释:
wHistory.init();
给body插入iframe跟一个表单(主要用于Safari浏览器、或者其他特殊使用,比如复制地址方面,直接取值input的value即可,不需要处理,而取iframe的src还要进行字符串的处理)

判断是否为Safari浏览器,如果是则特殊处理一下,根据不同的浏览器定义main函数

Callback函数处理返回的信息。
阅读更多…

2009年10月30日

断桥残雪爱墙系统上线

断桥残雪爱墙上线,本系统采用phpwall的数据格式,QQ 爱墙皮肤,jquery框架,php与js为作者自己写的,采用了facebox、与本人改写的pager插件,其中pager插件明天放出改写版本~
程序全部为Ajax,根据来访者屏幕大小自定义页面宽度,更好的增加了用户体验,用户发布完祝福之后,可以通过复制链接发送给好友,与好友分享~是一个轻量级的php+mysql爱墙系统~
欢迎大家测试、分享,地址:http://love.2fool.cn

爱墙

爱墙

2009年9月23日