jQuery Ajax에 대한 자세한 설명
jQuery Ajax 자세한 설명
jQuery는 Ajax 요청을 보내는 여러 가지 기능을 제공하며, 가장 핵심적이고 가장 복잡한 기능은 jQuery.ajax(옵션)이며, 다른 모든 Ajax 기능은 이를 단순화하여 사용할 수 있습니다. 그렇지 않으면 get, post, load 등과 같은 단순화된 메소드를 사용하는 것이 더 편리합니다. 따라서 가장 간단한 로드 메소드를 먼저 소개하겠습니다. :
1.load( url, [data], [callback] )
반환: jQuery 패키징 세트
설명:
load 메소드는 원격 HTML 파일 코드를 로드하여 DOM에 삽입할 수 있습니다. .
기본적으로 GET 방식이 사용되며, data 매개변수가 전달되면 Post 메소드가 사용됩니다.
- 추가 매개변수 전달 시 자동으로 POST 방식으로 변환됩니다. jQuery 1.2에서는 로드된 HTML 문서를 필터링하기 위한 선택기를 지정할 수 있으며 필터링된 HTML 코드만 DOM에 삽입됩니다. 구문은 "url #some > selector"와 같고 기본 선택기는 "body>*"입니다.
설명:
load는 가장 간단한 Ajax 함수이지만 사용에는 제한이 있습니다.
주로 다음 용도로 사용됩니다. direct HTML을 반환하는 Ajax 인터페이스
load는 jQuery 래퍼에서 호출되어야 하며 반환된 HTML을 객체에 로드하는 jQuery 래퍼 메서드입니다. 콜백 함수가 설정되어 있어도 여전히 로드됩니다. 그러나 load 인터페이스가 영리하게 설계되었으며 사용하기 쉽다는 것은 부인할 수 없습니다. 다음 예는 Load 인터페이스의 사용을 보여줍니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Ajax - Load</title>
<script type="text/javascript" src="../scripts/jquery-1.3.2-vsdoc2.js"></script>
<script type="text/javascript">
$(function()
{
$("#btnAjaxGet").click(function(event)
{
//发送Get请求
$("#divResult").load("../data/AjaxGetMethod.aspx?param=btnAjaxGet_click" + "×tamp=" + (new Date()).getTime());
});
$("#btnAjaxPost").click(function(event)
{
//发送Post请求
$("#divResult").load("../data/AjaxGetMethod.aspx", { "param": "btnAjaxPost_click" });
});
$("#btnAjaxCallBack").click(function(event)
{
//发送Post请求, 返回后执行回调函数.
$("#divResult").load("../data/AjaxGetMethod.aspx", { "param": "btnAjaxCallBack_click" }, function(responseText, textStatus, XMLHttpRequest)
{
responseText = " Add in the CallBack Function! <br/>" + responseText
$("#divResult").html(responseText); //或者: $(this).html(responseText);
});
});
$("#btnAjaxFiltHtml").click(function(event)
{
//发送Get请求, 从结果中过滤掉 "鞍山" 这一项
$("#divResult").load("../data/AjaxGetCityInfo.aspx?resultType=html" + "×tamp=" + (new Date()).getTime() + " ul>li:not(:contains('鞍山'))");
});
})
</script>
</head>
<body>
<button id="btnAjaxGet">使用Load执行Get请求</button><br />
<button id="btnAjaxPost">使用Load执行Post请求</button><br />
<button id="btnAjaxCallBack">使用带有回调函数的Load方法</button><br />
<button id="btnAjaxFiltHtml">使用selector过滤返回的HTML内容</button>
<br />
<div id="divResult"></div>
</body>
</html>위 예는 Load 메서드를 사용하는 방법을 보여줍니다.
팁: 항상 비용을 지불해야 합니다. 브라우저 캐시에 주의하고 GET 메소드 Timestamp 매개변수(net Date()).getTime()을 사용할 때 이를 추가하여 매번 전송되는 URL이 다르도록 하여 브라우저 캐싱을 피할 수 있습니다.
팁: ""와 같은 url 매개변수 뒤에 공백을 추가하면 "인식할 수 없는 기호" 오류가 발생하지만 요청은 여전히 정상적으로 전송될 수 있습니다. 그러나 HTML을 삭제하면 문제가 해결됩니다. .
2.jQuery.get( url, [data], [callback], [type ] )
설명:
원격 HTTP GET을 통해 정보 로드 요구.
복잡한 $.ajax를 대체하는 간단한 GET 요청 함수입니다. 요청이 성공하면 콜백 함수를 호출할 수 있습니다. 오류 발생 시 함수를 실행해야 하는 경우 $.ajax를 사용하세요.
설명:
이 함수는 Get 요청을 보냅니다. 매개변수는 URL에 직접 연결될 수 있습니다(예:
$.get("../data/AjaxGetMethod.aspx?param=btnAjaxGet_click");또는 데이터 매개변수를 통해 전달됨:
$.get("../data/AjaxGetMethod.aspx", { "param": "btnAjaxGet2_click" });). 효과가 있으며 데이터 매개변수가 URL의 요청에 자동으로 추가됩니다
URL의 매개변수가 데이터 매개변수를 통해 전달되는 경우 동일한 이름의 매개변수는 자동으로 병합되지 않습니다.
콜백의 서명 함수는 다음과 같습니다.
function (data, textStatus) {
// data could be xmlDoc, jsonObj, html, text, etc...
this; // the options for this ajax request
}여기서 data는 반환된 데이터이고 testStatus는 다음 값을 나타냅니다.
"timeout","error","notmodified","success","parsererror"
이는 콜백 함수에서 다양한 지침에 대한 참조를 얻는 것입니다. 옵션에 대해서는 다음을 참조하세요:
http://docs.jquery.com/Ajax/jQuery.ajax#options
유형 매개변수는 데이터 유형을 나타내며 다음 값일 수 있습니다:
"xml", "html", "script", "json", "jsonp", "text".
기본값 .
jQuery.getJSON( url, [data], [callback] ) 메서드는 jQuery.get(url, [data],[callback], "json")
3과 동일합니다. . jQuery.getJSON( url, [data], [callback] )
반환: XMLHttpRequest
다음과 동일: jQuery.get(url, [data],[callback], "json")
설명:
HTTP GET 요청을 통해 JSON 데이터를 로드합니다.
jQuery 1.2에서는 "myurl?callback=?"과 같은 JSONP 형식의 콜백 함수를 사용하여 다른 도메인에서 JSON 데이터를 로드할 수 있습니다. jQuery는 콜백 함수를 실행하기 위해 ?를 올바른 함수 이름으로 자동으로 대체합니다.
참고: 이 콜백 함수가 실행되기 전에 이 줄 뒤의 코드가 실행됩니다.
설명:
getJSON 함수는 get 함수의 유형 매개변수만 "JSON"으로 설정합니다. 콜백 함수에서 얻은 데이터는 이미 JSON 형식에 따라 구문 분석된 개체입니다. 서버 문자열은 다음과 같습니다.
{""pkid"":""0412"",""ProvinceId" ":" "LN"",""CityName"":""안샨"",""CityNameEn"":""안샨"",""PostCode"":""114000"",""isHotCity"": false}]
반환: XMLHttpRequest
동등함: jQuery.get(url, null, [콜백], "script" )
설명:
HTTP GET 요청을 통해 JavaScript 파일을 로드하고 실행합니다.
jQuery 1.2 이전에는 getScript가 동일한 도메인의 JS 파일만 호출할 수 있었습니다. 1.2에서는 도메인 전체에서 JavaScript 파일을 호출할 수 있습니다. 참고: Safari 2 이하에서는 전역 범위에서 스크립트를 동기식으로 실행할 수 없습니다. getScript를 통해 스크립트를 추가하는 경우 지연 기능을 추가해 주세요.
설명:
과거 도장 클래스 라이브러리를 사용할 때 공식 기본 파일이 크로스 도메인을 지원하지 않아 결국 도장 사용을 포기하게 되었습니다(인터넷에서 크로스 도메인 버전을 찾았지만 완벽하지 않다는 느낌이 들었습니다) 충분히) 그래서 저는 이 함수의 핵심 구현과 구현에 특히 관심이 있습니다.
먼저 get 함수를 포함한 모든 jQuery의 Ajax 함수를 사용하여 이 함수의 내부 구현을 이해했습니다. 마지막으로 jQuery.ajax()를 사용하면 getScript가 "script" 값을 전달합니다. 유형 매개변수는 마지막으로 Ajax 함수에서 유형 스크립트가 있는 요청이 다음과 같이 처리됩니다.
$.getJSON("../data/AjaxGetCityInfo.aspx", { "resultType": "json" }, function(data, textStatus)
{
alert(data.length);
alert(data[0].CityName);
});위 코드는 동적으로 스크립트 문을 생성합니다. 차단하고 헤드에 추가합니다:
var head = document.getElementsByTagName("head")[0];
var script = document.createElement("script");
script.src = s.url;스크립트가 로드되면 완료 후 헤드에서 삭제합니다.
head.appendChild(script);
이 기능의 도메인 간 액세스 및 다중 브라우저 지원을 주로 테스트했습니다. 결과:
| IE6 | FireFox | Notes | |
비교차 도메인 참조 js | pass | pass | 콜백 함수의 data 및 textStatus 모두 사용할 수 있습니다 |
| 도메인 간 참조 js | pass | pass | 콜백 함수에서 data와 textStatus 둘 다 undiffed |
다음은 getScript 함수를 사용하는 방법을 보여주기 위해 사용되는 주요 테스트 문입니다:
// Handle Script loading
if ( !jsonp ) {
var done = false;
// Attach handlers for all browsers
script.onload = script.onreadystatechange = function(){
if ( !done && (!this.readyState ||
this.readyState == "loaded" || this.readyState == "complete") ) {
done = true;
success();
complete();
// Handle memory leak in IE
script.onload = script.onreadystatechange = null;
head.removeChild( script );
}
};
}5. jQuery.post( url, [data], [callback], [type] )
반환 : XMLHttpRequest
지침:
원격 HTTP POST 요청을 통해 정보를 로드합니다.
복잡한 $.ajax를 대체하는 간단한 POST 요청 기능입니다. 요청이 성공하면 콜백 함수를 호출할 수 있습니다. 오류 발생 시 함수를 실행해야 하는 경우 $.ajax를 사용하세요.
설명:
제출 방법이 "GET"에서 "POST"로 변경된다는 점을 제외하면 구체적인 사용법은 get과 동일합니다.
6. jQuery.ajax( 옵션 )
반환: XMLHttpRequest
설명:
HTTP 요청을 통해 원격 데이터를 로드합니다.
jQuery 기본 AJAX 구현. 간단하고 사용하기 쉬운 상위 수준 구현을 보려면 $.get, $.post 등을 참조하세요.
$.ajax()는 생성된 XMLHttpRequest 객체를 반환합니다. 대부분의 경우 이 개체를 직접 조작할 필요는 없지만 특별한 경우에는 요청을 수동으로 종료하는 데 사용할 수 있습니다.
$.ajax()에는 각 구성 및 콜백 함수 정보를 포함하는 매개변수 키/값 객체라는 하나의 매개변수만 있습니다. 아래의 자세한 매개변수 옵션을 참조하세요.
참고: dataType 옵션을 지정하는 경우 서버가 올바른 MIME 정보를 반환하는지 확인하세요(예: xml은 "text/xml"을 반환함). 잘못된 MIME 유형은 예측할 수 없는 오류를 일으킬 수 있습니다. AJAX 요청에 대한 데이터 유형 지정을 참조하세요.
참고: dataType이 "script"로 설정된 경우 모든 원격(동일한 도메인 이름이 아닌) POST 요청은 GET 요청으로 변환됩니다. (DOM 스크립트 태그를 사용하여 로드하기 때문입니다.)
jQuery 1.2에서는 도메인 간에 JSON 데이터를 로드할 수 있으며, 사용 시 데이터 유형을 JSONP로 설정해야 합니다. "myurl?callback=?"과 같은 JSONP 형식을 사용하여 함수를 호출하면 jQuery는 콜백 함수를 실행하기 위해 자동으로 ?를 올바른 함수 이름으로 바꿉니다. 데이터 유형이 "jsonp"로 설정되면 jQuery는 자동으로 콜백 함수를 호출합니다.
설명:
이것은 jQuery에서 Ajax의 핵심 기능입니다. Ajax 요청을 보내는 위의 모든 기능은 결국 이 기능을 호출하게 되며 이러한 매개변수는 ajax를 완전히 제어하는 데 사용될 수 있습니다. Ajax 콜백에서 함수의 이 객체는 옵션 객체이기도 합니다.
간단한 get 및 post 함수가 가장 일반적으로 사용되므로 옵션 매개변수는 여기서 자세히 설명하지 않습니다.
![프론트엔드 Vue3 실전 전투 [손글씨 vue 프로젝트]](https://img.php.cn/upload/course/000/000/068/639b12e98e0b5441.png)
![APIPOST 튜토리얼 [네트워크 통신 관련 기술 개념의 대중화]](https://img.php.cn/upload/course/000/000/068/63996f34c6c94370.png)
