이 글에서는 주로 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: 현재 요청의 상태를 나타냅니다. backgroundstatus: 처리 결과를 나타냅니다readyState: 현재 요청의 백그라운드 상태를 나타냅니다.0: 요청이 초기화되지 않았습니다(open()이 아직 호출되지 않았습니다)1: 요청이 설정되었지만 아직 전송되지 않았습니다(send()가 아직 호출되지 않았습니다)2: 요청이 전송되었으며 처리 중입니다3: 요청이 처리 중입니다. 일반적으로 응답에 일부 데이터가 포함됩니다. is available4: 응답이 완료되었으며 얻어서 사용할 수 있습니다. 서버가 응답한및 status: 처리 결과(상태 코드)를 나타냅니다.
1XX는 요청이 수신되어 처리 중임을 나타냅니다. status == 200은 처리 결과가 OK임을 나타냅니다.상태 코드 :200 ~ 300은 서버가 정상적으로 반환됨을 의미합니다.
304: 요청자의 마지막 요청 이후 웹 페이지가 변경되지 않은 경우 서버는 이 응답을 반환하도록 구성하여 대역폭과 오버헤드를 절약합니다. 404: 찾을 수 없는 개체(404 찾을 수 없음)503: 서버 시간 초과요청 매개변수 설정xhr 개체는 세 개의 매개변수를 허용합니다1: 요청 유형을 나타냅니다
2 : 요청의 URL을 나타냅니다.
3: 비동기 여부를 나타냅니다
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. 요청 본문이 무엇인가요?
요청 본문은
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!