jQuery Ajax() 메서드 사용 가이드_jquery

jQuery는 간단하고 강력한 선택기 기능을 제공하며 Ajax 작업도 훌륭하게 지원합니다. Ajax 측면에서 보면 jQuery는 기본 jQuery.ajax() 메서드를 제공하는 것 외에도 다음과 같은 간단한 메서드도 제공합니다.

(1) jQuery.get(url, [데이터], [콜백], [유형])

(2) jQuery.getJSON(url, [데이터], [콜백])

(3) jQuery.getScript(url, [콜백])

(4) jQuery.post(url, [데이터], [콜백], [유형])

jQuery.ajax()는 상대적으로 강력하고 구성 가능한 매개변수가 많기 때문에 이제 이 방법에 대한 주의사항을 주로 요약하겠습니다.

1. jQuery.ajax()는 기본적으로 비동기식으로 요청됩니다. 동기화가 필요한 경우 매개변수 async를 false로 사용하세요. 일부 애플리케이션은 동기적으로 데이터를 요청해야 하기 때문입니다. 예를 들어 일부 Flash 및 JS 대화형 애플리케이션에서 JS 기능을 요청하려면 즉각적인 반환 데이터가 필요합니다. 이때 동기식 Ajax 호출을 사용해야 합니다.

2. Ajax가 Get 요청인 경우 일반적으로 반환된 데이터는 브라우저에 의해 캐시됩니다. 캐시를 원하지 않으면 캐시 매개변수를 false로 설정하거나 타임스탬프와 함께 요청을 보낼 수 있습니다. 브라우저는 서버에서 데이터를 다시 로드하는 동안 새로운 요청이라고 생각합니다. 물론 요청이 POST로 전송되면 캐시되지 않습니다.

3. 데이터 유형: 서버에서 반환할 것으로 예상되는 데이터 유형입니다. 지정하지 않으면 jQuery는 HTTP 패킷 MIME 정보를 기반으로 responseXML 또는 responseText를 자동으로 반환하고 이를 콜백 함수 매개 변수로 전달합니다. 사용 가능한 값:

(1) "xml": jQuery로 처리할 수 있는 XML 문서를 반환합니다.

(2) "html": 일반 텍스트 HTML 정보를 반환합니다. 포함된 스크립트 태그는 dom에 삽입될 때 실행됩니다.

(3) "script": 일반 텍스트 JavaScript 코드를 반환합니다. 결과는 자동으로 캐시되지 않습니다. "cache" 매개변수가 설정되지 않은 경우. '''참고:''''원격 요청을 할 때(동일한 도메인이 아닌) 모든 POST 요청은 GET 요청으로 변환됩니다. (DOM 스크립트 태그를 사용하여 로드하기 때문입니다)

(4) "json": JSON 데이터를 반환합니다.

(5) "jsonp": JSONP 형식입니다. "myurl?callback=?"과 같은 JSONP 형식을 사용하여 함수를 호출하면 jQuery는 콜백 함수를 실행하기 위해 자동으로 ?를 올바른 함수 이름으로 바꿉니다.

(6) "text": 일반 텍스트 문자열을 반환합니다.

그 중 "script"와 "json" 설정을 사용하면 Ajax의 도메인 간 문제를 해결할 수 있습니다.

4. 서버가 문자열이나 숫자 값을 반환하면 일반 Ajax 호출을 사용하세요.

서버가 JSON 객체를 반환하는 경우 jQuery.getJSON을 사용하거나 dataType=json을 설정하는 것이 가장 좋습니다. 브라우저가 JSON 객체를 구문 분석하는 데 시간이 걸리기 때문에 JSON 객체를 직접 반환하면 구문 분석 시간이 절약되고 서버가 데이터를 명확하게 반환하지만 브라우저가 데이터를 가져올 수 없는 오류를 방지할 수 있습니다.

5. Ajax 호출에는 시간이 걸리므로 일반적으로 Ajax 호출 이후의 모든 처리 코드는 콜백 메서드에 배치됩니다. 이 접근 방식은 사용할 수 없습니다:

코드 복사 코드는 다음과 같습니다.

함수 getMyPrizeList(){
    if(isNotEmpty(uid)){
        var obj=new Object();
        시도해 보세요{
          jQuery.ajax({type:"GET",url:"someurl",async:false,cache:false,dataType:"script",scriptCharset:"gbk",success:function(json){
                     obj=json;
                  }
              });
           }잡기(e){}
           obj=eval("(" obj ")");
           //경고(obj);
           var str="";
           for(obj의 var i)
           {
               str ='' '번째' Prizearray[obj[i].prizeno] ''
               str ='' 'CD-KEY:' obj[i].cdkey ''
               str ='' '期限：' obj[i].expiratedate '前' ' ';
           }
           jQuery("#prizelist").append(str);
        }
}

而必须这样处理：即将处理代码放到success函数里面!

复主代码 代码如下:

함수 getMyPrizeList(){
    if(isNotEmpty(uid)){
        var obj=new Array();
        시도해 보세요{
                  jQuery.ajax({type:"GET",url:"someurl",
                               캐시:거짓,
                               데이터 유형:"스크립트",
                               scriptCharset:"gbk",
                               성공:함수(json){
                                 시도해 보세요{
                                      obj=결과; 
                                }잡기(e){}
                                jQuery("#prizelist").html("");
                                var str="";
                                for(var i=0;i                                     str ='' Prizearray[obj[i].prizeno] '';
                                    str ='CD-KEY：' obj[i].cdkey '';
                                    str ='期限：' obj[i].expiratedate '前 ';
                                }
                                jQuery("#prizelist").append(str);                  
                               }
                   });
           }잡기(e){}
        }
}

6. jQuery.getJSON 예제:

复主代码 代码如下:

//채무자 세부정보를 로드하고 값을 설정하는 내부 함수
함수 innerShowDetail() {
// JSON 형식으로 데이터 가져오기
         $.getJSON('load.do',{id : userId}, function(json) {
// 키에 따라 값 설정
for (json의 키) {
If(키 == 'id'){
                          $('#detailDiv #' key).val(json[key]);
                  } 그 외 {
If(json[key] == ''){
// 비어있는 값이 설정되지 않았습니다.
                              $('#detailDiv #' key).html(' ');
                            } else if(key == 'sex'){
                        $('#detailDiv #' key).html(json[key] == '0' ? '여성' : '남성');
                           } else if(키 == '그룹'){
If(json[key] != null) {
$('#detailDiv #' key).html(json[key]['groupName']);
                    }
                    } else {
                              $('#detailDiv #' key).html(json[key]);
                 }
              }
           }
//대화상자 제목과 내용 설정
               $('#detailDiv').removeAttr('class');
Dialog.setTitle('사람 보기[' json['userName'] '] 세부정보');
Dialog.setContent($('#detailDiv').html());
});
}