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 작동 경고가 표시되면 올바르게 추가했음을 의미합니다.
서버와 통신하기위한 간단한 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;
});
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 시작 안내서 를 참조하십시오.
간단한 콜백으로 바닐라 자바 스크립트에서 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 독서는 다음 링크를 따라 가십시오 : 약속
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 파일이 있다고 가정합니다. 그러나 단순히 cshtml 을 php 바꾸고 cshtml 언어로 서버 측 로직을 작성하십시오.