아약스 소개. 비동기 Ajax 요청이 아닌 동기 요청을 수행하도록 jQuery를 얻으려면 어떻게 해야 합니까? Jquery 동기식 아약스

페이지를 다시 로드하지 않고 서버에 요청합니다. 이는 많은 설정이 포함된 낮은 수준의 방법입니다. 이는 다른 모든 ajax 메소드의 작동의 기초가 됩니다. 두 가지 사용 옵션이 있습니다:

url — 요청 주소.
설정 - 이 매개변수에서 이 요청에 대한 설정을 지정할 수 있습니다. (name:value, name:value...) 형식의 개체를 사용하여 지정됩니다. 어떤 설정도 필요하지 않습니다. $.ajaxSetup() 메서드를 사용하여 기본 설정을 지정할 수 있습니다.

설정 목록

↓ 이름 : 유형 (기본값)

요청이 이루어지면 헤더는 서버에서 예상되는 허용된 콘텐츠 유형을 나타냅니다. 이러한 유형의 값은 accepts 매개변수에서 가져옵니다.

기본적으로 페이지 다시 로드가 없는 모든 요청은 비동기식으로 발생합니다. 즉, 서버에 요청을 보낸 후 응답을 기다리는 동안 페이지 작동이 중지되지 않습니다. 요청을 동기식으로 실행해야 하는 경우 매개변수를 false 로 설정하세요. 도메인 간 요청과 "jsonp" 요청은 동기적으로 실행할 수 없습니다.

요청을 동기적으로 실행하면 요청이 완전히 완료될 때까지 페이지가 차단될 수 있다는 점에 유의하세요.

이 필드에는 서버에 Ajax 요청을 보내기 직전에 호출되는 함수가 포함되어 있습니다. 이 함수는 jqXHR 객체를 수정하는 데 유용할 수 있습니다(이전 버전의 라이브러리(최대 1.5)에서는 jqXHR 대신 XMLHttpRequest가 사용됨). 예를 들어 필요한 헤더 등을 변경/지정할 수 있습니다. jqXHR 객체는 첫 번째 인수로 함수에 전달됩니다. 두 번째 인수는 요청 설정입니다.

이 필드에서는 추가 요청 헤더를 지정할 수 있습니다. 이러한 변경 사항은 beforeSend가 호출되기 전에 입력되어 최종 헤더 편집이 이루어질 수 있습니다.

이 설정을 true 로 설정하면 서버의 응답이 이전 응답과 다른 경우에만 "성공" 상태로 요청이 실행됩니다. jQuery는 Last-Modified 헤더를 보고 이 사실을 확인합니다. jQuery-1.4부터 Last-Modified 외에도 "etag"도 확인됩니다(두 가지 모두 서버에서 제공되며 서버에서 요청한 데이터가 이전 요청에서 변경되지 않았음을 브라우저에 알리는 데 필요함). .

jQuery가 다르게 인식한 경우에도 페이지의 소스 상태를 로컬로 설정할 수 있습니다(마치 파일 프로토콜에 있는 것처럼). 라이브러리는 파일, * 확장 및 위젯 프로토콜의 경우 페이지가 로컬에서 실행되고 있다고 결정합니다.

매개변수 값을 설정하는 것이 좋습니다. isLocal전역적으로 - 개별 Ajax 요청 설정이 아닌 $.ajaxSetup() 함수를 사용합니다.

jsonp 요청 중에 URL에 추가되는 매개변수의 이름을 정의합니다(기본적으로 "콜백"이 사용됩니다 - "http://siteName.ru?callback=...").

jQuery-1.5부터 이 매개변수를 false로 설정하면 URL에 추가 매개변수가 추가되지 않습니다. 이 경우 jsonpCallback 속성의 값을 명시적으로 설정해야 합니다. 예: (jsonp:false, jsonpCallback:"callbackName") .

서버가 jsonp 요청에 응답할 때 호출될 함수의 이름을 정의합니다. 기본적으로 jQuery는 이 함수에 대한 사용자 정의 이름을 생성하는데, 이는 라이브러리 작업을 단순화하는 데 선호되는 옵션입니다. 자체 jsonp 요청 처리 기능을 지정하는 이유 중 하나는 GET 요청의 캐싱을 개선하기 위한 것입니다.

jQuery-1.5부터는 서버 응답을 직접 처리하기 위해 이 매개변수에 함수를 지정할 수 있습니다. 이 경우 지정된 함수는 서버에서 받은 데이터를 반환해야 합니다. 지정된 함수에서는 첫 번째 매개변수에서 사용할 수 있습니다.

기본적으로 서버로 전송되는 모든 데이터는 "application/x-www-form-urlencoded"에 해당하는 문자열(url 형식: fName1=value1&fName2=value2&...)로 미리 변환됩니다. 이러한 처리를 받을 수 없는 데이터(예: DOM 문서)를 보내야 하는 경우 processData 옵션을 비활성화해야 합니다.

이 매개변수는 GET 유형의 도메인 간 Ajax 요청에 사용되며 dataType은 "jsonp" 또는 "script"일 수 있습니다. 교차 도메인 요청이 실행될 인코딩을 정의합니다. 이는 외부 도메인의 서버가 기본 도메인 서버의 인코딩과 다른 인코딩을 사용하는 경우 필요합니다.

(이 설정은 jQuery-1.5에서 도입되었습니다.)요청 실행 코드가 호출될 함수와 연관된 쌍 세트입니다. 예를 들어 코드 404(페이지가 존재하지 않음)의 경우 화면에 메시지를 표시할 수 있습니다.

$.ajax (( statusCode: ( 404 : function () ( 경고 ( "페이지를 찾을 수 없음" ) ; ) ) ) ) ;

