Recent Posts
Recent Comments
Link
관리 메뉴

NaggingMachine

Internet Explorer 버전에 상관없이 jquery ajax 호출하기 본문

TechnoBabbler

Internet Explorer 버전에 상관없이 jquery ajax 호출하기

naggingmachine 2013. 7. 16. 19:32

엄청나게 삽질했는데, 오픈소스가 있군요.


아주 훌륭합니다.


https://github.com/MoonScript/jQuery-ajaxTransport-XDomainRequest


Example: http://jsfiddle.net/MoonScript/Q7bVG/show/


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>XDomainRequest Transport - jsFiddle demo by MoonScript</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.5.2.js'></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<script type='text/javascript' src="http://cdnjs.cloudflare.com/ajax/libs/jquery-ajaxtransport-xdomainrequest/1.0.0/jquery.xdomainrequest.min.js"></script>
<style type='text/css'>
</style>


<script type='text/javascript'>//<![CDATA[
$(function(){
var $output = $('#output');

$('a.cors').click(function(){
var $link = $(this);
var requestMethod = $link.attr('data-method');
var responseType = $link.attr('data-type');
$output.text('Loading...');
$.ajax({
url: $link.attr('href'),
type: requestMethod,
dataType: responseType,
success: function(data){
var unorderedList;
if (responseType === 'xml') {
var FN = $('name > first', data).text();
var LN = $('name > last', data).text();
unorderedList = '<ul><li>&lt;first&gt; '+FN+'</li><li>&lt;last&gt; '+LN+'</li></ul>';
} else {
unorderedList = '<ul><li>first: '+data.name.first+'</li><li>last: '+data.name.last+'</li></ul>';
}
$output.html(responseType.toUpperCase() + ' received via ' + requestMethod + '<br/>' + unorderedList);
},
error: function(jqXHR, textStatus){
alert(textStatus);
}
});
return false;
});
});//]]>

</script>


</head>
<body>
<ul>
<li><a class="cors" href="http://moonscript.jsapp.us/" data-type="xml" data-method="GET">GET - returns XML</a> from http://moonscript.jsapp.us/</li>
<li><a class="cors" href="http://moonscript.jsapp.us/" data-type="xml" data-method="POST">POST - returns XML</a> from http://moonscript.jsapp.us/</li>
<li><a class="cors" href="http://jsonmoon.jsapp.us/" data-type="json" data-method="GET">GET - returns JSON</a> from http://jsonmoon.jsapp.us/</li>
<li><a class="cors" href="http://jsonmoon.jsapp.us/" data-type="json" data-method="POST">POST - returns JSON</a> from http://jsonmoon.jsapp.us/</li>
</ul>
<div id="output"></div>

</body>


</html>



jquery.xdomainrequest.min.js