Ajax의 장점과 단점은 무엇입니까? 아약스를 올바르게 사용하는 방법-JS 튜토리얼-php.cn

Ajax의 장점과 단점은 무엇입니까? 아약스를 올바르게 사용하는 방법

寻∝梦

풀어 주다： 2018-09-10 16:06:38

원래의

2452명이 탐색했습니다.

이 글에서는 주로 캡슐화 ajax의 도입과 ajax의 비동기 요청에 대해 설명합니다. 이제 이 글을 함께 살펴보겠습니다.

Ajax

ajax라고 하면, ajax란 정확히 무엇인가요? Ajax는 대화형 웹 애플리케이션을 만드는 기술입니다.

Ajax의 응용 시나리오에는 (맵) 실시간 업데이트, 양식 유효성 검사 등이 포함됩니다....

Ajax의 장점과 단점 :

# .#장점: 1. 로컬 업데이트 구현(브러시가 없는 상태), 2. 서버 부담 감소#🎜🎜 ## 🎜🎜 ## 🎜🎜#단점: 1. 파괴 ajax 자동 업데이트 메커니즘)

2. Ajax 요청이 너무 많으면 페이지가 느리게 로드됩니다.

3. 검색 엔진 지원이 상대적으로 낮습니다.

4. Ajax의 보안 문제는 그다지 좋지 않습니다(데이터 암호화로 해결 가능).

우선 Ajax를 사용하려면 백엔드 환경(서버측)의 지원이 있어야 합니다.

HTTP 요청

HTTP를 요청하는 방법에는 두 가지가 있습니다.

GET: 데이터를 얻는 데 사용되며 GET은 데이터를 전달하는 것입니다. URL(URL 다음의 것), 저장 용량이 작고 보안 요소가 상대적으로 낮습니다.

POST: 데이터를 업로드하는 데 사용됩니다. POST 보안은 일반적으로 (GET)보다 우수하며 용량은 거의 무제한입니다(주로 양식에 사용됨).

Ajax 사용

ajax 사용에는 4단계가 있습니다. 1. ajax 생성, 2. 서버에 연결, 3. 요청 보내기, 4. 반환 값을 수락합니다.

Ajax 만들기

Ajax 만들기는 호환성 처리를 고려해야 합니다. IE6 이상: new XMLHttpRequest(), IE6: new ActiveXObject("Microsoft.XMLHTTP")

# 🎜🎜#

~ 🎜 🎜#

위에서 생성한 ajax 객체 xhr은 xhr.open("요청 메서드(GET/POST)", url 경로, "Asynchronous/Synchronous")을 사용합니다. ).

세 번째 매개변수: true===》비동기, false===》동기. (자세한 내용을 알고 싶으시면 PHP 중국어 홈페이지

AJAX Development Manual 열을 참고하세요.)
요청 방식이 POST인 경우 위와 같이 코드가 작성됩니다. ;

# 🎜🎜#

요청 방법이 GET인 경우 xhr.open을 사용합니다("요청 방법(GET/POST)", url 경로 + "?" 요청 데이터 + , "비동기/동기" ).

# 요청 방식이 GET일 때 전송 요청은 xhr.send(null)입니다.

#🎜 🎜#

요청 방식이 POST인 경우 , 전송 요청은 xhr.send(요청 데이터)입니다.

또한 POST를 사용할 때 xhr.send에

var xhr = null;
if(window.XMLHttpRequest){
    xhr = new XMLHttpRequest();
} else{
    xhr = new ActiveXObject("Mricosoft.XMLHTTP");
}

로그인 후 복사

#을 추가해야 합니다(요청 🎜🎜# 반환 값 수신

ajax를 사용할 때 이벤트 Readystatechange 이벤트를 사용하는 것이 좋습니다. 요청이 서버로 전송되면 일부 응답 기반 작업을 수행해야 합니다.

Readystatechange가 변경되면 이 이벤트가 실행됩니다.

readyState：请求的状态，返回的是状态码（0 - 4）：0（未初始化）open还没有调用、1（载入）已经调用了send（）正在发送请求、2（载入完成）send方法已经完成已经收到了全部的响应内容、3（解析）正在解析响应内容、4（完成）响应内容解析完成可以在客户端用了。

responseText：返回请求的内容。

status：返回请求的结果码：返回200（成功）、返回404（未找到）、返回5**（5开头）（服务器错误）

封装Ajax

在封装ajax的时候会使用到参数传递，因此必须写个方法作为对象属性转换为ajax请求数据的方法

下面是ajax封装，并举例：

function ajax(options){
    var xhr = null;
    var params = formsParams(options.data);
    //创建对象
    if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest()
    } else {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    // 连接
    if(options.type == "GET"){
        xhr.open(options.type,options.url + "?"+ params,options.async);
        xhr.send(null)
    } else if(options.type == "POST"){
        xhr.open(options.type,options.url,options.async);
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        xhr.send(params);
    }
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4 && xhr.status == 200){
            options.success(xhr.responseText);
        }
    }
    function formsParams(data){
        var arr = [];
        for(var prop in data){
            arr.push(prop + "=" + data[prop]);
        }
        return arr.join("&");
    }
}

ajax({
    url : "a.php",  // url---->地址
    type : "POST",   // type ---> 请求方式
    async : true,   // async----> 同步：false，异步：true 
    data : {        //传入信息
        name : "张三",
        age : 18
    },
    success : function(data){   //返回接受信息
        console.log(data);
    }
})

로그인 후 복사

本篇文章到这就结束了（想看更多就到PHP中文网AJAX使用手册栏目中学习），有问题的可以在下方留言提问。

위 내용은 Ajax의 장점과 단점은 무엇입니까? 아약스를 올바르게 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!