이 글에서는 "Sharp JQuery"를 언급하고 인용하여 jQuery-Ajax와 그 주요 메소드에 대한 자세한 설명을 제공합니다.
a. 브라우저 플러그인이 필요하지 않습니다. <br/>브라우저 플러그인이 필요하지 않으며 대부분의 브라우저에서 지원됩니다. 브라우저 그냥 실행하세요.
b. 우수한 사용자 경험.
가장 큰 장점은 전체 페이지를 새로 고치지 않고도 데이터를 업데이트할 수 있어 웹 애플리케이션이 사용자 작업에 빠르게 응답할 수 있다는 점입니다.
c. 웹 프로그램의 성능 향상 <br/>기존 모드와 비교하여 Ajax 모드의 가장 큰 성능 차이는 기존 모드에서 데이터 제출이 형식(from)을 통해 구현된다는 점입니다. 얻은 데이터는 웹 페이지를 완전히 새로 고쳐서 전체 페이지의 내용을 얻는 것입니다. Ajax 모드는 XMLHttpRequest 객체를 통해 서버에 제출해야 하는 데이터만 제출합니다. 즉, 요청 시 전송됩니다. .
d. 서버 및 광대역에 대한 부담을 줄입니다.
Ajax의 작동 원리는 사용자 작업과 서버 응답을 비동기화하는 중간 계층을 사용자와 서버 사이에 추가하는 것과 동일합니다. 클라이언트에 Ajax 엔진을 생성하고 서버가 부담하는 일부 작업을 전통적인 방식으로 전송합니다. 클라이언트 리소스 처리를 용이하게 하고 서버 및 광대역에 대한 부담을 줄여줍니다.
a. XMLHttpRequest 객체에 대한 브라우저 지원 부족
Ajax의 단점 중 하나는 먼저 브라우저에서 발생합니다. IE5.0 이상 버전만 XMLHttpRequest 객체를 지원합니다(이 단계의 대부분의 클라이언트는 IE6 이상입니다). 나중에 Ajax 애플리케이션을 실행하려면 일반적으로 다양한 브라우저에서 프로그래머는 Aajx 애플리케이션이 다양한 브라우저와 더 잘 호환될 수 있도록 브라우저 간의 차이점을 고려하여 코딩하는 데 많은 노력을 기울여야 합니다.
b. 브라우저의 앞으로 및 뒤로 버튼의 일반 기능을 제거합니다. <br/>Ajax에서는 사용자가 앞으로 버튼을 사용할 수 있도록 특정 방법(앵커 포인트 추가)을 사용할 수 있지만, 앞으로 및 뒤로 버튼의 기능은 유효하지 않습니다. 그러나 전통적인 방법에 비해 훨씬 더 번거로운 일입니다. 사용자는 Ajax 상호작용을 실행하기 위해 버튼을 클릭할 때 이를 원하지 않는 경우가 많습니다. 그런 다음 습관적으로 뒤로 버튼을 클릭하면 가장 바람직하지 않은 결과가 발생하여 브라우저가 이전 페이지로 돌아가고 Ajax 상호 작용을 통해 얻은 콘텐츠가 완전히 사라졌습니다.
c. 검색 엔진에 대한 지원 부족 <br/>일반적으로 검색 엔진은 크롤러를 사용하여 인터넷에 있는 수십억 개의 대규모 데이터를 검색하고 정리합니다. 그러나 크롤러는 아직 이러한 이상한 JavaScript 코드를 이해하지 못하므로 Ajax로 인한 페이지 콘텐츠 변경으로 인해 사이트가 생성됩니다. 네트워크 홍보에 있어 기존 사이트에 비해 Ajax를 사용하는 것은 불리한 점입니다.
d. 개발 및 디버깅 도구 부족
JavaScript는 Ajax의 중요한 부분입니다. 현재 좋은 JavaScript 개발 및 디버깅 도구가 없기 때문에 많은 웹 개발자가 JavaScript를 두려워하고 있습니다. 이로 인해 Ajax 코드 작성이 더욱 어려워지고 있습니다. 그녀는 시각적 도구를 사용하고 코드를 직접 작성하는 것을 두려워하는데, 이는 모든 사람의 Ajax 적용에 어느 정도 영향을 미쳤습니다.
Ajax 방식은 웹 서버와 상호 작용해야 하므로 AppServe는 환경 설치를 위한 툴킷입니다.
다운로드 주소: https://www.appserv.org/en/download/Installation
: 단일 머신에서 계속해서 다음 버튼을 누르고 웹사이트 주소, 이메일 주소, 비밀번호 등 공통 정보를 입력합니다. 기본 포트는 80입니다.
브라우저에 "http://localhost:80"을 입력하면 다음 인터페이스가 나타나 설치가 성공했음을 나타냅니다.
사용법: 작성된 프로그램을 설치된 AppServwww 폴더에 복사한 후 주소창에 "http://loaclhost:80/프로그램 파일명"을 입력하여 접근합니다.
jQuery 라이브러리에는 완전한 Ajax 호환 제품군이 있습니다. 내부의 함수와 메소드를 사용하면 브라우저를 새로 고치지 않고도 서버에서 데이터를 로드할 수 있습니다.
https://www.w3school.com.cn/jquery/jquery_ref_ajax.asp
위 그림에서,
.
이전에 "jquery ajax-ajax() 메서드에 대한 자세한 설명"이라는 기사를 게시했습니다.
자세한 내용은 https://juejin.cn/post/7019188063704350756을 클릭하세요.
다른 메소드와 다릅니다. 가장 간단하고 일반적으로 사용되는 메소드는 원격 HTML 코드를 로드하여 DOM에 삽입할 수 있습니다.
구조
로드( url , [data] , [callback] )
매개변수
응용 프로그램
1) HTML 문서 로드
먼저 load() 메서드에 의해 로드되고 페이지에 추가되는 HTML 파일(test.html)을 빌드합니다. HTML 코드는 다음과 같습니다.
<!DOCTYPE html> <html> <머리> <meta charset="utf-8"> <title>테스트</title> </head> <본문> <div> <p>안녕하세요!</p> <ul> <li>씨</li> <li>C#</li> <li>C++</li> <li>자바</li> <li>.Net</li> <li>JSP</li> <li>ASP</li> <li>PHP</li> <li>파이썬</li> <li>ios</li> <li>안드로이드</li> <li>자바스크립트</li> <li>CSS</li> <li>HTML</li> <li>XML</li> <li>뷰</li> <li>반응</li> <li>각도</li> <li>SQL</li> </ul> </div> </body> </html>
그런 다음 Ajax 이벤트를 트리거하는 버튼과 추가된 HTML 콘텐츠(test.html)를 표시하는 데 사용되는 ID "content"를 포함하여 새 빈 페이지(main.html)를 만듭니다
.<!DOCTYPE HTML> <html> <머리> <meta charset="utf-8"> <script src="jquery/jquery-2.1.1.js"></script> <title>메인</title> </head> <본문> <!-- load() 메소드 --> <button id="btn1">로드하려면 클릭하세요</button> <h1>로드된 콘텐츠:</h1> <div id="content1"></div> </body> </html>
다음으로 jQuery 코드를 작성합니다. DOM이 로드된 후 버튼을 클릭하여 로드 메소드를 호출하여 test.html의 콘텐츠를 ID가 "content"인 요소에 로드합니다.
<script type="text/javascript">
$(함수(){
// 로드(url) 메소드 $("#btn1").click(function(){
$("#content1").load("test.html")//클릭 시 test.html의 내용을 현재 페이지로 로드 })
})
</script> 실행 결과를
로드하기 전에:
로딩 후:
2) 로드된 HTML 문서를 필터링합니다.
위의 예는 test.html의 모든 콘텐츠를 main.html의 "content" ID를 가진 요소에 로드하는 것입니다. 선택기)를 달성합니다.
참고: URL과 선택기 사이에 공백이 있습니다.
예를 들어 test.html에서 p 태그의 내용만 로드하려면 코드는 다음과 같습니다.
<script type="text/javascript">
$(함수(){
// 로드(url, 선택기) 필터 $("#btn1").click(function(){
$("#content1").load("test.html p")
})
})
</script> 실행 결과
3) 전송 모드
load() 메소드 전송 모드는 매개변수 데이터에 따라 자동으로 지정됩니다. 매개변수가 전달되지 않으면 GET 메소드가 사용되며, 그렇지 않으면 자동으로 POST 메소드로 변환됩니다.
// load(url,fn) 메소드, 매개변수 전송 없음, GET 메소드 $("#btn1").click(function(){
$("#content1").load("test.html", function(){
// 코드
})
})
// load(url,fn) 메소드, 전달할 매개변수가 있음, POST 메소드 $("#btn1").click(function(){
$("#content1").load("test.html", {이름: "peiqi", 연령: "18"}, function(){
// 코드
})
}) 4) 콜백 매개변수
로드가 완료된 후 계속되어야 하는 작업을 위해 load() 메소드는 콜백 함수(콜백)를 제공합니다. 이 함수에는 "요청 반환 콘텐츠"와 "요청 상태"를 나타내는 3개의 매개변수가 있습니다. object"인 경우 코드는 다음과 같습니다.
$("#content1").load("test.html p", function(responseText, textStates, XMLHttpRequest) {
//responseText: 요청에 의해 반환된 콘텐츠 //textStates: 요청 상태: 성공 오류 수정되지 않은 시간 제한 4가지 유형 //XMLHttpRequest: XMLHttpRequest 객체}) 참고: Ajax 요청 성공 여부에 관계없이 load() 메서드에서; 요청이 완료(complete)되는 한 콜백 함수(콜백)가 트리거됩니다.
load()는 일반적으로 웹 서버에서 정적 데이터 파일을 가져옵니다. 일부 매개변수를 서버의 페이지에 전달해야 하는 경우 다음을 사용할 수 있습니다.
메소드(또는 $.ajax() 메소드).
알아채다:
메서드는 jQuery의 전역 함수입니다.
1) $.get() 메소드
$.get() 메소드는 GET 메소드를 사용하여 비동기 요청을 수행합니다.
구조
$.get(url, [data], [callback], [type])
매개변수
애플리케이션은
$.get() 메소드 사용을 소개하는 주석 페이지용 HTML 코드입니다. 코드는 다음과 같습니다:
<!-- $.get() 및 $.post() 메소드 --> <h3>댓글</h3> <p>이름:<input type="text" name="" id="name"></p> <p>콘텐츠:<textarea id="content2"></textarea></p> <button id="btn2">메시지를 남겨주세요</button> <div id="msg"></div>
이 코드로 생성된 페이지는 그림과 같습니다.
이름과 내용을 입력하신 후 댓글을 남겨주시면 됩니다.
a. 먼저 요청된 URL 주소를 결정해야 합니다.
$("#btn2").click(함수(){
$.get("test.php", 데이터 매개변수, 콜백 함수)
}) b. 제출하기 전에 이름과 콘텐츠 값을 매개변수 데이터로 백그라운드에 전달합니다.
$("#btn2").click(함수(){
$.get("test.php", {"username":$("#name").val(), "content":$("#content2").val()}, 콜백 함수)
}) c. 서버가 전달된 데이터를 수신하고 성공적으로 반환하면 콜백 함수를 통해 반환된 데이터를 페이지에 표시할 수 있습니다.
$.get() 메소드의 콜백 함수에는 두 개의 매개변수만 있습니다.
function(){
//data: 반환되는 내용은 XML 문서, json 파일, XHML 조각 등이 될 수 있습니다. //textStatus: 요청 상태: 성공 오류 수정되지 않은 시간 초과 4종} d. data 매개변수는 요청에 의해 반환된 내용을 나타내며, textStatus 매개변수는 요청 상태를 나타내며 콜백 함수는 데이터가 성공한 경우에만 호출할 수 있습니다(성공 또는 실패에 관계없이 load()가 호출됨).
// $.get() 메소드$("#btn2").click(function(){
$.get("test.php", {"사용자 이름":$("#name").val(),"content":$("#content2").val()}, function(data,textStatus) {
if(textStatus=="성공"){ //성공
// 코드
$(data).appendTo("#msg")
}
},
"html")//유형
}) 마.
2) $.post() 메소드는
$.get() 메소드와 구조 및 사용법이 동일하지만 여전히 다음과 같은 차이점이 있습니다.
a. GET 메소드는 URL 다음에 매개변수를 전달하고 데이터를 탐색합니다. 서버는 이를 캐싱하는데, POST 메소드는 HTTP 메시지의 엔터티 내용(즉, 요청 본문에 래핑됨)으로 서버에 전송되는 반면 POST 메소드의 보안이 더 높다는 것을 알 수 있습니다. GET 방식.
b. GET 방식은 전송되는 데이터에 크기 제한(보통 2KB 이하)이 있는 반면, POST 방식은 이론상 크기 제한이 없습니다.
c. GET 방식과 POST 방식으로 전송된 데이터는 서버 측에서 다르게 획득됩니다. PHP에서는 "_GET[]"로 GET 모드의 데이터를 얻을 수 있고, "_POST[]"로 POST 모드의 데이터를 얻을 수 있습니다 . 두 가지 방법 모두 "$_REQUEST[]"를 사용하여 얻을 수 있습니다.
d. GET 방식의 전송 속도는 POST 방식의 전송 속도보다 빠릅니다.
POST 및 GET 메소드로 제출된 모든 데이터는 $_REQUEST[]를 통해 얻을 수 있으므로 jQuery 함수만 변경되면 프로그램은 GET 요청과 POST 요청 간에 전환될 수 있습니다.
// $. post() 메소드 $("#btn2").click(function(){
$.post("test.php", {"사용자 이름":$("#name").val(),"content":$("#content2").val()}, function(data,textStatus) {
if(textStatus=="성공"){ //성공
// 코드
$(data).appendTo("#msg")
}
},
"html")//유형
}) 또한, load() 메소드가 매개변수와 함께 전달되면 POST 메소드가 요청을 전송하는 데 사용됩니다. 따라서 load() 메서드를 사용하여 동일한 기능을 완료할 수도 있습니다. 코드는 다음과 같습니다.
$("#btn2").click(function(){
$("#msg").load("test.php", {
"사용자 이름":$("#이름").val(),
"content":$("#content2").val()
});
}) 4.
) 메소드
페이지가 처음 로드될 때 필요한 모든 JavaScript 파일을 가져오는 것이 완전히 불필요한 경우가 있습니다.
$(document.createElement("script")).attr("src", "test.js").appendTo("head"); 를 동적으로 생성할 수 있지만
//또는 $("<script type='text/javascript' src='test.js' />").appendTo("head"); 그러나 이 방법은 이상적이지 않습니다. jQuery는 js 파일을 직접 로드할 수 있는 $.getScript() 메소드를 제공합니다. 이는 HTML 조각을 로드하는 것처럼 간단하고 편리하며, JavaScript 파일이 자동으로 실행되므로 JavaScript 파일 처리가 필요하지 않습니다.
구조
$.getScript( url , fn ); //url: 요청 주소 //fn: 콜백 함수
적용 <br/>현재 날짜를 가져오기 위한 nowDate.js 파일을 생성합니다. 코드는 다음과 같습니다.
function getNowDate(){
var 날짜 = 새 날짜
귀국일;
} "현재 시간 가져오기" 버튼을 클릭하면 최신 시간과 날짜가 표시됩니다.
//HTML code <!-- $.getScript() method -->
<button id="btn3">시간을 확인하려면 클릭하세요</button>
<div id="message1"></div>
//jQuery 코드// $.getScript() 메소드 $("#btn3").click(function(){
$.getScript("nowDate.js", 함수(){
var date1 = getNowDate(); //nowDate.js에서 getNowDate() 메서드를 호출하여 날짜를 가져옵니다. var txtHtml= "<div>"+ date1 + "</div>";
$("#message1").html(txtHtml);
})
}) 실행 결과를
로드하기 전에
:
로딩 후:
2) $.getJSON() 메소드
.
구조
$.getJSON(url,fn); //url: 요청 주소 //fn: 콜백 함수
애플리케이션은
새로운 test.json 파일을 생성하며 코드는 다음과 같습니다
.
"헬렌":{
"섹스":"여자",
"나이":18,
"체중":"50kg",
"키":"165cm"
},
"베드로":{
"섹스":"남자",
"나이":28,
"체중":"65kg",
"키":"185cm"
}
} 다음 코드를 사용하여 새 HTML 파일을 만듭니다.
<!-- $.getJSON() 메서드 --> <button id="btn4">JSON 파일을 로드하려면 클릭하세요</button> <div id="message2"></div>
로드 버튼을 클릭하면 페이지에 아무런 효과도 볼 수 없습니다. 코드는 다음과 같습니다.
// $.getJSON() 메서드 $("#btn4") .click(함수(){
$.getJSON("test.json", 함수(데이터){
console.log(data); //콘솔은 반환된 데이터를 출력합니다.})
}) 콘솔 출력은 그림과 같습니다.
위 함수는 JSON 파일(test.json)을 로드하지만 반환된 데이터를 처리하는 방법을 JavaScript에 알려주지 않으므로 콜백 함수에서 반환된 데이터를 처리할 수 있습니다.
일반적으로 우리는 얻은 데이터를 반복해야 합니다. 여기서는 전통적인 for 루프를 사용할 수도 있지만 전달할 수도 있습니다.
.each() 함수는 배열 또는 객체를 첫 번째 매개변수로 취하고 콜백 함수를 두 번째 매개변수로 사용합니다. 은 객체의 멤버이거나 배열의 첨자이고, 두 번째 비트는 변수 또는 내용에 해당하며, 코드는 다음과 같습니다.
// $.getJSON() 메서드 $("#btn4").click(function() {
$.getJSON("test.json", 함수(데이터){
console.log(data); //콘솔은 반환된 데이터를 출력합니다. //반환된 데이터를 처리합니다. var txtHtml = "";
$.each(데이터, 함수(색인, 항목){
txtHtml += "<div><h4>"
+ 색인 + ":</h4><ul><li>섹스:"
+ 항목["섹스"] + "</li><li>나이："
+ 항목["나이"] + "</li><li>체중:"
+ item["체중"] + "</li><li>키:"
+ 항목["높이"] + "</li></div>";
})
$("#message2").html(txtHtml);
})
}) 효과는 그림과 같습니다.
로드하기 전:
로딩 후:
[추천 학습: jQuery 동영상 튜토리얼, 웹 프론트엔드 동영상]
이상은 jQuery의 Ajax에 대해 이야기하고 주요 메소드에 대해 자세히 설명하는 내용입니다. 자세한 내용은 PHP 중국어 사이트의 다른 관련 기사를 참조하세요!
