아약스는 정확히 무엇입니까? Ajax의 배경 및 사용 소개(예제 분석 포함)

이 글에서는 주로 ajax의 세부사항과 ajax의 구체적인 의미, ajax 사용방법을 소개합니다. 이제 이 글을 함께 읽어볼까요

먼저 ajax가 무엇인지 살펴보겠습니다. ?

아약스(Ajax)라는 이름을 자주 듣는데, 아약스란 무엇일까요?

1: 배경 소개

우선 나랑 얘기 좀 하자, 야, 아약스로 발음하지 마~.

AJAX = 비동기 JavaScript 및 XML.

AJAX는 새로운 프로그래밍 언어가 아니라 기존 표준을 사용하는 새로운 방식입니다.

AJAX의 가장 큰 장점은 전체 페이지를 다시 로드하지 않고도 서버와 데이터를 교환하고 웹 페이지 콘텐츠의 일부를 업데이트할 수 있다는 것입니다.

AJAX에는 브라우저 플러그인이 필요하지 않지만 사용자가 브라우저에서 JavaScript를 실행할 수 있도록 허용해야 합니다.

2. 지식 분석:

Ajax는 JS를 사용하여 요청을 시작하고 서버에서 반환된 콘텐츠를 가져오는 것입니다. 이 기술과 이전 기술의 가장 큰 차이점은 사용자 경험을 향상시키는 "페이지가 새로 고쳐지지 않는다"는 것입니다.

그럼 ajax 요청을 어떻게 보내나요?

1. 객체 생성 XMLHttpRequest

var xhr = new XMLHttpRequest(); ie6 및 이전 버전을 지원하려면 var xhr=new ActiveXObject()

2.

3. 요청 매개변수 설정

4. 요청 시작

5.

DOM을 조작하여 동적 부분 새로 고침 달성

완전한 HTTP 요청이란 무엇입니까?

완전한 요청은 네 부분으로 구성됩니다.

다음으로 성공적인 요청의 상태 변경을 모니터링해야 합니다.

onreadystatechange: ReadyState의 변경 사항을 모니터링하는 데 사용됩니다.

readyState: 현재 요청의 상태를 나타냅니다. background

status: 처리 결과를 나타냅니다

readyState: 현재 요청의 백그라운드 상태를 나타냅니다.

0: 요청이 초기화되지 않았습니다(open()이 아직 호출되지 않았습니다)

1: 요청이 설정되었지만 아직 전송되지 않았습니다(send()가 아직 호출되지 않았습니다)

2: 요청이 전송되었으며 처리 중입니다

3: 요청이 처리 중입니다. 일반적으로 응답에 일부 데이터가 포함됩니다. is available

4: 응답이 완료되었으며 얻어서 사용할 수 있습니다. 서버가 응답한

및 status: 처리 결과(상태 코드)를 나타냅니다.

1XX는 요청이 수신되어 처리 중임을 나타냅니다.

status == 200은 처리 결과가 OK임을 나타냅니다.

상태 코드 :200 ~ 300은 서버가 정상적으로 반환됨을 의미합니다.

304: 요청자의 마지막 요청 이후 웹 페이지가 변경되지 않은 경우 서버는 이 응답을 반환하도록 구성하여 대역폭과 오버헤드를 절약합니다.

404: 찾을 수 없는 개체(404 찾을 수 없음)

503: 서버 시간 초과

요청 매개변수 설정

xhr 개체는 세 개의 매개변수를 허용합니다

1: 요청 유형을 나타냅니다
2 : 요청의 URL을 나타냅니다.
3: 비동기 여부를 나타냅니다

get/post/put/delete

Get과 post 메서드의 차이점:

get은 데이터를 가져오는 것입니다. null이거나 비어 있을 수 있습니다. 일반적으로 2000자로 정보를 보낼 수 있습니다. 일반적으로 쿼리(전원 등)에 사용됩니다.