요청 성공 코드에 응답하는 함수는 성공적인 요청 핸들러 함수(success 매개변수에 지정됨)와 동일한 인수를 받고, 오류 코드에 응답하는 함수는 오류 함수와 동일합니다.

서버에 대한 요청이 성공적으로 완료되면 호출되는 함수입니다. 세 가지 매개변수가 전달됩니다. 즉, 서버에서 전송되고 이미 사전 처리된 데이터(dataType마다 다름)입니다. 두 번째 매개변수는 실행 상태를 나타내는 문자열입니다. 세 번째 매개변수에는 jqXHR 객체가 포함됩니다(이전 버전의 라이브러리(최대 1.5)에서는 jqXHR 대신 XMLHttpRequest가 사용됨). jQuery-1.5부터는 단일 함수 대신 이 매개변수가 함수 배열을 허용할 수 있습니다.

서버의 응답을 기다리는 시간입니다. 밀리초 단위로 설정합니다. 이 시간이 초과되면 요청은 오류와 함께 완료되고 "timeout" 상태가 되는 오류 이벤트가 발생합니다(위 설명 참조).

$.ajax 함수가 호출되는 순간부터 시간이 계산됩니다. 현재 여러 다른 요청이 실행 중이고 브라우저가 현재 요청 실행을 지연시키는 일이 발생할 수 있습니다. 이 경우 시간 초과완료될 수 있지만 실제로는 요청이 아직 시작되지도 않았습니다.

jQuery-1.4 및 이전 버전에서는 XMLHttpRequest 객체가 시간 초과되면 오류 상태가 되고 해당 필드에 액세스하면 예외가 발생할 수 있습니다. Firefox 3.0 이상에서는 스크립트 및 JSONP 요청이 시간 초과되어도 중단되지 않습니다. 이 시간이 만료된 후에도 완료됩니다.

XMLHttpRequest 객체를 제공하는 함수입니다. 기본적으로 IE 브라우저의 경우 이 개체는 ActiveXObject이고 다른 경우에는 XMLHttpRequest입니다. 이 옵션을 사용하면 이 개체의 고유한 버전을 구현할 수 있습니다.

(이 설정은 jQuery-1.5.1에서 도입되었습니다.) XMLHttpRequest 객체의 해당 필드 값을 변경/추가하기 위한 (이름:값) 쌍 집합입니다. 예를 들어, 교차 도메인 요청을 실행할 때 withCredentials 속성을 true로 설정할 수 있습니다.

$.ajax (( url: a_cross_domain_url, xhrFields: ( withCredentials: true ) ) ) ;

jQuery-1.5에서 withCredentials 속성은 기본 XMLHttpRequest에서 지원되지 않으며 도메인 간 요청에서 무시됩니다. 이 문제는 라이브러리의 모든 후속 버전에서 수정되었습니다.

이벤트 핸들러

beforeSend, error, dataFilter, 성공 및 완료 설정(해당 설명은 이전 섹션에 있음)을 사용하면 각 Ajax 요청 실행의 특정 지점에서 발생하는 이벤트 핸들러를 설정할 수 있습니다.

보내기 전에요청이 서버로 전송되기 직전에 발생합니다. 오류요청이 실패하면 발생합니다. 데이터필터서버에서 데이터가 도착할 때 발생합니다. 서버에서 보낸 "원시" 데이터를 처리할 수 있습니다. 성공요청이 성공적으로 완료되면 발생합니다. 완벽한요청이 완료될 때마다 발생합니다.

간단한 사용 예. 요청이 성공적으로 완료되면 메시지가 표시됩니다.

$.ajax (( url: "ajax/test.html" , 성공: function () ( Alert ("로드가 수행되었습니다." ) ; ) ) ) ;

jQuery-1.5부터 $.ajax() 메소드는 추가 실행 핸들러를 지정할 수 있는 지연된 인터페이스를 구현하는 jqXHR 객체를 반환합니다. 핸들러를 설치할 수 있는 지연된 객체에 대한 표준 .done(), .fail() 및 .then() 메서드 외에도 jqXHR은 .success(), .error() 및 .complete() 를 구현합니다. 이는 Ajax 요청을 실행하기 위한 핸들러가 설치되는 메소드의 일반적인 이름을 따르기 위해 수행됩니다. 그러나 jQuery-1.8부터 이 세 가지 메서드는 더 이상 사용되지 않습니다.

jsonp 또는 도메인 간 GET 요청과 같은 일부 요청 유형은 XMLHttpRequest 객체 사용을 지원하지 않습니다. 이 경우 핸들러에 전달된 XMLHttpRequest 및 textStatus에는 undefine 값이 포함됩니다.

핸들러 내부에서 이 변수에는 매개변수의 값이 포함됩니다. 문맥. 설정되지 않은 경우에는 설정 개체가 포함됩니다.

데이터 유형 매개변수

$.ajax() 함수는 서버 자체에서 (MIME을 통해) 서버가 보낸 데이터 유형에 대해 학습합니다. 또한 이러한 데이터를 어떻게 해석해야 하는지 개인적으로 표시(명확화)할 기회도 있습니다. 이는 dataType 매개변수를 사용하여 수행됩니다. 이 매개변수에 가능한 값:

