AJAX 메소드의 기본 JS 캡슐화

Ajax는 모든 사람이 매일 사용합니다. jquery 라이브러리의 Ajax 캡슐화도 매우 완벽하고 사용하기 쉽습니다. 내부 원리를 살펴보고 자체 Ajax 라이브러리를 수동으로 캡슐화해 보겠습니다.

1. 원리

네이티브 Ajax를 보내려면 4단계가 필요합니다:

1) Ajax 객체 생성: XMLHttpRequest

2) 요청 매개변수 설정: open(요청 매개변수 [get/post], URL 주소, 비동기 여부 [ true/false] )

3) 콜백 함수 설정: onreadystateChange는 반환된 데이터를 처리하는 데 사용됩니다.

4) 요청 보내기: send()

//TODO step1: 创建ajax对象
var xhr = new XMLHttpRequest();
//TODO step2: 设置请求参数
xhr.open('get','01.php',true);
//TODO step3: 设置回调
xhr.onreadystatechange = function () {
    //接收返回数据
    console.log(xhr.responseText);//responseText 用于接收后台响应的文本
}
//TODO step4: 发送请求
xhr.send();

2. 캡슐화

의 핵심 아이디어 캡슐화는 해당 부분을 매개변수로 처리하고 변경되지 않은 부분을 동적으로 변경하는 것입니다. 위 코드에서는 요청 메소드(get, post), 요청 주소 URL, 요청 매개변수 데이터, 성공적인 콜백 성공, 실패 콜백이 그대로 유지됩니다. 오류 등으로 인해 이러한 매개변수는 모두 동적으로 변경됩니다. Ajax 객체 XMLHttprequest 생성, 이벤트 모니터링 onreadystatechange 등이 수정되었으므로 첫 번째 단계는 패키지의 매개변수를 결정하는 것입니다:

v URL 요청 주소

v 데이터 요청 데이터

v 유형 요청 유형

v 성공 성공 콜백

v 오류 실패 콜백

v beforeSend 전송을 방지하기 위해 전송하기 전에 호출이 false를 반환합니다.

v 완료 ajax 요청 성공에 대한 콜백, 언제든지 실행됩니다

function ajax(option){
    //用户配置option 默认配置init
    var init = {
        type:'get',
        async:true,
        url:'',
        success: function () { },
        error: function () { },
        data:{},
        beforeSend: function () {
            console.log('发送前...');
            return false;
        }
    };
    //TODO step1: 合并参数
    for(k in option){
        init[k] = option[k];
    }
    //TODO step2: 参数转换
    var params = '';
    for(k in init.data){
        params += '&'+k+'='+init.data[k];
    }
    var xhr = new XMLHttpRequest();
    // type url
    //TODO step3: 区分get和post,进行传参
    var url = init.url+'?__='+new Date().getTime();
    //TODO step4: 发送前
    var flag = init.beforeSend();
    if(!flag){
        return;
    }
    if(init.type.toLowerCase() == 'get'){
        url += params;
        xhr.open(init.type,url,init.async);
        xhr.send();
    }else{
        xhr.open(init.type,url,init.async);
      xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
        xhr.send(params.substr(1));
    }
    xhr.onreadystatechange = function () {
        if(xhr.readyState == 4){
            if(xhr.status == 200){
                init.success(xhr.responseText);
            }else{
                //error
                init.error();
            }
        }
    }
}

여기서 주목해야 할 것은 get과 post의 매개변수 전달 방식입니다. get 요청은 url 주소 뒤에 직접 연결되어야 하며, post 요청은 send 메소드에 매개변수를 전달해야 합니다. , 요청 헤더는 setRequestHeader('content-type','application/x-www-form-urlencoded') 이어야 하므로 캡슐화할 때 구별이 이루어져야 합니다.

매개변수가 너무 많기 때문에 사용자는 매번 많은 매개변수를 전달할 필요가 없습니다. 그렇지 않으면 사용하기가 매우 번거로워집니다. 그래서 우리는 기본 매개변수 형식을 채택합니다. 사용자가 전달하지 않으면 기본값이 사용됩니다. 사용자가 전달하는 매개변수가 사용됩니다.

3. 사용예

ajax({
    url: 'test.json',
    data:{test:123,age:456},
    //type:'post',
    success: function (res) {
        console.log(res);
    }
});

위 내용은 AJAX 메소드의 기본 JS 캡슐화의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!