AJAX中的jsfiddle [英] AJAX in jsFiddle

问题描述

如何仿真的jQuery $。获得（） 从在的jsfiddle不同的域中加载数据？

  / *这不会在的jsfiddle工作。 * /
$获得（http://www.google.com，功能（数据）{...}）;
 

据我们所知，有一个限制：

  

由于浏览器的安全限制，大多数Ajax的请求都受到了同样的原产地政策;从不同的域，子域，或协议的请求不能成功地检索数据。

解决方案

我通过创建的jsfiddle小提琴只是用于测试Ajax的负载解决了这一点。它大局;一些非常简单的HTML与图像和一些副本＆mdash;你可以在这里看到：

＆LT; D​​IV CLASS =容器＆GT;     ＆LT; IMG ID =图片SRC =htt​​p://media.smashingmagazine.com/uploads/2012/01/best-of-no-150px.png/＆GT;     ＆LT; P＆gt;这帖子将帮助你了解了iOS SDK更好一点。它引导您的iOS应用程序开发的一些编排的步骤，即使你有很少或没有编程知识。它涵盖了一些主要原则和应用这些直接有用的东西和相关的：创建一个简单但功能组合应用为iPhone＆LT; / P＆GT;     ＆LT; D​​IV的风格=明确：既;＆GT;＆LT; / DIV＆GT; ＆LT; / DIV＆GT;

体{     字体-family：宋体;     颜色：＃333333;     的line-height：1.4em; } IMG {     保证金：0 0 1EM 1EM;     填充：1EM;     背景：#FFFFFF;     边界：1px的固体#eaeaea;     显示：inline-block的;     浮动：权利;         -moz-边界半径：8像素;         -webkit-边界半径：8像素;         边界半径：8像素; } 。容器 {   背景：#fafafa;   填充：1EM; }

演示的JS小提琴。

如果您使用Firebug点击的＆ldquo;导致＆rdquo;的框，你可以得到iframe的来源网址。当您复制此源URL到包含您的Ajax请求的小提琴，它会工作，因为现在是在同一个域。在这里，大局;一个示范：

＆LT; D​​IV CLASS =excontainer＆GT;     ＆LT;按钮ID =loadbasic＆GT;基本负载和LT; /按钮＆GT;     ＆LT; D​​IV ID =结果＆GT;＆LT; / DIV＆GT; ＆LT; / DIV＆GT;

体{  字体-family：宋体; } .excontainer {   填充：1EM; } 标签 {  显示：块;  宽度：100％; } p {  填充：.5em; } 一，一：访问{  颜色：＃2d9afd; } .changed {   颜色：＃ff0099; } 。突出 {   背景：#faffda; } .entered {   颜色：＃f5560a; } 。绿色 {  颜色：＃7fbf38; } .hellomouse，.clickable，#foo，#event {  光标：指针; } 按钮{  保证金底：1EM; } DIV {   保证金：1EM 0; } #foo {  显示：inline-block的; } UL {  保证金：1EM 0; } .FORM，形式，.stuff，.morestuff，stuff3 {     保证金：1EM 0;     填充：1EM;     背景：#ececec; } 输入{  字体大小：1.1em;  填充：2px的; } .placeholder {    颜色：＃ff0099;    字体重量：正常; } :: - WebKit的输入占位符{    颜色：#CCCCCC; } ：-moz-占位符{    颜色：#CCCCCC; } ：-ms输入占位符{     颜色：#CCCCCC; } ：重点:: - WebKit的输入占位符{     颜色：透明; } 。内容 {     的margin-top：5px的;     填充：1EM;     背景：#eeeeee; }

//学习jQuery AJAX // http://net.tutsplus.com/tutorials/javascript-ajax/5-ways-to-make-ajax-calls-with-jquery/ //不需要指定文件准备 $（函数（）{     //不缓存AJAX或内容将不新鲜     $ .ajaxSetup（{         缓存：假的     }）;     VAR ajax_load =＆LT; IMG SRC =HTTP：//automobiles.honda.com/images/current-offers/small-loading.gifALT =正在加载.../＆gt;中;     // load（）的函数     VAR使用loadURL =htt​​p://fiddle.jshell.net/deborah/pkmvD/show/;     $（＃loadbasic）。点击（函数（）{         $（＃结果）HTML（ajax_load）.load（使用loadURL）;     }）; // 结束 }）;

演示的JS小提琴。

How do you simulate jQuery $.get() to load data from a different domain in jsFiddle?

/* This won't work in jsFiddle. */    
$.get("http://www.google.com", function(data) { ... } );

As we know, there is limitation:

Due to browser security restrictions, most "Ajax" requests are subject to the same origin policy; the request can not successfully retrieve data from a different domain, subdomain, or protocol.

解决方案

I solved this by creating a Fiddle in jsFiddle just for testing Ajax loads. It’s some very simple HTML with an image and some copy — you can see it here:

<div class="container">
    <img id="picture" src="http://media.smashingmagazine.com/uploads/2012/01/best-of-no-150px.png" />

    <p>This post will help you get to know the iOS SDK a little better. It leads you through some choreographed steps of iOS app development, even if you have little or no programming knowledge. It covers some key principles and applies these directly to something useful and relevant: the creation of a simple but functioning portfolio app for the iPhone.</p>
    <div style="clear: both;"></div>
</div>

body {
    font-family: Arial;
    color: #333333;
    line-height: 1.4em;
}

img {
    margin: 0 0 1em 1em;
    padding: 1em;
    background: #ffffff;
    border: 1px solid #eaeaea;
    display: inline-block;
    float: right;   
        -moz-border-radius: 8px;
        -webkit-border-radius: 8px;
        border-radius: 8px;

}

.container {
  background: #fafafa;  
  padding: 1em;        
}

Demo on JS Fiddle.

If you use Firebug to click on the “result” frame, you can get the source URL of the iframe. When you copy this source URL into the Fiddle containing your Ajax request, it will work because now it is on the same domain. Here’s a demonstration:

<div class="excontainer">
    <button id="loadbasic">basic load</button>
    <div id="result"></div>

</div>

body {
 font-family: Arial;   
}

.excontainer {
  padding: 1em;    
}

label {
 display: block;
 width: 100%;   
}

p {
 padding: .5em;   
}

a, a:visited {
 color: #2d9afd;   
}

.changed {
  color: #ff0099;   
}

.highlight {
  background: #faffda;   
}

.entered {
  color: #f5560a;
}

.green {
 color: #7fbf38;   
}

.hellomouse, .clickable, #foo, #event {
 cursor: pointer;   
}

button {
 margin-bottom: 1em;   
}

div {
  margin: 1em 0;   
}

#foo {
 display: inline-block;   
}



