使用JQuery进行跨域请求

以上程序是今天偶然看到的,分享一下!

原文地址:  Cross-domain-request-with-jquery

当然,还有以上的那个 Demo,我直接拿过来改了下,原地址:Demo


代码如下:

$(document).ready(function(){
var container = $('#target');
container.attr('tabIndex','-1');
$('.ajaxtrigger').click(function(){
var trigger = $(this);
var url = trigger.attr('href');
if(!trigger.hasClass('loaded')){
trigger.append('<span></span>');
trigger.addClass('loaded');
var msg = trigger.find('span::last');
} else {
var msg = trigger.find('span::last');
}
doAjax(url,msg,container);
return false;
});

function doAjax(url,msg,container){
// if the URL starts with http
if(url.match('^http')){
// assemble the YQL call
msg.removeClass('error');
msg.html(' (loading...)');
$.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]);
msg.html(' (ready.)');
container.
html(data).
focus().
effect("highlight",{},1000);
} else {
msg.html(' (error!)');
msg.addClass('error');
var errormsg = '<p>Error: could not load the page.</p>';
container.
html(errormsg).
focus().
effect('highlight',{color:'#c00'},1000);
}
}
);
} else {
$.ajax({
url: url,
timeout:5000,
success: function(data){
msg.html(' (ready.)');
container.
html(data).
focus().
effect("highlight",{},1000);
},
error: function(req,error){
msg.html(' (error!)');
msg.addClass('error');
if(error === 'error'){error = req.statusText;}
var errormsg = 'There was a communication error: '+error;
container.
html(errormsg).
focus().
effect('highlight',{color:'#c00'},1000);
},
beforeSend: function(data){
msg.removeClass('error');
msg.html(' (loading...)');
}
});
}
}
function filterData(data){
// filter all the nasties out
// no body tags
data = data.replace(/<?\/body[^>]*>/g,'');
// no linebreaks
data = data.replace(/[\r|\n]+/g,'');
// no comments
data = data.replace(/<--[\S\s]*?-->/g,'');
// no noscript blocks
data = data.replace(/<noscript[^>]*>[\S\s]*?<\/noscript>/g,'');
// no script blocks
data = data.replace(/<script[^>]*>[\S\s]*?<\/script>/g,'');
// no self closing scripts
data = data.replace(/<script.*\/>/,'');
// [... add as needed ...]
return data;
}
});

(0)

相关推荐

  • 通过jquery的$.getJSON做一个跨域ajax请求试验

    (主要是留个备用,怕以后再用到自己却忘记了,所以没有太多的解释,实在看不明白的话,照着我的代码,你也试一个吧) 我后端是用php的,以下代码主要实现的一个功能就是提供一个预约登记的接口,需要传入的数据分别有:用户姓名.联系电话和地址 /*预约登记 执行 接口*/ 复制代码 代码如下: /*预约登记 执行 接口*/ case "yuyue_interface": $name = trim($_GET['name']); $phone = trim($_GET['phone']); $ad

  • jquery的ajax跨域请求原理和示例

    今天在项目中需要做远程数据加载并渲染页面,直到开发阶段才意识到ajax跨域请求的问题,隐约记得Jquery有提过一个ajax跨域请求的解决方式,于是即刻翻出Jquery的API出来研究,发 JQuery对于Ajax的跨域请求有两类解决方案,不过都是只支持get方式.分别是JQuery的 jquery.ajax jsonp格式和jquery.getScript方式. 什么是jsonp格式呢?API原文:如果获取的数据文件存放在远程服务器上(域名不同,也就是跨域获取数据),则需要使用jsonp类型.

  • 跨域请求之jQuery的ajax jsonp的使用解惑

    直接执行了error方法提示错误--ajax jsonp之前并没有用过,对其的理解为跟普通的ajax请求差不多,没有深入了解:出现了这种错误,几经调试(检查后台的代码和js部分的属性设置)还是不行,让我感觉很是意外和不解.于是,决定仔细研究下ajax jsonp的使用,并将最后测试成功的学习经验和大家分享下! 首先,贴出可以成功执行的代码: (页面部分) 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional

  • 深入理解jquery跨域请求方法

    项目中关于ajax jsonp的使用, 出现了问题:可以成功获得请求结果,但没有执行success方法 总算搞定了,记录一下 function TestAjax() { $.ajax({ type : "get", async : false, url : "ajaxHandler.ashx", //实际上访问时产生的地址为: ajax.ashx?callbackfun=jsonpCallback&id=10 data : {id : 10}, cache

  • JQuery的Ajax跨域请求原理概述及实例

    今天在项目中需要做远程数据加载并渲染页面,直到开发阶段才意识到ajax跨域请求的问题,隐约记得Jquery有提过一个ajax跨域请求的解决方式,于是即刻翻出Jquery的API出来研究,发 JQuery对于Ajax的跨域请求有两类解决方案,不过都是只支持get方式.分别是JQuery的 jquery.ajax jsonp格式和jquery.getScript方式. 什么是jsonp格式呢?API原文:如果获取的数据文件存放在远程服务器上(域名不同,也就是跨域获取数据),则需要使用jsonp类型.

  • jquery跨域请求示例分享(jquery发送ajax请求)

    jQuery中常用getJSON来调用并获取远程的JSON字符串,将其转换为JSON对象,如果成功,则执行回调函数.原型如下: jQuery.getJSON( url, [data], [callback] ) 跨域加载JSON数据. url: 发送请求的地址data : (可选) 待发送key/value参数callback: (可选) 载入成功时的回调函数主要用于客户端获取服务器JSON数据.简单示例: 服务器脚本,返回JSON数据: 复制代码 代码如下: // $.getJSON.php$

  • jquery+ajax实现跨域请求的方法

    本文实例讲述了jquery+ajax实现跨域请求的方法.分享给大家供大家参考.具体实现方法如下: 说明:这里的dataType 为  "jsonp"  :type 只能为 GET 前台请求代码如下: 复制代码 代码如下: $.ajax({  type: "GET",  url: "http://www.xxx.com/Rest/ValidAccountsExists.aspx?accounts=admin",  dataType: "j

  • jquery $.getJSON()跨域请求

    1,同一域名下和其他的请求可以是一样的 js: 复制代码 代码如下: var url="http://localhost:2589/a.ashx"; $(function(){ $.getJSON(url,function(data){ alert (data.Name); }) }); 服务器返回字符串: {"Name":"loogn","Age":23} 2,不同域名下 js: 复制代码 代码如下: var url=&qu

  • jQuery使用ajax跨域请求获取数据

    跨域是我在日常面试中经常会问到的问题,这词在前端界出现的频率不低,主要原因还是由于安全限制(同源策略, 即JavaScript或Cookie只能访问同域下的内容),因为我们在日常的项目开发时会不可避免的需要进行跨域操作,所以跨域能力也算是前端工程师的基本功之一. var webMethod = "http://localhost:54473/Service1.asmx/HelloWorld"; jQuery.support.cors = true; //之前没有加这句老是提示no tr

  • 利用JQuery和Servlet实现跨域提交请求示例分享

    原理:JavaScript的Ajax不可以跨域,但是可以通过向本地的一个Servlet发出请求,由Servlet完成跨域.再把远程的结构返回给客户端.这样Ajax就可以跨域了.在后面,再发一个PHP版本的,请大家关注啊.下面是代码 JS代码: 注意:在Post方式时,param1和param2为向远程发送的参数值,可以有多个. 复制代码 代码如下: //GET方式function reqeustCrossDomainProxyGet(){    var url = "http://www.bai

随机推荐