이 기능보다 Ajax에 더 필요한 것은 무엇입니까?

StackOverflow https://stackoverflow.com/questions/34486

  •  09-06-2019
  •  | 
  •  

문제

나는 나를 위해 Ajax를 수행하는 작은 JS 함수와 요청에 POST 데이터를 추가하는 것과 유사한 다른 함수를 가지고 있습니다.Ajax가 너무 많은 라이브러리로 인해 큰 주제가 되었는데, 내 기능에서 무엇을 놓치고 있는지, 안전하지 않은지, 아니면 다른 걱정스러운 부분이 있는지?

function loadPage(pagePath, displayElement)
{
    var xmlHttp;

    try
    {
        // Firefox, Opera 8.0+, Safari
        xmlHttp=new XMLHttpRequest();
    }
    catch (e)
    {
        // Internet Explorer
        try
        {
            xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch (e)
        {
            try
            {
                xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch (e)
            {
                alert("Your browser does not support AJAX!");
                return false;
            }
        }
    }

    xmlHttp.onreadystatechange=function()
    {
        if(xmlHttp.readyState==4)
        {
            document.getElementById(displayElement).innerHTML = xmlHttp.responseText;
        }
    }

    xmlHttp.open("GET", pagePath, true);
    xmlHttp.send(null);
}
도움이 되었습니까?

해결책

자신만의 Ajax 코드를 롤링하지 않는 것이 좋습니다.대신 Prototype, Dojo 또는 기타 프레임워크를 사용하세요.처리하지 않는 모든 ReadyStates를 처리했으며(2는 전송되었음을 의미, 3은 처리 중을 의미 등) 잠재적으로 안전하지 않은 내용을 삽입하지 않도록 응답을 피해야 합니다. 자바스크립트나 뭔가를 페이지에 넣으세요.

더욱 강력한 프레임워크가 제공하는 또 다른 기능은 DOM의 항목을 대체하기 위해 innerHTML을 사용하는 것 이상의 기능을 제공한다는 것입니다.여기의 함수는 하나의 요소를 ajax 호출의 응답으로 바꾸는 데에만 사용할 수 있습니다.Ajax로 할 수 있는 일이 훨씬 더 많습니다.

다른 팁

이 줄을 제거하겠습니다.

alert("Your browser does not support AJAX!")

사용자가 이해하지 못하는 언어로 사용자에게 소리를 지르는 것은 실패보다 더 나쁩니다.:-)

나는 중첩된 try/catch 블록을 좋아하지 않으므로 다음과 같이 합니다.

var xmlHttp;
if (window.XMLHttpRequest) {
  // Firefox, Opera 8.0+, Safari
  xmlHttp=new XMLHttpRequest();
} else if (window.ActiveXObject) {
  try {
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  } catch (e) {
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
}

if (xmlHttp) {
  // No errors, do whatever you need.
}

내 생각엔 그게 효과가 있을 것 같아.그러나 이전에 언급했듯이 바퀴를 재발명해야 하는 이유는 라이브러리를 사용하는 것입니다.더 좋은 점은 그들이 어떻게 하는지 알아보세요.

jQuery는 아마도 가장 가벼운 인기 라이브러리 중 하나일 것입니다.

프로토타입에서도 마찬가지입니다.

function loadPage(pagePath, displayElement) {
    new Ajax.Updater(displayElement, pagePath);
}

프로토타입 API의 Ajax.Updater

누락된 내용을 실제로 확인하려면 해당 ajax 루틴에 대한 jQuery 또는 Prototype 소스 코드를 읽어보세요.댓글에 버그 번호가 있으면 그것도 찾아보세요.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top