JQuery 학습 노트 (4) - ajax

AJAX = Asynchronous JavaScript and XML (비동기 JavaScript 와 XML)
원생
예시
단 추 를 누 르 면 서버 에 있 는 ajax 에 접근 합 니 다.info. txt 파일, txt 파일 의 내용 을 가 져 오고 표 시 된 텍스트 를 수정 합 니 다.

    var xmlhttp;//xmlhttp  
    function loadXMLDoc(url,cfunc){
        //      ，  xmlhttp          
        if (window.XMLHttpRequest){
            // IE7+, Firefox, Chrome, Opera, Safari 
            xmlhttp=new XMLHttpRequest();
        }else{
            // IE6, IE5 
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        //    
        xmlhttp.onreadystatechange=cfunc;
        xmlhttp.open("GET",url,true);
        xmlhttp.send();
    }
    function myFunction(){
        //       /try/ajax/ajax_info.txt，     
        loadXMLDoc("/try/ajax/ajax_info.txt",function()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
            }
        });
    }




   AJAX       
    

참조 링크
XML HttpRequest 대상
ajax 의 핵심 대상 은 서버 와 클 라 이언 트 사이 의 다리 입 니 다. 클 라 이언 트 가 서버 에 요청 을 보 내 고 클 라 이언 트 가 서버 응답 을 받 는 것 은 모두 이 대상 의 속성 과 방법 을 통 해 이 루어 집 니 다.

var xmlhttp;
//window.XMLHttpRequest   ，  true
if (window.XMLHttpRequest){
    // IE7+, Firefox, Chrome, Opera, Safari 
    xmlhttp=new XMLHttpRequest();
}else{// IE6, IE5 
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

송신 요청

open (method, url, async) 연결 서버

method: 요청 한 유형;GET 또는 POST

url: 파일 이 서버 에 있 는 위치

async: true (비동기) 또는 false (동기 화), 비동기

를 추천 합 니 다.

send (string) 에서 요청 을 보 냅 니 다. 요청 방식 이 get 이면 send 의 인 자 는 생략 하고 쓰 지 않 을 수 있 습 니 다

onreadystatechange 이벤트
xmlhttp 대상 은 두 가지 속성 readyState 과 status 이 있 습 니 다.readyState 변화 가 발생 하면 onreadystatechange 사건 이 발생 합 니 다.readyState 다음 과 같은 몇 가지 상태 가 있다.

0: 초기 화 요청 하지 않 음

1: 서버 연결 이 완료 되 었 습 니 다

2: 요청 이 접수 되 었 습 니 다

3: 요청 처리 중

4: 요청 이 완료 되 었 고 응답 이 완료 되 었 습 니 다

status 두 가지 상태 가 있 습 니 다.

200: "OK"

404: 페이지 를 찾 을 수 없습니다

서버 응답
XML HttpRequest 대상 responseText 또는 responseXML 속성 을 사용 하면 서버 로부터 응답 데 이 터 를 얻 을 수 있 습 니 다.

responseText 문자열 형식의 응답 데 이 터 를 얻 었 습 니 다.

responseXML XML 형식의 응답 데 이 터 를 얻 었 다.

JQuery ajax 구현
1. $.ajax(url,[settings])
가장 기본 적 인 ajax 방법
2. load(url,[data],[callback])
서버 에서 데 이 터 를 불 러 오고 돌아 오 는 HTML 코드 를 일치 하 는 요소 에 삽입 합 니 다.data 은 서버 에 전 달 된 데이터 매개 변수 로 일반적인 대상 이나 문자열 이 리 셋 함수 complete(responseText, textStatus, XMLHttpRequest) 를 제공 할 수 있 습 니 다. HTML 코드 가 일치 하 는 요소 에 삽입 되면 호출 됩 니 다.

$('#mydiv').load("test.html");

//   first.html          html  
$('#mydiv').load('first.html',function (data,status) {
    console.log(data);
    console.log(status);//  ，   success,    error
});

3. $.get(url,[data],[fn],[type])
HTTP GET 를 사용 하여 서버 에서 데 이 터 를 불 러 올 것 을 요청 합 니 다.

//           load  
$.get("first.html",function(data){
    $('#mydiv').html("test.html");
});

4. $.post(url,[data],[fn],[type])
HTTP POST 를 사용 하여 서버 에서 데 이 터 를 불 러 오 라 고 요청 합 니 다. 위 get 과 유사 합 니 다.
5. $.getJSON(url,[data],[fn])
제 이 슨 데 이 터 를 얻 고 자동 으로 분석 합 니 다.

$.getJSON("test.js", function(json){
    console.log(json.users[3].name);
});

6. $.getScript(url,[callback])
HTTP GET 를 사용 하여 서버 에서 자바 스 크 립 트 파일 을 불 러 오고 실행 할 것 을 요청 합 니 다.
참조 링크: jQuery 문서