Ajax에서 JQuery로 Ajax learning_jquery

Ajax 기사
XMLDocument 및 XMLHttpRequest 객체
첫 번째: XMLHttpRequest 요청 객체 생성

코드 복사 코드는 다음과 같습니다.

function getXMLHttpRequest() {
var xRequest=null;
if(window.XMLHttpRequest) {
xRequest=new XMLHttpRequest() ;
}else if(typeof ActiveXObject != "정의되지 않음"){
xRequest=new ActiveXObject("Microsoft.XMLHTTP")
}
return xRequest; 🎜>
또는:

코드 복사 코드는 다음과 같습니다. var 요청 =null;

function createRequest() {

try {
request=new XMLHttpRequest() //비 Microsoft IE 브라우저
} catch(trymicrosoft) { //Microsoft IE
try {
request =new ActiveXObject("Msxml2.XMLHTTP");
} catch(othermicrosoft) {
try {
request=new ActiveXObject("Microsoft.XMLHTTP")
} catch (실패) {
request=null;
}
}
}
if (request==null)
alert(“요청 객체 생성 오류!”); }
[ code]
XMLHttpRequest 요청 객체를 생성하는 독립적인 함수를 호출할 수 있습니다.
참고: XMlHTTP 개체는 W3C 표준이 아니므로 개체를 생성할 때 다양한 브라우저 환경에 대한 지원을 고려해야 합니다.
XMLHTTP 객체는 총 6개의 메소드와 8개의 속성을 가지며 동기식과 비동기식의 두 가지 실행 모드를 지원합니다.
XMLHTTP 객체의 속성 및 메서드 목록(IXMLHTTPRequest 인터페이스에서): 속성 이름
유형
설명
onreadystatechange
N/A
준비가 되었을 때 호출할 이벤트 핸들러를 지정합니다. 상태 변경 함수, 비동기 작업에만 해당
ReadyState
Long
비동기 작업 상태: 초기화되지 않음(0), 로드 중(1), 로드됨(2), 대화형(3), 완료됨(4 )
responseBody
Variant
응답 메시지 본문을 부호 없는 바이트 배열로 반환
responseStream
Variant
응답 메시지 본문을 ADO 스트림 개체로 반환
responseText
String
응답 메시지 본문을 텍스트 문자열로 반환
responseXML
Object
서버에서 반환한 XMLDom
status
Long
HTTP 상태를 통해 응답 메시지 본문을 XMLDocument 개체로 구문 분석합니다.
statusText
문자열
서버 HTTP 응답 라인 상태
메서드 이름
설명
abort
현재 HTTP 요청 취소
getAllResponseHeaders
응답 정보에서 모두 검색 헤더 필드
getResponseHeader
응답 메시지 본문에서 HTTP 헤더 필드 값을 가져옵니다
open(method,url,boolAsync,bstrUser,bstrPassword)
HTTP 서버와의 연결 열기
send (varBody)
HTTP 서버에 요청을 보냅니다. 본문 텍스트를 포함할 수 있습니다.
setRequestHeader(bstrHeader, bstrValue)
요청의 헤더 필드 설정
두 번째: 서버에 요청 보내기
XMLHttpRequest 객체를 통해 서버에 요청을 보내는 것은 매우 간단합니다. 그냥 전달하면 됩니다. 서버 데이터를 생성할 페이지의 URL입니다.
[코드]
함수 sendRequest(url,params,HttpMethod) {
if(!HttpMethod){
HttpMethod="POST"
}
var req=getXMLHttpRequest() ;
if(req){
req.open(HttpMethod,url,true);
req.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
req.send(params);
}
}


위 코드를 통해 요청을 설정하면 동시에 제어권이 우리에게 반환됩니다. 서버는 각자의 작업을 수행하느라 바쁩니다.
셋째: 콜백 기능을 사용하여 요청 모니터링
XMLHttpRequest 객체를 통해 서버에 비동기 요청을 보내는데 요청이 완료되었는지 어떻게 알 수 있나요? 따라서 비동기 통신 처리의 두 번째 부분은 호출이 끝날 때 결과 정보를 얻을 수 있도록 코드에 진입점을 설정하는 것입니다. 이는 일반적으로 콜백 함수를 할당하여 수행됩니다.

콜백 함수는 대부분의 최신 UI 도구 상자에서 볼 수 있는 이벤트 중심 프로그래밍 접근 방식에 매우 적합합니다.
아래에서는 sendRequest() 함수를 다음과 같이 다시 작성합니다.




코드 복사

코드는 다음과 같습니다. var req=null; //전역 변수 선언 function sendRequest(url,params,HttpMethod) {

if(!HttpMethod){

HttpMethod="GET"
}
req=getXMLHttpRequest();
if(req){
req.onreadystatechange=onReadyStateChange; //요청을 모니터링하는 데 사용되는 onreadystatechange 콜백 함수입니다. 구체적으로 이벤트 처리는 사용자 정의 Javascript 함수 onReadyStateChange()를 통해 수행됩니다.
req.open(HttpMethod,url,true);
req.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
req.send(params);
}
}


