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.
<html>
<head>
<script>1:2: function getsearch()3: {4: var search_url='http://search.twitter.com/search.json?callback=mycallback&q=';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/>';25:26: }27: var result_div = document.getElementById('result_div');28: result_div.innerHTML = html;29: }30:</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="http://search.twitter.com/search.json?callback=mycallback&q=hello"> </script> --></div></body></html>
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 http://search.twitter.com/search.json?q=hello’.) 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='http://search.twitter.com/search.json?callback=mycallback&q=';
you can modify by adding extra query parameter which does not mean anything to server. like this :var search_url='http://search.twitter.com/search.json?callback=mycallback&count='+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
No comments:
Post a Comment