博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
使用jQuery和YQL,以Ajax方式加载外部内容
阅读量:4605 次
发布时间:2019-06-09

本文共 4559 字,大约阅读时间需要 15 分钟。

我们来看看怎样使用jQuery,以Ajax方式加载外部(其他域上)的内容。这里的所有代码都可以从下载,也可以在中获取,因而不用复制粘贴了。

OK,Ajax通过jQuery是很容易做到的,大多数解决方案就几行代码:

$(document).ready(function(){
$('.ajaxtrigger').click(function(){
$('#target').load('ajaxcontent.html');});});

查看就可以看到结果。

这会将所有带ajaxtrigger类的元素转换成触发器来加载ajaxcontent.html,并在ID为target的元素中显示其内容。

这样不好,因为多数时候这意味着人们将使用<a href="#">click me</a>这种空链接,但这不是我们现在要讨论的问题。我在撰写一篇更长的文章,其中会提到增强Ajax可用性和可访问性的所有技巧。

要使其能够重用可以像下面这样:

$(document).ready(function(){
$('.ajaxtrigger').click(function(){
$('#target').load($(this).attr('href'));return false;});});

这样,你可以使用<a href="ajaxcontent.html" class="ajaxtrigger">load some content</a>来加载内容,而所有JavaScript代码都可以重用。

查看就能看到结果。

我要解决的问题发生在点击演示页面中的第二个链接时:加载外部内容失败,因为Ajax不允许跨域加载内容。这意味着,<a href="http://icant.co.uk/" class="ajaxtrigger">see my portfolio</a>加载Ajax内容将失败,而且没有提示。尽管你无数遍地点击这个链接,但是什么都不会发生。避免出现这种情况的一个方法,是简单地让浏览器加载该文档,但前提是用户真的想加载外部链接。

查看就能看到结果。

$(document).ready(function(){
$('.ajaxtrigger').click(function(){
var url = $(this).attr('href');if(url.match('^http')){
return true;} else {
$('#target').load(url);return false;}});});

使用PHP代理

如果浏览Web,你会发现大多数的解决方案是PHP(或其他语言)代理脚本。比如,下面是的proxy.php代理脚本:

然后可以稍作修改使用这个脚本():

$(document).ready(function(){
$('.ajaxtrigger').click(function(){
var url = $(this).attr('href');if(url.match('^http')){
url = 'proxy.php?url=' + url;}$('#target').load(url);return false;});});

用这样的代理脚本依旧是个很蠢的办法,因为不进行过滤,人们就可以使用这个脚本来加载你服务器上的任何文档,并将其内容显示在自己的页面中(用firebug来重命名链接,就能看到你服务器上的任何内容),他们可以使用它将邮件群发脚本插入文档,或者简单地使用它来重定向到任何其他Web资源,并且让你的服务器看上去就是发送请求的那个服务器。垃圾邮件制造者就有了施展才华的地方了。

使用白名单和过滤代理

因而,要想使用代理,就得确保有被认可的URI的白名单。此外,除了另一个HTML文档的主体,其他的都除去比较好。另一个好办法是过滤脚本。这会避免显示错误和执行你本不想在网站上执行的脚本。

就像下面这样:

]*>/msi','',$output);$content = preg_replace('/.*/msi','',$content);$content = preg_replace('/
]*>/msi','',$content);$content = preg_replace('/[r|n]+/msi','',$content);$content = preg_replace('/<--[Ss]*?-->/msi','',$content);$content = preg_replace('/
]*>[Ss]*?/msi','',$content);$content = preg_replace('/
]*>[Ss]*?/msi','',$content);$content = preg_replace('/
/msi','',$content);echo $content;} else {
echo 'Error: URL not allowed to load here.';}?>

使用YQL的纯JavaScript解决方案

但是,如果没有权利访问服务器,或者你只想使用JavaScript,怎么办?不用担心,这是可以做到的。借助可以加载任何HTML文档,并以JSON格式返回。jQuery具有加载JSON的好接口,因此与YQL一起使用就可以达到我们的目的。