post는 데이터를 보낼 수 있지만 post 메서드를 사용하여 데이터를 보낼 때는 setRequestHeader( ) HTTP 헤더를 추가하려면 동시에 post의 send() 메서드에서 보낼 데이터의 값을 써야 하는데, 이는 일반적으로 서버 리소스를 수정하는 데 사용되며 정보의 양에는 제한이 없습니다. , 더 안전합니다(자세한 내용을 보려면 PHP 중국어 웹사이트
AJAX 개발 매뉴얼 열을 참조하세요)

3 FAQ

포스트 제출 사용 시 콘텐츠 유형을 잊어야 합니다. 문제

4.해결책

xhr.open("post", "/carrots-admin-ajax/a/login",true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("name=" + name + "&pwd=" + code);

Content-type은 open과 send 사이의 요청 헤더로 배치되어야 합니다

5. 인코딩 연습

var xhr = new XMLHttpRequest();
function ip() {
    var name = $("#name").val();
    var code = $("#code").val();
// 指定通信过程中状态改变时的回调函数
    xhr.open("post", "/carrots-admin-ajax/a/login",true);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.send("name=" + name + "&pwd=" + code);
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
                if (JSON.parse(xhr.responseText).code >= 0) {
                    window.location.href = "http://dev.admin.carrots.ptteng.com/";
                } else {
                    $(".alert").html("该用户不存在或密码不正确");
                }
            }
        }
    };
}
$(function () {
    $("#summit").click(function () {
        var name = $("#name").val();
        var code = $("#pwd").val();
        $.ajax({
            type: "POST",
            url: "/carrots-admin-ajax/a/login",
            data: {
                "name": name,
                "pwd": code
            },
            // beforeSend: function(xhr){xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");},
            datatype:"json",
            success: function (data) {
                console.log(data);
                if (JSON.parse(data).code==0) {
                    alert(JSON.parse(data).message);
                }
                else {
                    alert(JSON.parse(data).message)
                }
            }
        })
    })
});

#🎜 🎜#6확장된 생각

Ajax의 장점과 단점은 무엇인가요? ### #####참조#참조### ## #####jqury ajax 메소드### ####초보자 튜토리얼#🎜🎜 ## 🎜🎜#

추가 토론

1. 요청 본문이 무엇인가요?

요청 본문은

param1=value1¶m2=value2의 키-값 쌍 형식을 통해 페이지 형식의 구성 요소 값을 형식 문자열로 인코딩합니다. 요청 매개변수에 대한 데이터입니다. 메시지 본문이 요청 매개변수를 전달할 수 있을 뿐만 아니라, 요청 URL도 "/chapter15/user.html?param1=value1¶m2=value2"와 유사한 메소드로 요청 매개변수를 전달할 수 있습니다.

2.xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

application/x-www-form-urlencoded 그것은 무엇을 의미합니까? form의 enctype 속성은 인코딩 방법으로 일반적으로 사용되는 두 가지가 있습니다: application/x-www-form-urlencoded 및 multipart/form-data. 양식-urlencoded.

x-www-form-urlencoded

action을 가져오면 브라우저는 x-www-form-urlencoded 인코딩을 사용합니다. 데이터를 문자열(name1=value1&name2=value2...)로 구성한 다음 해당 문자열을 URL 끝에 추가하고 ?로 분할한 후 새 URL을 로드합니다.

3. jQuery는 허용되는 데이터 유형을 어떻게 설정하나요?

Use datatype: "json" 및 허용할 데이터 유형 작성

이 글은 여기에서 끝납니다. (자세한 내용을 보려면 다음으로 이동하세요.) PHP 중국어 웹사이트

AJAX 사용자 매뉴얼

열을 참조하세요. 궁금한 점이 있으면 아래에 메시지를 남겨주세요.

위 내용은 아약스는 정확히 무엇입니까? Ajax의 배경 및 사용 소개(예제 분석 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!