1.  head 태그 사이에 script태그 넣기


<head>
    <script>
        //내용넣기
    </script>
</head>


2. body태그 사이에 script태그 넣기


<body>
    <script>
        //내용넣기
    </script>
</body>



Placing scripts at the bottom of the <body> element improves the display speed, because script compilation slows down the display.


<body> 요소의 맨 아래에 스크립트를 배치하면 스크립트 컴파일이 화면 속도를 늦추기 때문에 표시 속도가 향상됩니다.



그렇다고 합니다...

'개인공부 > 창민 :)' 카테고리의 다른 글

cross domain  (0) 2018.01.12
centos APM 버전 (2017.12.10)  (0) 2017.12.15

해결하고싶은 문제



$.ajax() 같은 ajax 관련 함수를 호출할 때 타겟이 되는 URL이 클라이언트와 다른 도메인이면 호출이 안 된다.

 

http://test01.co.kr 에서 ajax로 http://test02.co.kr 라는 API를 호출할 수는 없다는 말이다.

 

자바스크립트(Javascript) 보안 정책 중에 하나인 동일 근원 정책(Same-Origin Policy) 정책에 걸리게 되기 때문이다.



http://test02.co.kr/data.php 의 내용은 다음과 같다.

{"name":"changmin", "age":"27"}



http://test01.co.kr/get_data.php의 내용이 다음과 같다고 하자.

<script type="text/javascript">
      $.ajax({
        url: "http://test01.co.kr/data.php",
      })
      .done(function(data) {
        alert(data.name );
      });
</script>


http://test02.co.kr/get_data.html은 changmin라고 표시하지 못한다.
그 이유는 jQuery가 서로 다른 도메인간에는 데이터를 읽어오지 못하도록 차단하기 때문이다.
test01.co.kr에서 test02.co.kr의 데이터를 가져오려고 하기때문에 jQuery가 훼방을 놓고있는 것이다.




해결방법


test01.co.kr과 test02.co.kr을 통제할 수 있다면, 위의 두 파일을 살짝 고쳐서 http://test01.co.kr/get_data.html이 changmin 이라고 표시할 수 있다.

http://test01.co.kr/get_data.html 의 내용을 다음과 같이 수정한다.

<script type="text/javascript">
      $.ajax({
        url: "http://test02.co.kr/service.php?callback=?",
    dataType : "jsonp"
    }).done(function(data) {
      alert(data.name );
    });
</script>

callback=? 라는 표현은 jQuery가 cross domain 기능을 제공하기위해 사용하는 키워드같은 것이다. 그대로 타이핑해 넣어야 한다.


http://test02.co.kr/service.php 의 내용을 다음과 같이 수정한다.

<?php
echo $_GET['callback'] . '({"name":"changmin", "age":"27"})';
?>

JSON 데이터를 padding하고있는 이 모습을 가리켜 JSON with padding이라 말하고, JSONP라고 줄여서 말한다.
$_GET['callback']을 출력해보면 길이가 아주 긴 임의의 문자열인 것을 확인할 수 있다. 그 문자열은 jQuery가 즉흥적으로 만들어낸 함수이다. (아마도 json parser 함수일 것이다).


이제 http://test01.co.kr/get_data.html이 changmin라고 표시하게 되었다.





출처 http://eun-sung-hun.blogspot.kr/2015/01/jsonp-cross-domain.html




'개인공부 > 창민 :)' 카테고리의 다른 글

script태그 head와 body에서의 차이점  (0) 2018.01.15
centos APM 버전 (2017.12.10)  (0) 2017.12.15

- CentOS : 6.9


- Apache : 2.2.15


- PHP : 5.6.30


- MariaDB : 10.2.11





'개인공부 > 창민 :)' 카테고리의 다른 글

script태그 head와 body에서의 차이점  (0) 2018.01.15
cross domain  (0) 2018.01.12

+ Recent posts

티스토리툴바