"xml"— 결과 XML 문서는 텍스트 형식으로 사용할 수 있습니다. 표준 jQuery 도구(및 HTML 문서)를 사용하여 작업할 수 있습니다. "html"— 결과 HTML은 텍스트 형식으로 제공됩니다. 태그에 스크립트가 포함되어 있으면 HTML 텍스트가 DOM에 배치될 때만 자동으로 실행됩니다. "스크립트"— 수신된 데이터는 자바스크립트로 실행됩니다. 일반적으로 서버의 응답을 포함하는 변수에는 jqXHR 개체가 포함됩니다. "json", "jsonp"— 수신된 데이터는 사전에 자바스크립트 객체로 변환됩니다. 구문 분석에 실패하면(json에 오류가 포함된 경우 발생할 수 있음) 파일 구문 분석 오류 예외가 발생합니다. 액세스하려는 서버가 다른 도메인에 있는 경우 json 대신 jsonp를 사용해야 합니다. Wikipedia에서 json 및 jsonp에 대해 알아볼 수 있습니다. "텍스트"— 수신된 데이터는 사전 처리 없이 일반 텍스트로 제공됩니다.

참고 1: 요청이 타사 도메인(dataType이 jsonp 또는 script와 동일한 경우에만 가능)으로 전송되면 오류 처리기 및 전역 이벤트가 실행되지 않습니다.

노트 2: dataType에 지정된 데이터 유형은 서버에서 제공하는 MIME 정보와 충돌하지 않아야 합니다. 예를 들어, xml 데이터는 서버에서 text/xml 또는 application/xml 로 표시되어야 합니다. 이것이 실패하면 jquery는 수신된 데이터를 지정된 유형으로 변환하려고 시도합니다(이에 대한 자세한 내용은 변환기 섹션 참조).

서버로 데이터 보내기

기본적으로 서버에 대한 요청은 HTTP GET 메서드를 사용하여 이루어집니다. POST 메소드를 사용하여 요청해야 하는 경우 유형 설정에서 적절한 값을 지정해야 합니다. POST 메서드를 사용하여 전송된 데이터는 W3C XMLHTTPRequest 표준에서 요구하는 대로 인코딩이 다른 경우 UTF-8로 변환됩니다.

데이터 매개변수는 key1=value1&key2=value2(url의 데이터 전송 형식) 형식의 문자열로 지정하거나 (이름:값) 쌍 - (key1: "value1", key2: "값2") . 후자의 경우 데이터를 보내기 전에 jQuery는 $.param() 을 사용하여 주어진 객체를 문자열로 변환합니다. 그러나 processData 설정을 false 로 설정하면 이 변환을 되돌릴 수 있습니다. 예를 들어 xml 개체를 서버로 보내는 경우 문자열로 변환하는 것은 바람직하지 않습니다. 이 경우 contentType 설정을 다음에서 변경하는 것이 좋습니다. 애플리케이션/x-www-form-urlencoded더 적합한 MIME 유형으로.

논평:대부분의 브라우저는 현재 도메인, 하위 도메인 및 프로토콜이 아닌 리소스에 대한 Ajax 요청을 허용하지 않습니다. 그러나 이 제한사항은 jsonp 및 스크립트 요청에는 적용되지 않습니다.

서버로부터 데이터 수신

서버로부터 수신된 데이터는 dataType 매개변수의 값에 따라 문자열 또는 객체로 제공될 수 있습니다(위의 dataType 참조). 이 데이터는 ajax 요청 실행 핸들러의 첫 번째 매개변수에서 항상 사용할 수 있습니다.

$.ajax (( url: "some.php" , 성공: function (data) ( Alert ( "이익 데이터: " + data ) ; ) ) ) ;

텍스트 및 xml 유형의 경우 서버에서 보낸 데이터는 jqXHR, 즉 각각 responseText 또는 responseXML 필드에서도 사용할 수 있습니다.

고급 설정

전역 매개변수를 사용하면 개별 요청에 대해 이벤트 핸들러(.ajaxSend(), .ajaxError() 등)의 실행을 비활성화할 수 있습니다. 예를 들어 이러한 핸들러에서 애니메이션 로딩이 시작/중지되는 경우 유용할 수 있습니다. 그런 다음 일부 요청이 매우 자주 그리고 빠르게 실행되는 경우 핸들러 실행을 비활성화하는 것이 유용할 것입니다. 도메인 간 스크립트 및 jsonp 요청의 경우 전역 매개변수가 자동으로 비활성화됩니다.

서버에 요청하기 위해 인증 데이터(로그인/비밀번호)가 필요한 경우 Ajax 요청의 사용자 이름 및 비밀번호 설정에서 이를 지정할 수 있습니다.

서버에 대한 요청을 완료하는 데 일정 시간이 할당됩니다. 이 시간 동안 서버가 응답을 보내지 않으면 요청은 오류(상태 "시간 초과")와 함께 종료됩니다. 서버의 응답을 기다리는 시간은 제한 시간 설정에서 필요한 값(밀리초 단위)을 설정하여 변경할 수 있습니다.

호스트 인코딩이 ajax 요청에서 요청된 자바스크립트 파일의 인코딩과 다를 수 있습니다. 이러한 경우 scriptCharset 설정에서 후자의 인코딩을 지정해야 합니다.

대부분의 경우 Ajax 요청은 비동기적으로 발생하지만 어떤 경우에는 요청을 순차적으로 실행해야 할 수도 있습니다(서버로부터 응답을 받지 않으면 스크립트의 추가 실행이 불가능한 경우). 비동기 설정을 비활성화하면 요청을 동기식으로 만들 수 있습니다. 그러나 이 경우 서버의 응답을 기다리는 동안 페이지가 정지된다는 점을 기억할 가치가 있습니다.

사용 예

가장 간단한 사용 사례는 매개변수를 지정하지 않고 $.ajax()를 호출하는 것입니다.

$.ajax(); // GET 요청은 매개변수를 지정하지 않고 현재 페이지의 URL로 서버로 전송됩니다.

js 파일을 로드하고 실행해야 하는 경우 다음과 같이 할 수 있습니다.

