Fix JSON based Ajax in Chrome

I love JSON, because its very easy to work with JSON than working with XML. If you don't know what JSON is please read in detail here
Here i am discussing the use of JSON and the JSON retrieval method for AJAX. This method does not work in Chrome, because chrome maintains a JavaScript cache. I will discuss the fix of this problem as well.
Lets take an example code, which will grab data from twitter search and it will display on your page.

   2:     function getsearch()
   3:     {
   4:       var search_url='';
   5:       /*search_url will fetch you JSON with callback name as mycallback*/
   6:       var query='';
   7:       query=document.getElementById('query').value;
   8:       search_url=search_url+query;
   9:       var scrpt_div = document.getElementById('script_div');
  10:       scrpt_div.innerHTML = '';
  11:       var scrpt_ele = document.createElement('script');
  12:       scrpt_ele.src = search_url;
  13:       scrpt_div.appendChild(scrpt_ele);
  14:       var result_div = document.getElementById('result_div');
  15:       result_div.innerHTML = 'loading....';
  16:     }
  17:     function mycallback(data)
  18:     {
  19:       /*write code here to do the JOB*/
  20:       var html='';
  21:       for(var i=0;i<data.results.length;i++) 
  22:       { 
  23:         var tweet=data.results[i].text/*aah.. luxury of jus using the data, no parsing*/
  24:         html=html+tweet+'<br/>';
  26:       }
  27:       var result_div = document.getElementById('result_div');
  28:       result_div.innerHTML = html;
  29:     }
</script> </head> <body> <div> <form action="javascript:void(0)"> <input id="query" type="text"></input> <input type="submit" onclick="getsearch();" value="search"></input> </form> </div> <div id="result_div"> <!--Here your Result will appear --> </div> <div id="script_div"> <!--Here your JSON script will come <script src=""> </script> --> </div> </body> </html>

 Get this code in plain here .

In this code above, we are simply embedding a script element in the DOM whose src attribute will be the URL to retrieve JSON data (e.g’.) The URL will contain the call-back so that retrieving the JavaScript code for this element will result in calling your call back function and hence you will be able to use this JSON data in your call-back function.

The above code is hosted here, so try Demo1

If you try this code in Chrome browser, for a same query it will not work for the second time! Reason is Chrome does smart caching of JavaScript. So if it will find that the new script tag has same src  URL, it will not include that for second time,  and hence it will not work second time in chrome.To fix this problem, I have added in extra parameter in the JSON query URL. which will be a fake counter.
Instead of JSON URL like this
var search_url='';
you can modify by adding extra query parameter which does not mean anything to server. like this :
var search_url=''+fake_counter+'&q=';
Increase the fake_counter on every call. So that new URL will be different from the previous one. This will fix the problem in chrome.

Now this fix code in PlainText is here and Demo2 is here


  1. You can also jump to jQuery to do all these. Its simple and better option.

  2. tried both of the above, none fixed.

    I use a

    type: "POST",
    url: "request.php?fix_chrome_count="+fix_chrome_count,
    data: {
    success: function(response){
    dataType: 'json'

  3. Copy this code and test in an html file,This is a small demo to use JSON on jquery (to load images of twitter user from twitter)

      <script type="text/javascript" src=""></script> 
        <script type="text/javascript"> 
          google.load("jquery", "1.4.2");
    function getuserimage(user) {
        var url = '*%20from%20twitter.users%20where%20id%3D\'' + user + '\'%3B&format=json&diagnostics=true&';
    $("#imgurl").text('Getting ur image.....');
        $.getJSON(url, function (data) {
    if (data.query.results.user.profile_image_url) {
    imageurl = data.query.results.user.profile_image_url.replace("_normal.", ".");
     $("#imgdiv").html('<img src="'+imageurl+'">');
    else {
        $("#imgurl").text('Processing failed!! Can not determine gender!!');
     $("#imgurl").text('Looks like user does not exist!!');
     $("#imgurl").text('Looks like user does not exist!!');
    $(document).ready(function () {
          $('#btget').click(function () {
                var user = $("#tu").val();
    <input id= "tu" type="text" value="markandey"/>
    <input id= "btget" type="button" value="getUserImage"/>
    <div id="imgurl" style="color:red;"></div>
    <div id="imgdiv"></div>

  4. Thanks! Your Chrome workaround just solved a problem I have been having for days!


Your comment will inspire me, Please leave your comment