从YQL获取HTML很容易,使用下面语句即可:

select * from html where url="http://icant.co.uk"

YQL还可以完成下面一些事:

  • 加载并清理HTML文档
  • 使用HTML Tidy运行HTML文档来删除不好的标记
  • 缓存HTML
  • 只返回HTML的主体内容,因而除内联样式外不需处理其他样式

数据输出格式可以是XML或JSON。如果为JSON定义了回调参数,就表明要使用JSON-P,所有HTML都会保存在一个JavaScript对象中——这不适合重组。

foo({
"query":{
count",created",lang",updated",uri","results":{
"body":{
"div":{
id",div",h1 - everything Christian Heilmann"},{id","div":[{div this and me","[... and so on...]}}}}}}}});

当定义了带XML输出的回调时,会得到将HTML数据作为数组中字符串的函数调用,简单多了:

foo({
"query":{
count",created",lang",updated",uri cares...]%22"},"results":["n
n
n

icant.co.uk - everything Christian Heilmann

n... and so on ..."]});

使用jQuery的getJSON()方法,访问YQL端点,这很容易实现:

$.getJSON("http://query.yahooapis.com/v1/public/yql?"+"q=select%20*%20from%20html%20where%20url%3D%22"+encodeURIComponent(url)+"%22&format=xml'&callback=?",function(data){
if(data.results[0]){
var data = filterData(data.results[0]);container.html(data);} else {
var errormsg = '

Error: could not load the page.

';container.html(errormsg);}});

组合在一起可以得到:

$(document).ready(function(){
var container = $('#target');$('.ajaxtrigger').click(function(){
doAjax($(this).attr('href'));return false;});function doAjax(url){
// 如果它是个外部URIif(url.match('^http')){
// 调用YQL$.getJSON("http://query.yahooapis.com/v1/public/yql?"+"q=select%20*%20from%20html%20where%20url%3D%22"+encodeURIComponent(url)+"%22&format=xml'&callback=?",// 这个函数得到的数据来自成功的JSON-P调用function(data){
// 如果有数据,过滤它并呈现出来if(data.results[0]){
var data = filterData(data.results[0]);container.html(data);// 否则提示出错了} else {
var errormsg = '

Error: could not load the page.

';container.html(errormsg);}});// 如果它不是外部URI,使用Ajax的load()方法} else {
$('#target').load(url);}}// 过滤掉一些不好的东西function filterData(data){
data = data.replace(/
]*>/g,'');data = data.replace(/[r|n]+/g,'');data = data.replace(/<--[Ss]*?-->/g,'');data = data.replace(/
]*>[Ss]*?/g,'');data = data.replace(/
]*>[Ss]*?/g,'');data = data.replace(/
/,'');return data;}});

当然,这个例子还很粗糙。实际的Ajax解决方案应该考虑超时,以及未找到文档的情况。查看以获得灵感。

转载于:https://www.cnblogs.com/qianqian0313/archive/2011/12/20/2394834.html

你可能感兴趣的文章
java9系列(九)Make G1 the Default Garbage Collector
查看>>
QAQ高精度模板笔记√
查看>>
Jmeter计数器的使用-转载
查看>>
【Android笔记】入门篇02:全屏设置和禁止横屏竖屏切换
查看>>
Kubernetes的本质
查看>>
PL/SQL developer 管理多套数据库
查看>>
黑马程序员-分类(category)
查看>>
vue-cli多页面
查看>>
进程和线程
查看>>
iOS Foundation框架简介 -1.常用结构体的用法和输出
查看>>
libevent reference Mannual I
查看>>
eclipse创建Maven父子结构Maven项目
查看>>
Python 太糟糕了?开发者总结了 8 大原因
查看>>
Spring中注入基本类型
查看>>
脚本方式安装 IIS7
查看>>
Oracle password expire notices
查看>>
发现“郝茵晴”:屌丝们的社会性传播实验
查看>>
WordPress优化:为网站添加个性化缩略图标
查看>>
shell脚本分析IP归属地
查看>>
CITRIX XenAPP/TS打印管理ThinPrint.
查看>>