$.ajax (( 유형: "GET" , url: "test.js" , dataType: "script" ) ) ;

두 개의 매개변수를 지정하고 사용자에게 성공적으로 완료된 요청을 알리는 POST 요청을 서버에 만들어 보겠습니다.

$.ajax (( 유형: "POST" , url: "some.php" , 데이터: "name=John&location=Boston" , 성공: function (msg) ( 경고 ( "데이터 도착: " + msg ) ; ) ) ) ;

원하는 HTML 페이지의 콘텐츠를 업데이트해 보겠습니다.

$.ajax (( url: "test.html" , 캐시: false , 성공: function (html) ( $("#results" ) .append (html) ; ) ) ) ;

서버에 동기 요청을 해보자. 요청이 실행되는 동안 페이지는 사용자 작업에 응답하지 않습니다.

// 서버에서 보낸 데이터를 html 변수에 씁니다. var html = $.ajax (( url: "some.php" , async: false ) ) .responseText ;

매개변수로 xml 객체를 서버에 보냅니다. 올바르게 전송하려면 매개변수의 사전 변환(processData:false)을 취소해야 합니다. 요청의 성공적인 완료를 위한 핸들러로 사용자 정의 함수인 handlerResponse를 지정합니다.

var xmlDocument = [ xml 문서 생성] ; $.ajax (( url: "page.php" , processData: false , data: xmlDocument, 성공: handlerResponse ) ) ;

고급 접근 방식

jQuery-1.5부터 $.ajax()를 더욱 깊이있게 사용할 수 있는 세 가지 새로운 방향이 있습니다. 그 중 첫 번째(사전 필터)를 사용하면 요청을 보내기 직전에 추가 조작을 수행할 수 있습니다. 두 번째 접근 방식(변환기)을 사용하면 서버에서 받은 데이터가 예상 형식과 일치하지 않는 경우 이를 변환하는 방법을 jQuery에 알려줄 수 있습니다. 세 번째 접근 방식(전송)은 가장 낮은 수준으로, 서버에 대한 요청을 독립적으로 구성할 수 있습니다.

사전 필터

이 접근 방식은 각 Ajax 요청이 이루어지기 전에 호출되는 핸들러를 설정하는 것으로 구성됩니다. 이 핸들러는 다른 ajax 핸들러 실행보다 우선합니다. $.ajaxPrefilter() 함수를 사용하여 설치됩니다.

$.ajaxPrefilter(함수(옵션, 원본옵션, jqXHR)( ) ) ;

어디
옵션— 현재 요청의 설정,
원본옵션- 기본 설정,
jqXHR— 이 요청의 jqXHR 객체입니다.

사전 필터는 사용자 정의 설정(즉, 요청에 지정된 라이브러리에 알려지지 않은 새 설정)을 처리하는 데 편리합니다. 예를 들어, abortOnRetry 설정을 직접 입력할 수 있습니다. 이 설정을 활성화하면 동일한 URL에서 다음 요청이 수신되면 보류 중인 요청이 재설정됩니다.

