ajax를 axios 로 대체 하려고 합니다. 어떤식으로 바꿔야하는지요
본문
안녕하세요.
ajax통신으로 문제가 자주 발생해 axios 로 대체해보려고 합니다.
제이쿼리 처럼 상단에
<script src="주소:unpkg.com/axios/dist/axios.min.js"></script>
선언하고 사용 가능한지요?
아작스로 한 부분을 axios 로 어떻게 변경하나요..?
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
function login_app()
{
$.ajax({
url: 'https://api.주소~~'
type: "POST",
dataType: 'json',
data: {
identifier: $("#identifier").val(),
password: $("#password").val(),
},
success: function(data) {
alert('성공--' + data['user']['username']);
console.log(data);
} ,
error : function(){
alert("AJAX Failed!");
}
});
}
</script>
------- axios 변경중 ------------------------------------------
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
function login_app()
{
axios({
method: 'post',
url: 'https://api주소~~~,
data: {
identifier: '*** 개인정보보호를 위한 이메일주소 노출방지 ***',
password: '1234',
}
~~~~? 구현 방법~
});
}
</script>
답변 4
아... 왜 이걸 이제 발견했는지;;
ie11에서 jquery ajax No Transport error 에 관한 내용입니다
https://stackoverflow.com/questions/9160123/no-transport-error-w-jquery-ajax-call-in-ie
실제 api url 에서 Access-Control-Allow-Origin을 허용해줘도
jquery 옵션에 명시해줘야 되는군요
아래 코드 cors / crossDomain 부분이요
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>HTML</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<script>
$.support.cors = true;
$(function() {
$.ajax({
type: "GET",
url: 'https://project-team.upbit.com/api/v1/disclosure?region=kr&per_page=5',
cache: false,
dataType: 'json',
crossDomain: true,
success: function(data) {
console.log(data);
},
error : function(xhr, status, error) {
console.log(xhr, status, error); // No Transport
}
});
});
</script>
</body>
</html>
답변감사힙니다.
그렇게 해도 안되네요.
서버api 개발자분께 물어보니 크로스도메인 전체 허용이라고 하네요..
어느정도 기능은 돌아가는데 문제는
익스 8 ~9 버전에서 동작을 안하네요.
곧 정리해서 다시한번 올리겠습니다.
상단에
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
두줄만 선언해 주면 사용가능하던데 혹시 제가 놓친 부분이 있을까요?
정상 동작을 안하는거 같아요..
구현은
<script>
function login_app()
{
axios.post('https://api.주소~~', {
identifier: $("#identifier").val(),
password: $("#password").val(),
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
}
</script>
두 스크립트가 같은겁니다.
하나만 쓰는 걸로~
ie11에서 Promise 오류를 위해 bluebird 추가요
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>HTML</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.3.4/bluebird.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<script>
axios({
method: 'get',
url: 'https://jsonplaceholder.typicode.com/todos/1',
responseType: 'json'
})
.then(function (response) {
console.log(response)
});
</script>
</body>
</html>
bluebird 를 인클루드 하니깐 동작을 합니다!! 감사합니다!
한가지..
이건 ajax로 했을때도 같은 문제인데 IE브라우져에서 F12누른후 IE8 로 해놓으면
왜 동작을 안하는거죠?
실제로 IE8 사용자가 동작이 안된다고 해서 axios 로 변경도 했는데...
IE8이면 jquery가 유리하지 않을까요?
axios 브라우저 서포트를 참고해보세요
https://www.npmjs.com/package/axios
jquery brower support
https://jquery.com/browser-support/
If you need to support older browsers like Internet Explorer 6-8, Opera 12.1x or Safari 5.1+, use jQuery 1.12.
결론은 axios 라이브러리는 구버전 IE 를 지원하지 않는다는 결론을 내렸습니다.
ajax 로 처리하는게 맞는데
ajax통신이 안되었던 이유는
IE9 이하의 버전이고 http --- https 통신으로 갈때 이 두가지 상황이
겹칠때 엑세스가 거부되는 현상을 찾았습니다.
IE10 이상은 http -- https 통신이 자유롭습니다.
답변 주신 많은 분들 감사합니다.
+ ajax 통신
http://lsp80.cafe24.com/20.html
+axios 통신
http://lsp80.cafe24.com/3.html
개발자도구에서 IE8로 바꿔서 테스트해보면 둘다 동작을 안합니다..
제이쿼리 1.12 사용했고..
일단 html 마크업을 정석대로 해보세요
<!doctype html>
html, head, body
그리고 제 경험상
ie 개발자도구에 있는 에뮬레이터는
실제 브라우저하고 좀 차이가 있더라고요
완벽히 같은 상황을 재현해 주진 않아요
옛날에 저는 버추얼머신에 윈도우7 ie9 세팅해가지고
보면서 테스트했던 아련한 기억이 있네요 ㅠㅠ
그런데, 현재 그렇게 할 정도로 서포트 해야할 이유가 있을까 싶어요
http://lsp80.cafe24.com/20.html
이건
ie11 에뮬레이션 문서모드 ie8 에이전트문자열 ie8 에서 해봤을 때
오류는 없고 response 도 제대로 찍히네요
아... 통신이 안되는군요
