ajax아약스 시작하기


비고

AJAX (동기 J avaScript 습니 X ML)은 코드의 실행을 차단하지 않고도 외부의 데이터를 요청할 수있다. 대부분의 경우 이는 (XMLhttpRequests를 통해) 서버에서 페이지 나 정보를 요청한 다음 javascript를 사용하여 처리하고 표시 할 때 구현됩니다.

AJAX의 논 블로킹 특성은 그러한 소프트웨어 패턴을 광범위하게 만들어줍니다. 자바 스크립트가 브라우저에서 차단되므로 동기화 된 외부 호출은 데이터를 반환하거나 시간이 초과 될 때까지 호출 기간 동안 브라우저를 응답하지 않게 만듭니다. 사실상 애플리케이션이 외부 아키텍처에 전적으로 의존하고 그것이 얼마나 잘 수행되는지를 결정합니다.

AJAX 호출은 일반적으로 추가 기능이나 가독성을 제공하기 위해 추상화되지만 구현은 (일반적으로) XMLHttpRequest 사양을 기반으로합니다.

설치 또는 설정

AJAX 란 무엇입니까?


AJAX는 비동기 JavaScript 및 XML의 약자입니다. 요컨대 XMLHttpRequest 객체를 사용하여 서버 측 스크립트와 통신합니다. JSON, XML, HTML 및 텍스트 파일을 비롯한 다양한 형식으로 정보를 보내고받을 수 있습니다. -Mozilla 개발자 네트워크 2016

AJAX를 구현하는 가장 쉬운 방법은 특히 서버와의 통신을 계획하는 경우 jQuery를 사용하는 것입니다.

jQuery 란 무엇입니까?


jQuery는 빠르고 작으며 기능이 풍부한 JavaScript 라이브러리입니다. 다양한 브라우저에서 작동하는 사용하기 쉬운 API를 사용하면 HTML 문서 통과 및 조작, 이벤트 처리, 애니메이션 및 Ajax를 훨씬 간단하게 만들 수 있습니다. -jquery.com

많은 jQuery를 사용하지 않은 사람들을 위해 우리의 삶을 편하게하기 위해 사용할 수있는 함수로 생각하십시오. 이것은 AJAX로 사용하기에 완벽합니다. AJAX는 동일한 것을 수행하기 위해 작성해야하는 코드의 양을 줄여줍니다!

웹 사이트에 jQuery를 추가하는 방법

Ajax를 사용해야한다면 jQuery를 프로젝트에 추가해야한다. http://jquery.com/download/ 이 링크에서는 jquery를 추가하는 여러 가지 방법을 볼 수 있습니다. jQuery의 다운로드 버전을 사용하거나 CDN을 사용할 수 있습니다. http://jquery.com/download/#jquery-39-s-cdn-provided-by-maxcdn . 그러나 CDN을 사용하면 보안 위험이 있습니다. 프로젝트가 jquery를 사용하도록 요청하면 해커가 호출을 조작 할 수 있습니다. 다운로드 한 버전을 사용할 수 있다면 더 좋습니다. HTML 프로젝트에 jquery를 추가하는 방법을 볼 수 있습니다. 그것은 간단합니다. 첫 번째 예는 다운로드 된 소스를 사용하는 것입니다. http://jquery.com/download/#jquery 다운로드 링크를 사용하십시오. jquery를 사용하고 싶다면 압축 된 jQuery 3.1.1 다운로드를 다운로드하십시오. jquery-version.min.js 파일을 다운로드하면 프로젝트의 javascript 폴더와 같은 적절한 위치에 jquery-version.min.js 파일을 추가하십시오. 아래와 같이 src = jquery / location을 사용하십시오.

<head>

<script src="path/from/html/page/to/jquery.min.js"></script>

</head>
 

CDN 사용법을 설명합니다. 이 링크는 http://jquery.com/download/#using-jquery-with-a-cdn 을 통해 다양한 CDN (Content Delivery Network)을 볼 수 있습니다.

<head>

<script   src="https://code.jquery.com/jquery-3.1.1.min.js"   integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="   crossorigin="anonymous"></script>

</head>
 

보시다시피 CDN 제공 업체가 제공하는 태그를 추가해야합니다. 이제 html 페이지에 일부 스크립트를 추가하여 작동하는지 확인하십시오.

