jQuery Ajax 응용 실현

우선 Ajax 가 무엇 인지 이해 해 보 세 요. 전 칭 Asynchronous Javascript And XML (비동기 JavaScript 와 XML) 은 인 터 랙 티 브 웹 애플 리 케 이 션 의 웹 개발 기술 입 니 다.
쉽게 말 하면 데이터 처리 나 업데이트 가 필요 할 때 전체 웹 페이지 를 다시 불 러 오 는 방법 을 사용 하지 않 고 웹 페이지 의 일부분 을 업데이트 하 는 것 이다. 즉, 배경 과 서버 에 소량의 데이터 교환 을 하 는 것 이다.
제 가 비동기 에 대한 이 해 는 원래 페이지 가 영향 을 받 지 않 고 업 데 이 트 된 데 이 터 를 작은 부분 으로 교환 해 야 한 다 는 것 입 니 다. 이 두 부분 은 비동기 적 이 고 동시에 진행 할 수 있 습 니 다.
다음은 무 과 망 이 ajax 에 대한 기초 강 좌 를 살 펴 보 겠 습 니 다.
1. load 방법 비동기 요청 데이터
$(xx).load(url, [data] , [callback])
url 은 서버 의 주 소 를 불 러 오기 위해 돌아 온 데 이 터 를 xx 에 배치 합 니 다.【 data 】 매개 변 수 는 요청 할 때 보 내 는 데이터 입 니 다. 선택 할 수 있 습 니 다.콜백 은 실 행 된 리 셋 함수 입 니 다.
특히, loadb 는 도 메 인 요청 을 할 수 없습니다. 즉, url 은 같은 도 메 인 을 원 합 니 다. 도 메 인 요청 을 하려 면 로 컬 에 설 치 된 서버 로 복사 해 야 합 니 다.
재 모 과 망 이라는 예 를 보 겠 습 니 다.http://www.imooc.com/code/338
여기 서 사용 하 는 url 은 같은 도 메 인 입 니 다.http://www.imooc.com/data/fruit_part. html, 로 컬 테스트 를 하려 면 안 됩 니 다.

 <script type="text/javascript">
            $(function () {
                $("#btnShow").bind("click", function () {
                    var $this = $(this);
                    $("ul")
                    .html("<img src='Images/Loading.gif' alt=''/>")
                    .load("http://www.imooc.com/data/fruit_part.html",function() {
                        $this.attr("disabled", "true");
                    });
                })
            });
        </script>

여기 서 $("ul") 에 두 동작 을 추가 하 는 것 을 보 았 습 니 다. 하 나 는 불 러 온 그림 을 표시 한 다음 에 데 이 터 를 업데이트 하 라 고 요청 하 였 습 니 다. 요청 이 끝나 고 불 러 온 후에 이 그림 은 바 뀌 었 습 니 다.그러나 실제로 이 요청 의 속 도 는 매우 빨 라 서 그림 을 불 러 오 는 것 을 거의 볼 수 없다.그 후에 load 의 함 수 는 데 이 터 를 불 러 온 후에 리 셋 함 수 를 실행 하여 단 추 를 사용 할 수 없 게 합 니 다.
이게 로드 방법 이 야.
2. getJSON 방법 비동기 로 JSON 불 러 오기
이 방법 은 Ajax 비동기 요청 을 통 해 json 형식의 파일 을 얻 고 data 인자 와 리 셋 함 수 를 가 져 옵 니 다.
우선 각각의 용법 을 살 펴 보 겠 습 니 다.  .each (데이터, 리 셋 함수 이름 (데이터 인덱스, 현재 인덱스 데이터 항목) {}

<script type="text/javascript">
            $(function () {
                $("#btnShow").bind("click", function () { //      
                    var $this = $(this);
                   $.getJSON("http://www.imooc.com/data/sport.json",function(data){ //  url         ，  data     
                        $this.attr("disabled", "true");
                        $.each(data, function (index, sport) {  //   data           ，      ， index=0  ，         sport
                            if(index==3)
                            $("ul").append("<li>" + sport["name"] + "</li>");  //    index==3 sport     name
                        });
    
                    });
                })
            });
        </script>

다음 몇 가지 방법 은 모두 차이 가 많 지 않 은 문법 입 니 다. 그 중의 function (data) 중의 data 는 요청 후 돌아 오 는 데이터 입 니 다.
3. getScript () 비동기 로 js 파일 을 불 러 오고 실행 합 니 다.
위 와 같이 요청 한 후에 서버 에 있 는 자바 script 형식의 파일 을 불 러 오고 실행 합 니 다.
4. get () 방법 은 GET 방식 으로 서버 에서 데 이 터 를 가 져 옵 니 다.
$.get(url,[callback]);
5. post () 방법 은 POST 방식 으로 서버 에서 데 이 터 를 가 져 옵 니 다.
$.post(url,[data],[callback]) $.post() 방법 을 호출 할 때 첫 번 째 매개 변 수 는 서버 를 요청 하 는 경로 이 고 두 번 째 매개 변 수 는 업로드 요청 하 는 매개 변수 이 며 매개 변 수 는 key / value 방식 입 니 다.
호출 중$.post() 방법 으로 서버 에 데 이 터 를 보 낼 때 되 돌아 오 는 데 이 터 를 받 으 려 면 이 방법의 세 번 째 매개 변수, 즉 리 셋 함 수 를 추가 하고 이 함수 의 매개 변 수 를 통 해 반환 값 을 가 져 와 야 합 니 다.