내 Ajax 코드는 얼마나 정교해야 합니까?

Question

나는 많은 온라인 튜토리얼에서 간단한 예제 Ajax 소스 코드를 보았습니다.제가 알고 싶은 것은 예제에 있는 소스코드를 사용해도 전혀 괜찮은지 여부입니다.

실제 애플리케이션에 들어가는 코드에 추가할 것이 더 있나요?

애플리케이션을 더욱 강력하고 안전하게 만들기 위해 어떤 모든 조치를 취해야 합니까?

다음은 웹에서 얻은 샘플 소스 코드입니다.

function getChats() {
    xmlHttp=GetXmlHttpObject();
    if (xmlHttp==null) {
            return;
    } 
    var url="getchat.php?latest="+latest;   
    xmlHttp.onreadystatechange=stateChanged;
    xmlHttp.open("GET",url,true);
    xmlHttp.send(null);
} 

function GetXmlHttpObject() {
    var xmlHttp=null;
    try {
            xmlHttp=new XMLHttpRequest();
    } catch (e) {
            try {
                    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
    }
    return xmlHttp;
}

Answer 1

귀하가 게시한 코드에는 한 가지 중요한 구성 요소가 누락되어 있습니다.함수 상태가 변경되었습니다.

자신이 게시한 코드를 잘 이해하지 못하는 경우 getchats.php 호출이 완료되면 "stateChanged" 함수가 호출되고 해당 함수가 응답 처리를 담당하게 됩니다.호출하는 스크립트와 함수 자체에는 "gets"라는 접두사가 붙으므로 응답이 여러분이 관심을 가질 것이라고 확신합니다.

그 외에도 게시한 코드를 개선할 수 있는 방법은 여러 가지가 있습니다.단일 "xmlHttp" 개체를 선언한 다음 이를 모든 함수에서 사용할 수 있도록 하면 작동할 것 같습니다(그렇지 않으면 stateChanged 함수가 응답을 받을 방법이 없기 때문입니다).마지막 요청(또는 마지막 몇 개)이 아직 응답하지 않기 전에 AJAX 요청을 실행하기 전까지는 괜찮습니다. 이 경우 개체 참조는 매번 최신 요청에 덮어쓰여집니다.

또한 가치가 있는 모든 AJAX 코드는 성공 및 실패(서버 오류, 페이지를 찾을 수 없음 등) 사례에 대한 기능을 제공하므로 적절한 메시지가 사용자에게 전달될 수 있습니다.

귀하의 웹사이트에서 AJAX 기능을 사용하고 싶다면 다음의 방향을 알려드리겠습니다. jQuery 또는 비슷한 뼈대.

그러나 실제로 기술과 그 뒤에서 무슨 일이 일어나고 있는지 이해하고 싶다면 지금 하고 있는 일을 계속하면서 작고 가벼운 AJAX 클래스를 스스로 구축하려고 할 때 구체적인 질문을 계속할 것입니다.이렇게 해서 만들었고, 오늘은 jQuery 프레임워크를 사용하지만..나는 그것이 뒤에서 어떻게 작동하는지 알고 있다는 사실이 여전히 기쁘다.

Answer 2

나는 다음과 같은 프레임워크를 사용할 것이다. DOMAssistant 이는 이미 여러분을 위해 힘든 작업을 완료했으며 더 유용한 기능을 추가할 뿐만 아니라 더욱 강력해질 것입니다.

그 외에도 코드를 작성하면 작업을 수행할 수 있는 것처럼 보입니다.

Answer 3

나는 Ajax에 사용할 수 있는 많은 라이브러리 중 하나를 사용하는 것을 솔직히 권장합니다.나는 사용한다 원기 나 자신, 다른 사람들이 선호하는 동안 jQuery.나는 프로토타입을 좋아하는데, 그 이유는 그것이 매우 미니멀하기 때문입니다.그만큼 프로토타입 Ajax 튜토리얼 잘 설명합니다.또한 오류를 쉽게 처리할 수 있습니다.

new Ajax.Request('/some_url',
  {
    method:'get',
    onSuccess: function(transport){
      var response = transport.responseText || "no response text";
      alert("Success! \n\n" + response);
    },
    onFailure: function(){ alert('Something went wrong...') }
  });