<script>
$(document).ready(function(){
    alert("jQuery Works")
});
</script>
 

jQuery 작동 경고가 표시되면 올바르게 추가했음을 의미합니다.

TypeScript를 사용하여 비동기 AJAX 호출 수행

장바구니에 제품 추가

다음 예제에서는 AJAX 및 TypeScript를 사용하여 비동기 적으로 데이터베이스 테이블에 제품을 추가하는 방법을 보여줍니다.

declare var document;
declare var xhr: XMLHttpRequest;

window.onLoad = () =>
{
    Start();
};

function Start()
{
    // Setup XMLHttpRequest (xhr).
    if(XMLHttpRequest)
    {
        xhr = new XMLHttpRequest();
    }
    else
    {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }

    AttachEventListener(document.body, "click", HandleCheckBoxStateChange);
}

function AttachEventListener(element: any, e, f)
{
    // W3C Event Model.
    if(element.addEventListener)
    {
        element.addEventListener(e, f, false);
    }
    else if(element.attachEvent)
    {
        element.attachEvent("on" + e, (function(element, f)
        {
            return function()
            {
                f.call(element, window.event);
            };
        })
        (element, f));
    }

    element = null;
}

function HandleCheckBoxStateChange(e)
{
    var element = e.target || e.srcElement;

    if(element && element.type == "checkbox")
    {
        if(element.checked)
        {
            AddProductToCart(element);
        }
        else
        {
            // It is un-checked.
            // Remove item from cart.
        }
    }
    else
    {
        break;
    }
}

AddProductToCart(e)
{
    var element = <HTMLInputElement>document.getElementById(e.id);

    // Add the product to the Cart (Database table)
    xhr.onreadystatechange = function()
    {
        if(xhr.readyState == 4)
        {
            if(xhr.status == 200)
            {
                if(element != null)
                {
                    console.log("200: OK");
                }
                else
                {
                    console.log(":-(");
                }
            }
            else
            {
                // The server responded with a different response code; handle accordingly.
                // Probably not the most informative output.
                console.log(":-(");
            }
        }
    }

    var parameters = "ProductID=" + encodeURIComponent(e.id) + "&" + "Action=Add&Quantity=" + element.value;

    xhr.open("POST", "../Cart.cshtml");
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhr.setRequestHeader("Content-length", parameters.length.toString());
    xhr.setRequestHeader("Connection", "close");

    xhr.send(parameters);

    return e.id;
}
 

이 예제를 완료하려면이 데이터를 실제로 데이터베이스에 삽입하도록 서버 측 코드를 업데이트하십시오. 위의 코드는 C #을 사용하고 있고 Cart.cshtml 파일이 있다고 가정합니다. 그러나 단순히 cshtmlphp 바꾸고 cshtml 언어로 서버 측 로직을 작성하십시오.

XMLHttpRequest 객체를 사용하여 보낸 간단한 Ajax 요청

var httpRequest = new XMLHttpRequest();

httpRequest.onreadystatechange = getData;

httpRequest.open('GET', 'https://url/to/some.file', true);
httpRequest.send();

function getData(){
    if (httpRequest.readyState === XMLHttpRequest.DONE) {
        alert(httpRequest.responseText);
    }
}
 

new XMLHttpRequest() 는 새로운 XMLHttpRequest 객체를 생성합니다. 이것은 우리가 요청을

onreadystatechange 비트는 상태가 변경 될 때마다 getData() 를 호출하라는 요청을 알려줍니다.

.open() 은 요청을 생성합니다. 요청하는 메소드 ( ' GET ', ' POST '등), 쿼리하는 페이지의 URL, 필요에 따라 요청을 비동기로 처리 할지 여부를 선택합니다

.send() 는 우리의 요청을 보낸다 - 이것은 선택적으로 .send(data) 와 같은 서버에 보낼 데이터를 받아 들인다.

마지막으로 getData() 는 요청 상태가 변경 될 때마다 호출되어야한다고 말한 함수입니다. readyState가 DONE 과 같으면 서버에서 수신 한 데이터 인 responseText 경고합니다.

더 많은 정보는 MDN 시작 안내서 를 참조하십시오.

서버와 통신하기위한 간단한 jQuery 예제