ul {
 margin: 1em 0;   
}

.form, form, .stuff, .morestuff, stuff3 {
    margin: 1em 0;
    padding: 1em;
    background: #ececec;
}

input {
 font-size: 1.1em;
 padding: 2px;    
}

.placeholder {
   color: #ff0099;  
   font-weight: normal; 
}

::-webkit-input-placeholder {
   color: #cccccc;
}

:-moz-placeholder {  
   color: #cccccc;  
}

:-ms-input-placeholder {
    color: #cccccc;
}

:focus::-webkit-input-placeholder {
    color:transparent;
}

.content {
    margin-top: 5px;
    padding: 1em;
    background: #eeeeee;     
}

// learn jquery ajax 
// http://net.tutsplus.com/tutorials/javascript-ajax/5-ways-to-make-ajax-calls-with-jquery/

// no need to specify document ready

$(function(){
    // don't cache ajax or content won't be fresh
    $.ajaxSetup ({
        cache: false
    });
    var ajax_load = "<img src='http://automobiles.honda.com/images/current-offers/small-loading.gif' alt='loading...' />";

    // load() functions
    var loadUrl = "http://fiddle.jshell.net/deborah/pkmvD/show/";
    $("#loadbasic").click(function(){
        $("#result").html(ajax_load).load(loadUrl);
    });

// end  
});

Demo on JS Fiddle.

这篇关于AJAX中的jsfiddle的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！