반응형
반응형


ajax() 메소드는 비동기 요청을 수행.

 

http://api.jquery.com/jQuery.ajax/
http://www.w3schools.com/jquery/ajax_ajax.asp

 

jQuery.ajax( url [, settings ] )Returns: jqXHR

  $.ajax({
     url:"demo_test.txt",
     success:function(result){
       $("#div1").html(result);
   }});


getJSON() 메소드는 AJAX HTTP Get 요청을 사용하여 JSON 데이터를 가져온다.

 

http://api.jquery.com/jQuery.getJSON/
http://www.w3schools.com/jquery/ajax_getjson.asp

 

jQuery.getJSON( url [, data ] [, success(data, textStatus, jqXHR) ] )Returns: jqXHR

 

$.getJSON('http://yoururl?callback=?', function(data){alert(data)});

 

var jqxhr = $.getJSON( "example.json", function() {console.log( "success" );})
             .done(function() { console.log( "second success" ); })
             .fail(function() { console.log( "error" ); })
             .always(function() { console.log( "complete" );
             });
             // perform other work here ...
             // Set another completion function for the request abovejqxhr.complete(function() { console.log( "second complete" ); });

 

jqxhr.complete(function() { console.log( "second complete" ); });

 

 

getScript() 메소드는  AJAX HTTP GET 요청을 이용하여 javascript를 실행한다.

 

http://api.jquery.com/jQuery.getScript/

 

jQuery.getScript( url [, success(script, textStatus, jqXHR) ] )Returns: jqXHR

 

$.getScript("demo_ajax_script.js");

 

$.getScript("ajax/test.js", function(data, textStatus, jqxhr) {  
                     console.log(data); //data returned  
                     console.log(textStatus); //success  
                     console.log(jqxhr.status); //200  
                     console.log('Load was performed.');});

 

$.getScript("ajax/test.js").done(function(script, textStatus) { 
                                    console.log( textStatus );})
                           .fail(function(jqxhr, settings, exception) { 
                                    $( "div.log" ).text( "Triggered ajaxError handler." );
                           });

 

 

 

 

반응형
저작자표시

'프로그래밍 > Script' 카테고리의 다른 글

Sencha Touch vs jQuery Mobile  (0) 2013.07.30
자바스크립트 레퍼런스 모음  (0) 2013.07.29
[jQuery] 10 Best jQuery Plugins to Create Dynamic Layouts, like pintrest  (0) 2013.07.26
[HTML5] 12 Popular Responsive HTML5 Frameworks  (0) 2013.07.26
[jQuery] 30 Awesome jQuery Plugins All Designers Should Check Today  (0) 2013.07.26
반응형

iOS6 SAFARI BUG (iOS6 사파리 버그 - AJAX, SPINNING, ...)

아이폰5 발표가 되고 조금 지나서 iOS6도 공개가 되었다.


업데이트평은

인터넷 접근 속도가 빨라졌다.

OS 전체적으로 조금 빨라졌다 라는 평이 많고..

일부 아이폰 4이하 기기를 사용하시는 분들은 느려졌다는 의견도 좀 있다.



뭐.. 그런저런 이야기는 지나가고..


개발을 하고 사용하다 보니 문제가 발생했다.

바로바로...

AJAX caching bug


사이트에서 페이지가 바뀌지 않은 상태에서

AJAX를 재호출 했을 경우 이전에 받았던 데이터를 그냥 계속 불러오는 버그가 발생하였다.


예상되는 버그 시나리오



* 최초로 A data("test.jsp")를 요청

   1. 서버로 A data를 요청

   2. 서버에서 Safari로 전달

   3. Safari에서는 해당 데이터를 캐쉬에 저장

   4. A data 제공


* 이후에 A data("test.jsp")를 요청

   1.  Safari Cache에 해당 데이터가 있는지 확인

   2.  Cache에 있는 A data 제공



해당 문제가 발생하는 이유

브라우저가 인터넷 속도를 빠르게 하기 위해서 캐시를 사용을 하게 된다.

이럴 경우 같은 주소에 대해서는 캐시를 사용하면서 생기는 문제로 보인다.



해결책


1. 주소에 쓰레기 값을 붙여서 새로운 주소로 인식하도록 한다.

ex) test.jsp?timeStamp=93939393


