AJAX 사용법이 확실하지 않습니다.

전 아주 신기 하네. 나는 자바 스크립트와 HTML을 배우기 위해 책을 읽었으므로 불행히도 이것에 관해 많이 배웠다.AJAX 사용법이 확실하지 않습니다.

이전에는 AJAX를 사용한 적이 없었으므로 어떻게 작동하는지, 온라인으로 검색했지만 모든 예제가 너무 복잡하다는 것을 알았습니다.

기본적으로 내가하고 싶은 것은 쿠키가 아닌 재생 목록을 저장하는 것입니다. 모든 사람이 볼 수 있고 덧붙일 수있는 내용 (주석 섹션과 비슷 함). 이것은 단지 예일뿐입니다. 다른 것을하고 있지만 html + js는 약간 큽니다. 내가 이것을 어떻게 할 것인지를 알고 싶기 때문에 그것을 이해할 수 있고 다른 곳에 적용 할 수있다.

이

는 몸과 그 아래에 내가 가진 코드가 될 것입니다 (현재 내 모든 코드는 [헤드]에) :

<body> 
    <form> 
     <input type="text" id="songInput" size="40" placeholder="Song Name"> 
     <img id="addButton" src="button.png"> 
    </form> 
    <ul id="playlist"></ul> 
</body> 

<script> 
    window.onload = load; 
    function load() { 
     var button = document.getElementById("addButton"); 
     button.onclick = buttonClick; 
    } 
    function buttonClick() { 
     var text = document.getElementById("songInput"); 
     var song = text.value; 
     var button = document.getElementById("addButton"); 
     var add = document.createElement("li"); 
     add.innerHTML = song; 
     var ul = document.getElementById("playlist"); 
     ul.appendChild(add); 
    } 
</script>

출처

2014-08-29 Roberto Chaves

글쎄, 당신은 구글하려고 했어? AJAX를 사용하는 예제가 많이 있습니다 - [lmgtfy] (http://bit.ly/17JgvGE) – Vucko

그럼 데이터베이스가 있습니다. https://togetherjs.com/에서이 정보를 살펴 보시기 바랍니다. 그 정도는 간단합니다. 또 다른 팁은 아약스와 DOM 조작을 위해 jQuery를 사용하는 것입니다. 왜냐하면 매우 배우기 쉽고 인터넷에는 jQuery 팁과 트릭이 가득하기 때문입니다. –

이것을 통해 ... http : //www.javatutorials.co.in/servlet-3-ajax-hello-world-example-using-jquery/ 그물을 통해 많은 예제가 있습니다. 그걸 Google로 보내주십시오. – Leo

먼저 당신이 AJAX가 무엇인지 이해해야한다. AJAX는 사용할 수있는 "도구"가 아니라 기술 (비동기 JavaScript + XML)의 이름입니다. 기본적으로 "서버에서 데이터 가져 오기/게시"를 의미합니다.

var xhr = new XMLHttpRequest();   //Create an XMLHttpRequest object 
xhr.open('get', url);     //Set the type and URL 
xhr.onreadystatechange = function(){  //Tell it what to do with the data when state 
             // changes 
    if(xhr.readyState === 4){   //4 is the code for "finished" 
     if(xhr.status === 200){   //Code 200 means "OK" 
      //success 
      var data = xhr.responseText; //Your data 
     }else{ 
      //error      //Deal with errors here 
     } 
    } 
}; 
xhr.send(null);       //After finished setting everything, send the 
             // request. null here means we are not send- 
             // ing anything to the server

이것은 복잡해 보일 수 있습니다, 그리고 xhr은 꽤 많이 반복 : vallina 자바 스크립트에서

, XMLHttpRequest은 당신이하고 서버에서 데이터를 보내고받을 수 있습니다. 그 문제는 말할 것도없고 we have to deal with when executing in IE.

그 해결책이 있습니다. 우리는 과정을 단순화하고 우리에게 힘든 일을하도록 도서관을 사용할 것입니다.

$.ajax({ 
    url: url, 
    data: { /*data here*/ }, 
    type: /*"GET" or "POST"*/ 
}).done(function(data){ 
    //success 
}).fail(function(){ 
    //error 
}); 
//Not complicated at all with jQuery

을 AJAX는 기술의 그룹은 "같은"을 할 수있는 더 많은 방법을 거기, 데이터를 수신/보낼이기 때문에 :

In jQuery

, 이것은 당신이 기본 XMLHttpRequest에 대한에해야 할 것입니다 맡은 일. 위 코드가 동일한 도메인 (서버의 페이지)을 가진 URL에서만 작동한다는 것을 알 수 있습니다. 이 제한을 우회하려면 JSONP이라는 또 다른 기술이 있습니다. 멋지지만, 간단히 말해서 " <script> 태그를 사용하여 그 한계를 넘어"있습니다. 그리고 물론, jQuery를 당신이 덮여있어 : 작동하지 않을 것입니다 Wikipedia's server에 정상 XMLHttpRequest 전화로 http://jsfiddle.net/DerekL/dp8vtjvt/
: 여기

$.ajax({ 
    url: url, 
    data: { /*data here*/ }, 
    type: /*"GET" or "POST"*/, 
    dataType: "JSONP"    //specifying dataType to be JSONP 
}).done(function(data){ 
    //success 
});

가 JSONP를 사용하여 위키 백과 오프 컨텐츠를 얻기의 간단한 예입니다. 그러나 사실을 악용함으로써 script tags are not restricted by the Same-Origin Policy 우리는 같은 것을 얻을 수 있습니다. JSONP가 작동하려면 래핑 된 콜백 호출을 사용하여 JSON을 반환 할 수 있도록 서버를 프로그래밍해야합니다.

출처

2014-08-29 06:17:41

AJAX 사용법이 확실하지 않습니다.

답변

관련 문제