다음 콜백 함수 onReadyStateChange는 서버에서 얻은 응답 정보를 처리하는 데 사용됩니다.
sourceprint?01 함수 onReadyStateChange(){
02 var data=null;
03 if (req.readyState==4){
04
05 if (req.status== 200) {
06 data=req.responseText;
07 } else {
08 data="loading....[" req.readState "]"
09 }
10
11 }
12 .....여기서 정보 출력 등 반환된 정보와 관련된 일부 작업을 수행할 수 있습니다.
13 }
위 코드에서는 XMLHttpRequest 객체의 responseText 속성을 사용하여 텍스트 문자열 형식의 응답 데이터를 가져옵니다. 이는 간단한 데이터에 유용합니다. 서버가 더 큰 구조화된 데이터 세트를 반환해야 하는 경우 responseXML 속성을 사용할 수 있습니다. 응답의 MIME 유형이 text/xml로 올바르게 설정된 경우 이 속성은 DOM 문서를 반환하므로 DOM 속성 및 함수(예: getElementById() 및 childNodes)를 사용하여 이를 처리할 수 있습니다.
JQuery Ajax
jQuery.ajax( options ): HTTP 요청을 통해 원격 데이터 로드
jQuery의 기본 AJAX 구현입니다. $.ajax()는 생성된 XMLHttpRequest 객체를 반환합니다. 대부분의 경우 이 개체를 직접 조작할 필요는 없지만 특별한 경우에는 요청을 수동으로 종료하는 데 사용할 수 있습니다. $.ajax()에는 각 구성 및 콜백 함수 정보를 포함하는 매개변수 키/값 객체라는 하나의 옵션 매개변수만 있습니다. 아래의 자세한 매개변수 옵션을 참조하세요. 매개변수 이름
유형
설명
url
문자열
(기본값: 현재 페이지 주소) 요청을 보낼 주소입니다.