2. meta cache control을 추가해준다.

ex) <meta http-equiv="Cache-Control" content="no-cache" />


3. 서버 HEADER를 추가해준다.

ex) header('cache-control: no-cache');



1, 2번을 함께 적용하여 해결을 했다.


관련 URL를 참고하면 자세한 정보가 나와있으니 참고하도록.





아......... 애플.. ㅡ.ㅡ;;


ps.

iOS6 Webview에서도 동일한 증상이 발견된다.

즉............. 어플도 확인해봐야한다는 말씀?!



관련 URL

Understanding the iOS6 AJAX bugs

http://www.devthought.com/2012/09/22/understanding-the-ios6-ajax-bugs/

1. The spinning bug

2. The AJAX cache bug

3. The long-polling bug


Is Safari on iOS 6 caching $.ajax results?

http://stackoverflow.com/questions/12506897/is-safari-on-ios-6-caching-ajax-results


AJAX Web Apps In iOS 6 Are Sort Of Broken

http://techcrunch.com/2012/09/21/ajax-web-apps-in-ios-6-are-sort-of-broken/



반응형
저작자표시

'프로그래밍 > Web' 카테고리의 다른 글

Chrome Dev Tools: Markup and Style  (0) 2012.10.05
URI - The What, Why and How of Data URIs in Web Design  (0) 2012.10.02
[HTML5] http://html5-demos.appspot.com/  (0) 2012.09.24
[HTML5] Drag and drop a folder onto Chrome now available  (0) 2012.09.24
[HTML5] Integrating input[type="file"] with the Filesystem API  (0) 2012.09.24
반응형

Ajax에서 Cache가 나를 괴롭힐때!!!


그런적 없던 Ajax가 갑자기 한 페이지에서 Cache를 물고 있으면서 동일한 값을 계속 토해내고 있다 .


어떻게 해결할 것인가?


호출 Url에 파라미터를 붙여 랜덤하게?

   


  Url += "?_cache_false" + Math.floor(Math.random() * 99999);


이렇게 해도 안되면


$.ajax(){

  ...

  , cache:false

  ...

}


요렇게 해보자.


하지만, cache가 우리에게 주는 장점은 쓸 수 없을것이다.

반응형
저작자표시

'프로그래밍 > Web' 카테고리의 다른 글

크로스 플랫폼 개발환경 - 웹앱?!  (0) 2012.05.01
HTML5 offilne cache  (0) 2012.04.27
[Mobile Web] 텍스트 입력창에서 자동고침/자동완성/자동대문자 기능 OFF  (0) 2012.04.16
브라우저의 User-Agent를 바로 확인하고 싶다면~  (0) 2012.03.26
자바스크립트 차트  (0) 2012.03.05
반응형

External URL 의 내용 불러오기 - Ajax

<html>
<body>

<script type="text/javascript">
function Ajax(){
var xmlHttp;
	try{	
		xmlHttp=new XMLHttpRequest();// Firefox, Opera 8.0+, Safari
	}
	catch (e){
		try{
			xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
		}
		catch (e){
		    try{
				xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
			}
			catch (e){
				alert("No AJAX!?");
				return false;
			}
		}
	}

xmlHttp.onreadystatechange=function(){
	if(xmlHttp.readyState==4){
		document.getElementById('ReloadThis').innerHTML=xmlHttp.responseText;
		setTimeout('Ajax()',10000);
	}
}
xmlHttp.open("GET","http://www.example.com/the_page_that_contains_the_div_content",true);
xmlHttp.send(null);
}

window.onload=function(){
	setTimeout('Ajax()',10000);
}
</script>

<div id="ReloadThis">Default text</div>

</body>
</html>


반응형
저작자표시

'프로그래밍 > Web' 카테고리의 다른 글

[WEB] http://www.asciiflow.com/ - Ascii Flow Diagram  (0) 2011.06.21
[Web] http://jsonlint.com/ - JSON 데이터 인증하기.  (0) 2011.06.20
[html] html5 storage - Local, Session  (0) 2011.05.03
[web] html5 chart - powercharts - fusion chart 차트 그래프  (0) 2011.04.19
모바일웹 .vs 앱 비교정리  (0) 2011.04.14

+ Recent posts

티스토리툴바