jQuery.ajax API 웹 사이트에서 가져온 것 :

$.ajax({
    method: "POST",
    url: "some.php",
    data: {
        name: "John",
        location: "Boston"
    },
    success: function(msg) {
        alert("Data Saved: " + msg);
    },
    error: function(e) {
        alert("Error: " + e);
    }
});
 

이 코드는 jQuery 덕분에 쉽게 읽고 이해할 수 있습니다.

  • $.ajax -이 비트는 jQuery의 ajax 기능을 호출합니다.

  • method: "POST" -이 줄은 우리가 서버와 통신하기 위해 POST 메서드를 사용할 것이라고 선언합니다. 요청 유형을 읽어보십시오!

  • url - 요청이 전송 될 것입니다 곳이 변수를 선언합니다. 당신은 어딘가로 요청을 보내는. 그것이 그 아이디어입니다.

  • data - 꽤 똑바로. 요청과 함께 보내는 데이터입니다.

  • success -이 함수는 여기에 msg 를 가져 오는 데이터로 무엇을 할 것인지 결정하기 위해 작성합니다. 예제에서 알 수 있듯이 현재 msg 가 반환 된 알림을 만드는 중입니다.

  • error -이 함수는 오류 메시지를 표시하기 위해 작성하거나 ajax 요청이 오류를 경험했을 때 작동 할 조치를 제공하기 위해 작성합니다.

  • .done 의 대안은

    success: function(result) {
        // do something
    });
     

동기화 - 비동기 아약스 요청

비동기 아약스 호출

이 유형의 아약스 호출에서는 코드가 호출이 완료 될 때까지 기다리지 않습니다.

$('form.ajaxSubmit').on('submit',function(){
    // initilization...
    var form   = $(this);
    var formUrl    = form.attr('action');
    var formType   = form.attr('method');
    var formData   = form.serialize();
    
    $.ajax({
        url: formUrl,
        type: formType,
        data: formData,
        async: true,
        success: function(data) {
            // .....
        }
    });
    //// code flows through without waiting for the call to complete
    return false;
});
 

동기식 아약스 호출

이 유형의 아약스 호출로 코드는 호출이 완료 될 때까지 대기합니다.

$('form.ajaxSubmit').on('submit',function(){
    // initilization...
    var form   = $(this);
    var formUrl    = form.attr('action');
    var formType   = form.attr('method');
    var formData   = form.serialize();
    var data = $.ajax({
            url: formUrl,
            type: formType,
            data: formData,
            async: false
        }).responseText;
    //// waits for call to complete
    return false;
});
 

간단한 콜백으로 바닐라 자바 ​​스크립트에서 ajax 사용하기

다음은 바닐라 자바 ​​스크립트 (es2015 아님)로 작성된 간단한 아약스 호출을 작성하는 함수입니다.

function ajax(url, callback) {
    var xhr;
     
    if(typeof XMLHttpRequest !== 'undefined') xhr = new XMLHttpRequest();
    else {
        var versions = ["MSXML2.XmlHttp.5.0", 
                        "MSXML2.XmlHttp.4.0",
                        "MSXML2.XmlHttp.3.0", 
                        "MSXML2.XmlHttp.2.0",
                        "Microsoft.XmlHttp"]

         for(var i = 0, len = versions.length; i < len; i++) {
            try {
                xhr = new ActiveXObject(versions[i]);
                break;
            }
            catch(e){}
         } // end for
    }
     
    xhr.onreadystatechange = ensureReadiness;
     
    function ensureReadiness() {
        if(xhr.readyState < 4) {
            return;
        }
         
        if(xhr.status !== 200) {
            return;
        }

        // all is well  
        if(xhr.readyState === 4) {
            callback(xhr);
        }           
    }
     
    xhr.open('GET', url, true);
    xhr.send('');
}
 

그것은 다음과 같이 사용될 수 있습니다 :

ajax('myFile.html', function(response) {
    document.getElementById('container').innerHTML = response.responseText;
});
 

Ecmascript 6 (es2015라고도 함)을 사용하려는 경우 fetch 메소드를 사용하면 약속을 반환 할 수 있습니다.

fetch('myFile.json').then(function(res){
    return res.json();
 });
 

es2015에 관한 furthner 독서는 다음 링크를 따라 가십시오 : 약속