var currentRequests = ( ) ; $.ajaxPrefilter (함수 (옵션, 원본 옵션, jqXHR) ( if (options.abortOnRetry) ( if (currentRequests[ options.url ]) ( currentRequests[ options.url ] .abort () ; ) currentRequests[ options.url ] = jqXHR ; ) ) ;

ajaxPrefilter에서 기존 설정을 처리하는 것이 편리합니다. 예를 들어, 교차 도메인 요청을 도메인 서버를 통해 리디렉션되는 요청으로 변경하는 방법은 다음과 같습니다.

$.ajaxPrefilter (함수(옵션) ( if (options.crossDomain) ( options.url = "http://mydomain.net/proxy/" + encodeURIComponent( options.url ) ; options.crossDomain = false ; ) ) ;

또한 사전 필터가 작동할 dataType 값을 지정할 수 있습니다. 예를 들어 json 및 스크립트 유형을 지정할 수 있습니다.

$.ajaxPrefilter ( "json script" , function (options, originalOptions, jqXHR) ( // 옵션 변경, originalOptions 및 jqXHR 객체 확인) ) ;

마지막으로 dataType 값을 변경하여 원하는 값을 반환할 수 있습니다.

$.ajaxPrefilter (function (options) ( // URL이 특정 조건을 충족하면 dataType을 스크립트로 변경합니다. if (isActuallyScript(options.url) ) ( return "script" ; ) ) ;

이 접근 방식은 요청의 유형이 스크립트로 변경될 뿐만 아니라 첫 번째 매개변수에서 이 유형을 지정하는 다른 사전 필터 핸들러도 실행된다는 것을 보장합니다.

변환기

이 원칙은 설정에 지정된 데이터 유형이 서버에서 보낸 데이터 유형과 일치하지 않는 경우 작동하는 핸들러를 설치하는 것으로 구성됩니다.

Converters는 ajax 설정이므로 전역적으로 설정할 수 있습니다.

// 이 방법으로 // dataType에 지정한 mydatatype 유형 대신 text 유형의 데이터가 수신되는 경우 작동하는 핸들러를 설정할 수 있습니다. $.ajaxSetup (( 변환기: ( "text mydatatype" : function ( textValue ) ( if (valid( textValue ) ) ( // 전송된 텍스트 처리 return mydatatypeValue; ) else ( // 서버에서 보낸 데이터가 예상한 데이터와 일치하지 않으면 // 예외가 발생할 수 있습니다. throw 예외Object; ) ) ) ) ;

변환기는 자신만의 (사용자 정의) 데이터 유형을 도입할 때 도움이 될 것입니다. 이러한 dataType의 이름에는 소문자만 사용해야 한다는 점에 유의하는 것이 중요합니다! 위에서 언급한 "mydatatype" 데이터 유형에 대한 요청은 다음과 같습니다.

$.ajax(url, (dataType: "mydatatype" ) ) ;

JQuery는 "적게 작성하고 더 많은 작업을 수행"하는 것이 목표인 JavaScript 라이브러리입니다. jQuery는 사이트에 연결하고 사용하기 쉽습니다. jQuery를 사용하면 사이트에서 자바스크립트를 훨씬 쉽게 사용할 수 있습니다.

jQuery를 사용하면 수많은 자바스크립트 코드 줄을 제거하고 단 하나의 방법으로 이 많은 줄을 구현할 수 있습니다.

AJAX란 무엇입니까?

AJAX는 비동기식입니다. 즉, 브라우저는 요청을 보낸 후 응답을 기다리는 메시지 표시, 페이지 스크롤 등 원하는 모든 작업을 수행할 수 있습니다. JavaScript 및 XML입니다. 역동적이고 빠른 웹 페이지를 만드는 데 사용됩니다. AJAX를 사용하면 전체 페이지를 다시 로드하지 않고도 웹 페이지의 일부를 업데이트할 수 있습니다.

jQuery와 AJAX는 어떻습니까?

jQuery와 AJAX의 조합은 강력한 기능을 제공합니다. jquery와 ajax를 사용하면 XML, HTML, 일반 텍스트 등 다양한 형식으로 정보를 요청하고 받을 수 있습니다. JSON 형식을 사용하여 데이터를 교환할 수 있습니다. HTML 페이지에서 ajax 요청을 통해 수신된 데이터를 사용할 수 있습니다.

jQuery는 기존 브라우저 Ajax API를 더욱 강력하고 사용하기 쉽게 만듭니다. javascript를 사용하여 일반적인 방식으로 ajax 호출을 수행하는 것은 약간 까다롭습니다. 왜냐하면 다른 브라우저에는 XMLHttpRequest 객체를 생성하는 데 다른 접근 방식이 필요하다는 점을 고려해야 하기 때문입니다. 또한 Ajax 호출에 일반 자바스크립트를 사용하면 양식 등에서 데이터를 제출하는 것이 더 어려워집니다.

jQuery는 javascript의 AJAX 메소드를 확장하고 보다 유연한 접근 방식을 제공하는 간단하고 강력한 기능을 제공합니다.

이 짧은 기사에서는 간단한 PHP 형식으로 jQuery와 AJAX를 사용하는 방법을 보여 드리겠습니다. 시작해 보겠습니다... jQuery와 AJAX를 사용하려면 두 개의 파일이 필요합니다. 첫 번째 파일에는 ajax 요청이 이루어질 html/php 코드가 포함됩니다. 두 번째 파일에서는 ajax 요청을 처리하고 결과를 첫 번째 페이지로 반환합니다.

1단계: school.php 파일을 만들고 다음 코드를 붙여넣습니다.

위 코드에서는 학생 이름과 번호를 가져오고 jquery와 ajax를 사용하여 세부정보.php로 보냅니다.

function getdetails())( var name = $("#name").val(); var rno = $("#rno").val(); $.ajax(( 유형: "POST", url: " 세부 정보 .php", 데이터: (fname:name, id:rno) )).done(function(result) ( $("#msg").html(" 주소 롤 번호 " +rno +"는 "+result ) ;));

당신의 이름:
롤 번호:

2단계: Details.php를 만들고 여기에 다음 코드를 배치합니다.

위의 코드에서는 일련 번호와 이름을 사용하여 학생의 주소를 얻습니다.

이 예에서는 학교 데이터베이스와 학생 테이블을 만들어야 합니다. 학생 테이블에는 이름, 일련 번호 및 주소가 포함된 필드가 포함되어 있습니다.

이 기사가 도움이 되길 바랍니다.

설명: 비동기 HTTP(Ajax) 요청을 수행합니다.

버전에 추가됨: 1.5
버전에 추가됨: 1.0

$.ajax() 함수는 jQuery를 사용하여 전송된 모든 Ajax 요청의 기초가 됩니다. $.get() 및 .load()와 같이 사용하기 더 쉬운 여러 가지 상위 수준 대안이 있으므로 이 함수를 호출할 필요가 없는 경우가 많습니다. 덜 일반적인 옵션이 필요한 경우 $.ajax()를 통해 요청을 보다 유연하게 구성할 수 있습니다.

가장 간단한 형태로 $.ajax() 함수는 인수 없이 호출될 수 있습니다.

중요: 기본 설정은 $.ajaxSetup() 함수를 사용하여 설정할 수 있습니다.

이 예에서는 매개변수를 사용하지 않고 현재 페이지의 내용을 로드하지만 결과에는 아무 작업도 수행하지 않습니다. 결과를 사용하려면 콜백 함수 중 하나를 구현할 수 있습니다.

jqXHR 객체

$.ajax()에서 반환된 jQuery XMLHttpRequest(jqXHR) 개체는 jQuery 1.5부터 기본 XMLHttpRequest 개체의 상위 집합이었습니다. 예를 들어, responseText 및 responseXML 속성은 물론 getResponseHeader() 메서드도 포함되어 있습니다. 요청에 사용된 전송이 XMLHttpRequest가 아닌 다른 것(예: JSONP 요청의 스크립트 태그)인 경우 jqXHR 객체는 가능한 경우 기본 XHR 기능을 에뮬레이트합니다.

jQuery 1.5.1부터 jqXHR 객체에는 overrideMimeType() 메서드도 포함되어 있습니다(이는 jQuery 1.4.x에서 사용 가능했지만 jQuery 1.5에서는 일시적으로 제거되었습니다). .overrideMimeType() 메서드는 beforeSend() 핸들러에서 사용할 수 있습니다. 예를 들어 콘텐츠 유형 헤더 필드를 변경할 수 있습니다.

URL: "http://fiddle.jshell.net/favicon.png" ,

beforeSend: 함수(xhr) (

xhr.overrideMimeType("text/plain; charset=x-사용자 정의" );

Done(함수(데이터) (

if (콘솔 && console.log) (

console.log("데이터 샘플:" , data.slice(0 , 100 ));

jQuery 1.5의 $.ajax() 메소드에 의해 반환된 jqXHR 객체는 Promise 인터페이스를 구현하여 모든 Promise 속성, 메소드 및 동작을 제공합니다. 이러한 메서드는 $.ajax()로 시작된 요청이 완료될 때 호출되는 하나 이상의 인수를 사용합니다. 이를 통해 단일 요청에 여러 핸들러를 할당할 수 있고, 요청이 완료된 후에 핸들러를 할당할 수도 있습니다. (요청이 이미 완료된 경우 핸들러가 즉시 호출됩니다.) jqXHR 객체에서 사용 가능한 Promise 메소드:

jqXHR.done(function(data, textStatus, jqXHR) ());
jqXHR.fail(function(jqXHR, textStatus, errorThrown) ());
jqXHR.always(function(data|jqXHR, textStatus, jqXHR|errorThrown) ( )); (jQuery 1.6에 추가됨)
완전한 핸들러를 생성하는 대신 .always() 메서드는 더 이상 사용되지 않는 .complete() 메서드를 대체합니다.
jqXHR.then(function(data, textStatus, jqXHR) (), function(jqXHR, textStatus, errorThrown) ());

참고: jqXHR.success() , jqXHR.error() 및 jqXHR.complete() 핸들러는 jQuery 3.0에서 제거됩니다. jqXHR.done() , jqXHR.fail() 및 jqXHR.always() 를 각각 사용할 수 있습니다.

XMLHttpRequest 코드와의 이전 버전과의 호환성을 제공하기 위해 jqXHR 객체는 다음 속성과 메서드를 제공합니다.

준비 상태
상태
상태텍스트
요청이 각각 xml 및/또는 텍스트를 반환한 경우 responseXML 및/또는 responseText
setRequestHeader(name, value) 표준에서 벗어난 헤더는 이전 값과 새 값을 연결하는 대신 이전 값을 새 값으로 대체합니다.
getAllResponseHeaders()
getResponseHeader()
상태코드()
중단()

done , failure , Always 및 statusCode 가 가능한 모든 요구 사항을 다루기 때문에 onreadystatechange 메커니즘은 없습니다.

콜백 함수 순서

beforeSend , error , dataFilter , Success 및 Complete 매개변수는 모두 적절한 시점에 호출되는 콜백 함수 값을 취합니다.

jQuery 1.5부터는 실패 및 완료 함수와 jQuery 1.6부터 항상 관리되는 대기열에서 먼저 호출되므로 각 대기열 요소에 대해 둘 이상의 핸들러가 허용됩니다. $.ajax() 메서드 핸들러의 내부를 구현하는 지연된 메서드를 참조하세요.

$.ajax() 메소드에서 제공하는 콜백 함수는 다음과 같습니다.

beforeSend는 항상 호출됩니다. jqXHR 객체와 설정 객체를 매개변수로 사용합니다.

요청이 실패하면 오류가 호출됩니다. 적용 가능한 경우 jqXHR 객체, 오류 상태 문자열 및 예외 객체를 허용합니다. 일부 내장 오류는 "abort", "timeout", "No Transport"와 같은 문자열을 예외 개체로 제공합니다.

dataFilter는 응답 데이터가 성공적으로 수신되면 즉시 호출됩니다. 반환된 데이터와 dataType 매개 변수의 값을 매개 변수로 사용하고 성공 핸들러에 전달하기 위해 반환(수정된 데이터)해야 합니다.

요청이 성공하면 성공이 호출됩니다. 응답 데이터, 성공 코드가 포함된 문자열 및 jqXHR 객체를 허용합니다.

Promise 핸들러 - .done() , .fail() , .always() 및 .then() - 등록된 순서대로 실행됩니다.

요청의 성공 여부에 관계없이 요청이 완료되면 완료가 호출됩니다. 성공 또는 오류 상태의 형식화된 문자열인 jqXHR 객체를 허용합니다.

데이터 유형

$.ajax() 호출에 대한 다양한 유형의 응답은 성공 핸들러를 전달하기 전에 다양한 종류의 전처리를 거칩니다. 사전 준비 유형은 응답에 지정된 Content-Type 헤더 필드에 따라 다르지만 dataType 옵션을 사용하여 명시적으로 지정할 수 있습니다. dataType이 지정되면 Content-Type 헤더 필드가 무시됩니다.

가능한 데이터 유형은 text, html, xml, json, jsonp 및 script입니다.

text 또는 html을 지정하면 전처리가 발생하지 않습니다. 데이터는 단순히 성공 핸들러에 전달되며 jqXHR 객체의 responseText 속성을 통해 액세스할 수 있습니다.

xml이 지정된 경우 응답은 XMLDocument 성공 핸들러에 전달되기 전에 jQuery.parseXML을 사용하여 구문 분석됩니다. XML 문서는 jqXHR 객체의 responseXML 속성을 통해 액세스할 수 있습니다.

json이 지정된 경우 응답은 성공 핸들러의 개체에 전달되기 전에 jQuery.parseJSON을 사용하여 구문 분석됩니다. 결과 JSON 객체는 jqXHR 객체의 responseJSON 속성을 통해 액세스할 수 있습니다.

script가 지정되면 $.ajax()는 서버에서 수신된 JavaScript 코드를 실행한 후 이 코드를 문자열로 성공 핸들러에 전달합니다.

jsonp가 지정되면 $.ajax()는 요청 URL 문자열에 (기본) callback=? 매개변수를 자동으로 추가합니다. . $.ajax() 메서드에 전달된 설정 개체의 jsonp 및 jsonpCallback 매개 변수를 사용하여 각각 콜백 함수의 URL 매개 변수 이름과 JSONP 이름을 지정할 수 있습니다. 서버는 JSONP 핸들러에 전달될 올바른 Javascript를 반환해야 합니다. $.ajax()는 JSON 객체를 성공 핸들러에 전달하기 전에 이름으로 JSONP 함수를 호출하여 반환된 JavaScript 코드를 실행합니다.

서버로 데이터 보내기

기본적으로 Ajax 요청은 GET HTTP 메서드를 사용하여 전송됩니다. POST 메소드가 필요한 경우, type 매개변수를 사용하여 설정에서 메소드를 지정해야 합니다. 이 매개변수는 data 매개변수의 데이터가 서버로 전송되는 방식에 영향을 줍니다. POST 요청 데이터는 항상 W3C XMLHTTPRequest 표준에 따라 UTF-8 인코딩으로 서버에 전송됩니다.

data 매개변수에는 직렬화된 형식 key1=value1&key2=value2 또는 Javascript 객체(key1: "value1", key2: "value2")와 같은 모든 형식의 문자열이 포함될 수 있습니다. 후자 옵션을 사용하는 경우 데이터는 전송되기 전에 jQuery.param() 메서드를 사용하여 문자열로 변환됩니다. processData 매개변수를 false로 지정하면 이 처리를 비활성화할 수 있습니다. XML 문서를 서버로 보내려는 경우 처리가 바람직하지 않을 수 있습니다. 이 경우 contentType 매개변수를 application/x-www-form-urlencoded에서 보다 적절한 MIME 유형으로 변경합니다.

고급 설정

전역 매개변수는 .ajaxSend() , .ajaxError() 및 유사한 메소드로 등록된 핸들러의 실행을 방지합니다. 예를 들어 요청이 자주 빠르게 실행되는 경우 .ajaxSend()를 사용하여 구현된 로딩 표시기를 숨기는 데 유용할 수 있습니다. 교차 도메인 및 JSONP 요청의 경우 전역 매개변수가 자동으로 false 로 설정됩니다.

서버가 응답을 제공하기 전에 HTTP 인증을 수행하는 경우 사용자 이름과 비밀번호 옵션을 사용하여 사용자 이름과 비밀번호를 전송해야 합니다.

Ajax 요청은 시간 제한이 있으므로 오류를 포착하고 처리하여 최상의 사용자 경험을 제공할 수 있습니다. 요청 시간 초과는 일반적으로 기본적으로 설정되거나 요청별로 시간 초과 매개변수를 지정하는 대신 $.ajaxSetup()을 사용하여 전역적으로 설정됩니다.

기본적으로 요청은 항상 이루어지지만 브라우저는 캐시에서 응답을 제공할 수 있습니다. 캐시된 결과 사용을 비활성화하려면 캐시 매개변수를 false 로 설정하세요. 마지막 요청 이후 리소스가 어떻게 변경되었는지 보고하는 쿼리를 트리거하려면 ifModified 매개변수를 true 로 설정하세요.

scriptCharset 매개변수를 사용하면 태그(즉, script 또는 jsonp 데이터 유형)를 사용하는 요청에서 인코딩을 명시적으로 사용할 수 있습니다. 이는 원격 스크립트와 현재 페이지가 다른 인코딩을 사용하는 경우에 적용됩니다.

Ajax라는 단어의 첫 번째 문자는 "비동기식"을 의미합니다. 이는 작업이 병렬로 발생하고 실행 순서가 보장되지 않음을 의미합니다. $.ajax() 메서드의 async 매개 변수의 기본값은 true 입니다. 이는 요청이 이루어진 후에도 코드 실행이 계속될 수 있음을 나타냅니다. 이 옵션을 false로 설정하면(따라서 출력이 더욱 비동기화되지 않음) 브라우저가 응답하지 않게 될 수 있으므로 권장되지 않습니다.

$.ajax() 메소드는 생성된 XMLHttpRequest 객체를 반환합니다. 일반적으로 jQuery는 이 객체의 생성을 내부적으로 처리하지만 xhr 매개변수를 사용하여 기본 동작을 재정의하는 함수를 지정할 수 있습니다. 반환된 개체는 일반적으로 삭제될 수 있지만 요청을 조작하고 관리하기 위한 하위 수준 인터페이스를 제공해야 합니다. 특히 이 객체에 대해 .abort()를 호출하면 요청이 완료되기 전에 요청을 중지해야 합니다.

아약스 확장

jQuery 1.5부터 jQuery의 Ajax 구현에는 사전 필터, 전송 및 변환기가 포함되어 있어 Ajax 요청을 어떤 요구에도 맞게 매우 유연하게 사용자 정의할 수 있습니다.

변환 사용

$.ajax() 변환기는 한 데이터 유형에서 다른 데이터 유형으로의 변환을 지원합니다. 그러나 사용자 정의 데이터 유형을 알려진 데이터 유형(예: json)으로 변환하려면 내용 매개변수를 사용하여 응답의 Content-Type과 실제 데이터 유형 간의 매핑을 추가해야 합니다.

다른 도메인, 하위 도메인, 포트 또는 프로토콜에 대한 쿼리를 허용하지 않습니다.

스크립트 및 JSONP 요청에는 이 정책의 제한이 적용되지 않습니다.

AJAX가 무엇인지 말할 가치가 없다고 생각합니다. 웹 투제로의 출현으로 대부분의 사용자는 이미 전체 페이지를 다시 로드하는 데 열중하고 있으며 jQuery의 출현으로 구현이 훨씬 간단해졌기 때문입니다. .

메모: 모든 예제에서는 $(달러 기호) 함수를 사용하여 jQuery 메서드를 호출하는 데 약어를 사용합니다.

가장 간단한 것부터 시작해 보겠습니다. 페이지에 필요한 DOM 요소에 HTML 코드를 로드하는 것입니다. 이를 위해 load 메소드를 사용하겠습니다. 이 메서드는 다음 매개변수를 허용할 수 있습니다.

요청한 페이지의 URL

결과가 제공될 함수(선택적 매개변수)

다음은 JavaScript 코드의 예입니다.
//페이지 로딩이 완료되었을 때
$(문서) . 준비(함수() (
// ID = example-1인 요소를 클릭하면 정지됩니다.
$("#example-1" ) . 클릭(함수() (
// example.html 파일에서 HTML 코드 로드
$(이것) . load("ajax/example.html" ) ;
} )
} ) ;
로드된 데이터의 예(파일 내용 example.html):
jQuery.ajax 이것은 가장 기본적인 방법이며 이후의 모든 메서드는 jQuery.ajax 메서드에 대한 래퍼일 뿐입니다. 이 메소드에는 입력 매개변수가 하나만 있습니다. 즉, 모든 설정을 포함하는 객체입니다(기억할 가치가 있는 매개변수는 강조 표시됨).

async - 비동기 요청, 기본적으로 true
캐시 - 브라우저 데이터 캐싱을 활성화/비활성화합니다. 기본값은 true입니다.
contentType - 기본 "application/x-www-form-urlencoded"
데이터 - 전송된 데이터 - 문자열 또는 객체
dataFilter - 입력 데이터 필터
dataType - 콜백 함수에 반환된 데이터 유형(xml, html, script, json, text, _default)
global - Trigger - 전역 AJAX 이벤트 사용을 담당하며 기본적으로 true입니다.
ifModified - 트리거 - 다른 요청을 보내지 않도록 서버 응답에 변경 사항이 있는지 확인합니다. 기본적으로 false입니다.
jsonp - JSONP와 작동하도록 콜백 함수의 이름을 재설정합니다(기본적으로 즉시 생성됨).
processData - 기본적으로 전송된 데이터는 객체에 래핑되어 "application/x-www-form-urlencoded"로 전송됩니다. 필요한 경우 그렇지 않으면 비활성화됩니다.
scriptCharset - 인코딩 - JSONP 및 JavaScript 로딩과 관련됨
timeout - 타임아웃 시간(밀리초)
유형 - GET 또는 POST
url - 요청된 페이지의 URL

현지의:

beforeSend - 요청이 전송되기 전에 실행됩니다.
error - 오류가 발생한 경우
성공 - 오류가 발생하지 않은 경우
완료 - 요청이 끝나면 실행됩니다.

HTTP 인증을 구성하려면(О_о):

사용자 이름 - 로그인
비밀번호 - 비밀번호

자바스크립트 예:
$.아약스((
url: "/ajax/example.html" , // URL을 지정하고
dataType : "json" , // 로드된 데이터 유형
성공: function (data, textStatus) ( // 성공 함수에 핸들러를 연결합니다.
$.each (data, function (i, val) ( // 수신된 데이터 처리
/* ... */
} ) ;
}
) ) ; jQuery.get 데이터를 전달하기 위해 GET 요청을 사용하여 페이지를 로드합니다. 다음 매개변수를 허용할 수 있습니다.

요청한 페이지의 URL

전송된 데이터(선택적 매개변수)

결과가 제공될 콜백 함수(선택적 매개변수)

콜백 함수에 반환된 데이터 유형(xml, html, script, json, text, _default)

양식 제출 jQuery를 통해 양식을 제출하려면 나열된 방법 중 하나를 사용할 수 있지만 양식에서 데이터를 "수집"하는 편의를 위해 jQuery 양식 플러그인을 사용하는 것이 좋습니다. 파일 제출 jQuery를 통해 파일을 제출하려면, Ajax 파일 업로드 또는 원클릭 업로드 플러그인을 사용할 수 있습니다. JSONP를 별도로 사용하는 예 JSONP 사용에 주목할 가치가 있습니다. 이는 도메인 간 데이터 로딩을 수행하는 방법 중 하나이기 때문입니다. 조금 과장하면 JSON 형식으로 필요한 정보가 포함된 원격 JavaScript를 연결하고 원격 서버에 액세스할 때 지정하는 이름(보통 콜백 매개변수)인 로컬 함수를 호출하는 것입니다. 다음 다이어그램을 통해 좀 더 명확하게 확인할 수 있습니다(클릭 가능).

jQuery로 작업할 때 원격 서버에 대한 각 호출에 대해 콜백 함수의 이름이 자동으로 생성됩니다. 이렇게 하려면 다음과 같은 GET 요청을 사용하세요.
http://api.domain.com/?type=jsonp&query=test&callback=?
마지막 물음표(?)는 콜백 함수 이름으로 대체됩니다. 이 메서드를 사용하지 않으려면 jQuery.ajax() 메서드 호출 시 jsonp 옵션을 사용하여 콜백 함수 이름을 명시적으로 지정해야 합니다.

카테고리

편집자의 선택

아약스 소개. 비동기 Ajax 요청이 아닌 동기 요청을 수행하도록 jQuery를 얻으려면 어떻게 해야 합니까? Jquery 동기식 아약스

찾다

신청

인기 게시물

마지막 메모