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

Question

많은 온라인 자습서에서 간단한 Ajax 소스 코드 예제를 보았습니다. 제가 알고 싶은 것은 예제에서 소스 코드를 사용하는 것이 완전히 괜찮은지 아닌지입니다.

실제 응용 프로그램에 추가되는 코드는 더 추가 할 항목이 있습니까?

응용 프로그램을보다 강력하고 안전하게 만들려면 모든 단계를 수행해야합니까? 여기

내가 웹에서 가져온 샘플 소스 코드입니다 : 내가 DOMAssistant 같은 프레임 워크를 사용하는 것이

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

게시 한 코드에 중요한 요소가 하나 빠졌습니다 : stateChanged 함수.

자신이 게시 한 코드를 잘 이해하지 못하면 getchats.php에 대한 호출이 완료되고 "stateChanged"함수가 호출되고 그 함수가 응답을 처리 할 책임이 있습니다. 호출중인 스크립트와 함수 자체 앞에 "gets"라는 접미사가 있기 때문에 나는 응답이 당신이 관심을 가질만한 것이라는 것을 확신합니다.

그 외에도 다음과 같은 여러 가지 방법이 있습니다. 게시 한 코드를 개선하십시오. 나는 하나의 "xmlHttp"객체를 선언하고 모든 함수에서 사용할 수 있도록 만든다고 생각한다. (그렇지 않으면 stateChanged 함수가 응답을 얻지 못하기 때문에). 마지막 AJAX 요청 (또는 마지막 몇 가지)이 아직 회신되지 않은 상태에서 AJAX 요청을 실행할 때까지는 괜찮습니다.이 경우 개체 참조는 매번 최신 요청으로 덮어 씁니다.

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

웹 사이트에서 AJAX 기능을 사용하려는 경우 jQuery 또는 similarframework의 방향으로 알려주고 있습니다.

하지만 실제로 기술을 이해하고 싶지 않은 상황에서 무슨 일이 일어나고 있는지 알고 싶다면 스스로 작고 가벼운 AJAX 클래스를 만들려고 할 때 계속하고 특정 질문을해야합니다. 이것이 내가 한 일이며, 오늘날 jQuery 프레임 워크를 사용하고 있지만 .. 나는 그것이 장면 뒤에서 어떻게 작동하는지 아직도 알고있어서 기쁩니다.

Answer 2

하는 이미 당신을위한 노력을하고있다 더 강력 할뿐만 아니라 유용한 추가 추가합니다 풍모.

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

Answer 3

저는 Ajax에서 사용할 수있는 많은 라이브러리 중 하나를 사용하는 것을 솔직하게 권합니다. 다른 사람들은 jQuery을 선호하지만 나는 prototype을 사용합니다. 나는 최소한이기 때문에 프로토 타입을 좋아한다. Prototype Ajax tutorial을 잘 설명합니다. 또한 오류를 쉽게 처리 할 수 ​​있습니다.

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...') } 
    });