XMLHttpRequest에서 단일 요소 추출

Question

실제로 AJAX 기반의 사이드 바 가젯을 만들고 있는데 AJAX 요청에서 단일 요소를 추출하는 방법을 찾고 있습니다.

내가 찾은 유일한 방법

아직 그런 일을 수행했다 :

var temp = document.createElement("div"); 
temp.innerHTML = HttpRequest.innerText; 
document.body.appendChild(temp); 
temp.innerHTML = document.getElementByID("WantedElement").innerText; 

을하지만 꽤 추한, 나는 실제 문서에 추가하지 않고 요청에서 직접 WantedElement를 추출하고 싶습니다 ...

감사합니다.

Answer 1

데이터를 관리한다면 가장 좋은 방법 일 것입니다. 여기에 대한 다른 해답들도 장점을 가지지 만 모두 결함이 있습니다. 예를 들어 querySelector() 메서드는 호스트 컴퓨터에서 IE8 모드로 실행되는 Windows 데스크톱 가젯에서만 사용할 수 있습니다. 정규식은 HTML 구문 분석에 특히 신뢰할 수 없으므로 사용하지 않아야합니다.

데이터를 제어하지 않거나 보안 프로토콜을 통해 데이터를 전송하지 않는 경우 코드 미학보다 보안에 더 관심을 가져야합니다. 잠재적 인 보안 위험이 가젯에 발생할 수 있습니다. unsanitized HTML을 문서에 삽입하여 호스트 컴퓨터에 복사합니다. 가젯은 사용자 또는 관리자 수준의 권한으로 실행되므로 확실한 보안 위험은 신뢰할 수없는 source/MITM 스크립트 삽입이므로 악성 스크립트가 실행중인 컴퓨터에 혼란을 야기 할 수있는 구멍을 남깁니다.

function getElementFromResponse(divId) 
{ 
    var h = new ActiveXObject("htmlfile"); 
    h.open(); 

    // disable activex controls 
    h.parentWindow.ActiveXObject = function() {}; 

    // write the html to the document 
    h.write(html); 

    h.close(); 
    return h.getElementById("divID").innerText; 
} 

또한 IE8의 toStaticHTML() 방법을 활용할 수 있지만, 가젯은 IE8 모드로 실행해야 할 것 :

하나 개의 잠재적 인 솔루션은 htmlfile ActiveXObject를 사용하는 것입니다.

Answer 2

하나의 옵션은 정규 표현식을 사용하는 것입니다 : 서버 응답이 더 복잡한 경우

var str = response.match(/<div id="WantedElement">(.+)<\/div>/); 
str[0]; // contents of div 

그러나, 내가 응답을 JSON 같은 데이터 형식을 사용하도록 건의 할 것입니다. 그런 다음 클라이언트 측에서 구문 분석하는 것이 훨씬 더 명확합니다.

Answer 3

AJAX 요청을 통해 HTML을 전달하는 것은 다소 이례적인 일입니다. 일반적으로 클라이언트가 직접 평가할 수있는 JSON 문자열을 전달하고 그 작업을 수행합니다.

즉, 자바 스크립트에서 HTML을 구문 분석 할 수있는 방법이 있다고 생각하지 않습니다. 방법은 모질라 파생 상품에해야 할 일 :

var r = document.createRange(); 
r.selectNode(document.body); 
var domNode = r.createContextualFragment(HTTPRequest.innerText); 

Answer 4

당신이 원하는 요소를 얻기 위해 getElementById를 호출 한 후 숨겨진 DIV 내부 XMLHttpRequest를의 응답을 추가하고있다. 나중에 div를 삭제하면 완료됩니다. 또는 이것을 처리하는 함수를 만들 수도 있습니다. getElementById는 DOM 트리의 그 부분을 제외하고 작동하지 않기 때문에

function addNinjaNodeToDOM(html) { 
    var ninjaDiv = document.createElement("div"); 
    ninjaDiv.innerHTML = html; 
    ninjaDiv.style.display = 'none'; 
    return ninjaDiv; 
} 

var wrapper = addNinjaNodeToDOM(HttpRequest.innerText); 
var requiredNode = wrapper.getElementById("WantedElement"); 
// do something with requiredNode 
document.body.removeChild(wrapper); // remove when done 

는 DOM에 추가하는 유일한 이유였다. MDC을 참조하십시오.

그러나 분리 된 DOM 노드에서 선택기와 XPath 쿼리를 실행할 수 있습니다. 그러면 DOM에 요소를 추가하지 않아도됩니다.

var superNinjaDiv = document.createElement('div'); 
superNinjaDiv.innerHTML = html; 
var requiedNode = superNinjaDiv.querySelector("[id=someId]"); 

Answer 5

이 경우 getElementById를 사용하여 요소를 조회하는 것은 좋은 방법이 아니라고 생각합니다. 이는이를 사용하기 위해 취해야하는 추가 단계로 인한 것입니다. DIV에서 요소를 감싸고 DOM에 삽입하고 getElementById를 사용하여 요소를 찾은 다음 DOM에서 삽입 된 DIV를 제거합니다.

DOM 조작이 비싸고 주입으로 인해 불필요한 리플 로우가 발생할 수 있습니다. 문제는 document.getElementById가 있고 document.getElementById가 아니라 문서에 삽입하지 않고 쿼리 할 수 ​​있다는 것입니다.

이 문제를 해결하려면 querySelector를 사용하는 것이 훨씬 쉬운 방법입니다. 그렇지 않으면 가능한 경우 getElementsByClassName을 사용하고 요소에 정의 된 클래스가있는 것이 좋습니다.

getElementsByClassName은 ELEMENT에 정의되어 있으므로 DOM에 요소를 삽입하지 않고 사용할 수 있습니다.

희망이 도움이됩니다.