Create TinyURL via Jquery Ajax call

眉间皱痕 提交于 2019-12-01 10:45:27

Attempting to make a regular AJAX request is impossible because of same origin policy restrictions. Luckily there's a JSONP API courtesy of Remy Sharp.

Here's working code:

function TweetThis(bigurl)
{
    $.getJSON(
      "http://json-tinyurl.appspot.com/?&callback=?",
      {url: bigurl},
      function(data){
       alert(data.tinyurl);
      }
    );
}

never used it, but maybe worth checking out. http://tiny-url.info/open_api.html

If you have ability to add logic to the server side, you can avoid the requirement for JSONP by installing a "shim" or gateway script that does what you want, and returns a formatted JSON string.

some examples of scripts that produce tinyurls by calling tinyurl.com's API:

Anyone can take that code and host it themselves to allow webpages to gain access to the tinyurl service. The same approach works for any service that is not accessible via JSONP.

In Safari 4 (Mac OS X), it works fine.
In Firefox 3 (Mac OS X), it half works - a alert dialog comes up, but it's empty (so success is firing, but no data is returned).
It seems to be a Firefox bug then.

Try this one.

The script:

<script language="javascript" type="text/javascript">
<!-- 
var ajaxRequest;  // The variable that makes Ajax possible!

    try{
        // Opera 8.0+, Firefox, Safari
        ajaxRequest = new XMLHttpRequest();
    } catch (e){
        // Internet Explorer Browsers
        try{
            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try{
                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e){
                // Something went wrong
                alert("Your browser is very old!");
            }
        }
    }

//Browser Support Code
function ajaxGetTiny(){

    // Create a function that will receive data sent from the server
    ajaxRequest.onreadystatechange = function(){
        if(ajaxRequest.readyState == 4){
            var ajaxDisplay = document.getElementById('ajaxDisplayTiny');
            ajaxDisplay.innerHTML = ajaxRequest.responseText;

        }
    }
        var long_url = document.getElementById('long_url').value;


    var queryString = "?long_url=" + long_url;
    ajaxRequest.open("GET", "getTiny.php" + queryString, true);
    ajaxRequest.send(null); 

}

function ClipBoard() 
{
holdtext.innerText = copytext.innerText;
Copied = holdtext.createTextRange();
Copied.execCommand("Copy");
}
//-->

</script>

Now the form:

<form name='myForm'>
      <input name="long_url" type="text" class="main" size="90">
      <br>
        <input type='button' class="Buttons" onclick='ajaxGetTiny();' value='GET TINY' />
      </form>

Now the helper file:

<? 
//gets the data from a URL  
function get_tiny_url($url)  {  
    $ch = curl_init();  
    $timeout = 5;  
    curl_setopt($ch,CURLOPT_URL,'http://tinyurl.com/api-create.php?url='.$url);  
    curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);  
    curl_setopt($ch,CURLOPT_CONNECTTIMEOUT,$timeout);  
    $data = curl_exec($ch);  
    curl_close($ch);  
    return $data;  
}

//test it out!
$new_url = get_tiny_url($_GET['long_url']);

?>
<link href="../styles.css" rel="stylesheet" type="text/css" />


<table width="100%" border="0" class="main">
<tr>
            <td width="5%" align="left" valign="middle"><strong>longURL:</strong></td>
            <td width="95%" valign="middle" class="ArticleBody"><? echo $_GET['long_url']; ?></td>
  </tr>
          <tr>
            <td align="left" valign="middle"><strong>tinyURL:</strong></td>
            <td valign="middle" class="ArticleBody"><SPAN ID="copytext"><? echo $new_url; ?></SPAN> 
            <TEXTAREA ID="holdtext" STYLE="display:none;"></TEXTAREA><br>
            <BUTTON onClick="ClipBoard();">Copy to Clipboard</BUTTON>
</td>
  </tr>
        </table>
T. Stone

Have you tried adding &callback=? to the end of the URL? It could be the browser security getting in the way.

This should work

function TweetThis(url){
    $.get(
        "http://tinyurl.com/api-create.php",
        {url: url},
        function(data){
            alert(data);
        }
    );
}
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!