문자열
(기본값: "GET") 요청 방법("POST" 또는 "GET")을 입력하고, 기본값은 "GET"입니다. 참고: PUT 및 DELETE와 같은 다른 HTTP 요청 방법도 사용할 수 있지만 일부 브라우저에서만 지원됩니다.
timeout
Number
요청 시간 제한(밀리초)을 설정합니다. 이 설정은 전역 설정보다 우선 적용됩니다.
async
부울
(기본값: true) 기본적으로 모든 요청은 비동기 요청입니다. 동기 요청을 보내야 하는 경우 이 옵션을 false로 설정하세요. 동기 요청은 브라우저를 잠그며 사용자는 다른 작업을 수행하기 전에 요청이 완료될 때까지 기다려야 합니다.
beforeSend
함수
요청을 보내기 전에 사용자 정의 HTTP 헤더를 추가하는 등 XMLHttpRequest 객체를 수정할 수 있는 함수입니다. XMLHttpRequest 객체가 유일한 매개변수입니다.
function (XMLHttpRequest) {
this; // 이 ajax 요청에 대한 옵션
}
cache
Boolean
(기본값: true) jQuery 1.2 새 함수, false로 설정됨 요청 정보는 브라우저 캐시에서 로드되지 않습니다.
완료
함수
요청 완료 후 콜백 함수(요청 성공 또는 실패 시 호출됨)입니다. 매개변수: XMLHttpRequest 객체, 성공 정보 문자열.
function (XMLHttpRequest, textStatus) {
this; // 이 ajax 요청에 대한 옵션
}
contentType
String
(기본값: "application/x-www-form- urlencoded") 서버에 정보를 보낼 때의 콘텐츠 인코딩 유형입니다. 기본값은 대부분의 애플리케이션에 적합합니다.
data
Object,
String
서버로 전송되는 데이터입니다. 요청 문자열 형식으로 자동 변환됩니다. GET 요청의 URL에 추가됩니다. 이 자동 변환을 비활성화하려면 processData 옵션 설명을 참조하세요. 키/값 형식이어야 합니다. 배열인 경우 jQuery는 자동으로 동일한 이름을 다른 값에 할당합니다. 예:
{foo:["bar1", "bar2"]}는 '&foo=bar1&foo=bar2'로 변환됩니다.
dataType
String
서버에서 반환할 것으로 예상되는 데이터 유형입니다. 지정하지 않으면 jQuery는 HTTP 패키지 MIME 정보를 기반으로 responseXML 또는 responseText를 자동으로 반환하고 이를 콜백 함수 매개 변수로 전달합니다. 사용 가능한 값:
"xml": jQuery에서 처리할 수 있는 XML 문서를 반환합니다.
"html": 스크립트 요소가 포함된 일반 텍스트 HTML 정보를 반환합니다.
"script": 일반 텍스트 JavaScript 코드를 반환합니다. 결과는 자동으로 캐시되지 않습니다.
"json": JSON 데이터를 반환합니다.
"jsonp": JSONP 형식입니다. "myurl?callback=?"과 같은 JSONP 형식을 사용하여 함수를 호출하면 jQuery는 콜백 함수를 실행하기 위해 자동으로 ?를 올바른 함수 이름으로 바꿉니다.
오류
함수
(기본값: 자동판단(xml 또는 html)) 요청이 실패할 경우 이 메소드가 호출됩니다. 이 메서드는 XMLHttpRequest 개체, 오류 메시지 및 (아마도) 캡처된 오류 개체라는 세 가지 매개 변수를 사용합니다.
function (XMLHttpRequest, textStatus, errorThrown) {
// 일반적으로 textStatus와 errorThown 중 하나만 값을 갖습니다.
this; // 이 ajax 요청에 대한 옵션
}
global
Boolean
(기본값: true) 전역 AJAX 이벤트를 트리거할지 여부입니다. false로 설정하면 ajaxStart 또는 ajaxStop과 같은 전역 AJAX 이벤트가 트리거되지 않습니다. 다양한 Ajax 이벤트를 제어하는 ​​데 사용할 수 있습니다.
ifModified
부울
(기본값: false) 서버 데이터가 변경될 때만 새 데이터를 가져옵니다. HTTP 패킷의 Last-Modified 헤더 정보를 사용하여 결정합니다.
processData
부울
(기본값: true) 기본적으로 전송된 데이터는 기본 콘텐츠 유형 "application/x-www-form-urlencoded"와 일치하도록 객체(기술적으로 문자열이 아님)로 변환됩니다. ". 변환하고 싶지 않은 DOM 트리 정보나 기타 정보를 보내려면 false로 설정하세요.
성공
함수
요청 성공 후 콜백 함수입니다.이 메소드에는 두 개의 매개변수가 있습니다. 서버는 데이터를 반환하고 상태를 반환합니다.
function(data, textStatus) {
// 데이터는 xmlDoc, jsonObj, html, text 등이 될 수 있습니다.
this; 이 ajax 요청에 대한 옵션
}
여기 Ajax 이벤트의 이 옵션은 모두 Ajax 요청의 옵션 정보를 가리킵니다.
jQuery.ajaxSetup( options ): 전역 AJAX 기본 옵션을 설정합니다.
예: AJAX 요청의 기본 주소를 "/xmlhttp/"로 설정하고, 전역 AJAX 이벤트 트리거를 금지하고, 기본 GET 메서드 대신 POST를 사용합니다. 후속 AJAX 요청에서는 옵션 매개변수가 설정되지 않습니다. 샘플 코드:
$.ajaxSetup({
url: "/xmlhttp/",
global: false,
type: "POST"
})
$.ajax ({ data: myData });
serialize() 및 serializeArray()
serialize(): 시퀀스 테이블의 내용은 문자열입니다.
serializeArray(): 테이블 요소를 직렬화하고('.serialize()' 메서드와 유사) JSON 데이터 구조 데이터를 반환합니다.
위의 JQuery Ajax 기본 구현은 거의 사용되지 않습니다. JQuery는 jQuery.ajax()를 캡슐화하므로 Ajax 비동기 호출을 더 쉽게 사용할 수 있습니다.
1.load( url, [data], [callback] ): 원격 HTML 파일 코드를 로드하고 DOM에 삽입합니다.
url(문자열): 요청된 HTML 페이지의 URL 주소입니다.
데이터(맵): (선택적 매개변수) 서버로 전송되는 키/값 데이터입니다.
콜백(Callback): (선택적 매개변수) 요청이 완료되었을 때의 콜백 함수입니다(성공할 필요는 없습니다).
이 메소드는 기본적으로 GET 메소드를 사용합니다. [data] 매개변수에 데이터가 전달되면 자동으로 POST 메소드로 변환됩니다. jQuery 1.2에서는 로드된 HTML 문서를 필터링하기 위한 선택기를 지정할 수 있으며 필터링된 HTML 코드만 DOM에 삽입됩니다. 구문은 "url #some > 선택기"입니다.
이 방법을 사용하면 양식과 같은 일부 HTML 파일을 쉽게 동적으로 로드할 수 있습니다.
2. jQuery.get( url, [data], [callback] ): GET 메서드를 사용하여 비동기 요청
url(String): 요청을 보낼 URL 주소
data(Map): (선택 사항) 키/값 쌍의 형태로 표현된 서버로 전송되는 데이터는 요청 URL에 QueryString으로 추가됩니다.
callback(함수): (선택) 로딩 성공 시 콜백 함수(Response의 반환 상태가 성공인 경우에만 호출되는 메소드).
3. jQuery.post( url, [data], [callback], [type] ): POST 메서드를 사용하여 비동기 요청
url(String): 요청을 보낼 URL 주소
data( Map): (선택) 서버로 전송할 데이터로, 키/값 쌍의 형태로 표현됩니다.
callback(함수): (선택) 로딩 성공 시 콜백 함수(Response의 반환 상태가 성공인 경우에만 호출되는 메소드).
type(문자열): (선택 사항) 공식적인 설명은 다음과 같습니다. 전송할 데이터 유형입니다. 실제로는 클라이언트가 요청한 유형(JSON, XML 등)이어야 합니다.
요청 형식을 "json"으로 설정한 경우 이때 Response에서 반환하는 ContentType을 Response로 설정하지 않은 것입니다. ContentType = "application/json "; 그러면 반환된 데이터를 캡처할 수 없습니다.
4. jQuery.getScript( url, [callback] ): GET 메소드를 통해 JavaScript 파일을 로드하고 실행하도록 요청합니다.
url(String): 로드할 JS 파일의 주소입니다.
콜백(함수): (선택 사항) 성공적인 로드 후 콜백 함수입니다.
jQuery 1.2 이전에는 getScript가 동일한 도메인의 JS 파일만 호출할 수 있었습니다. 1.2에서는 도메인 전체에서 JavaScript 파일을 호출할 수 있습니다. 참고: Safari 2 이하에서는 전역 범위에서 스크립트를 동기식으로 실행할 수 없습니다. getScript를 통해 스크립트를 추가하는 경우 지연 기능을 추가해 주세요.
이 방법은 예를 들어 편집기만 focus()인 경우 편집기에 필요한 JS 파일을 로드하는 데 사용할 수 있습니다.