End Website Loading with AJAX

Intro

We tend to use older technology in the government due to slow acclimation to change and security concerns. However, our desktop machines are being constantly updated with modern browsers. If website developers take time to take this into account, they can improve the overall feel of applications. Users can have a smoother experience on the site.

Flickering

In this postback-heavy world (including SharePoint), so much depends on the server. What if you could reduce the amount of information that the server was responsible for transmitting? This is possible with JavaScript.

XMLHttpRequest


var xhr = new XMLHttpRequest(); // ActiveXObject("Microsoft.XMLHTTP") for < IE8
xhr.open("GET", url);
xhr.onreadystatechange = function(){
  if(this.readyState === 4){
    parseXML(this.response);
  }
}
xhr.send();

This code calls for data from the server without reloading the entire page. Note that the "GET" portion in the open call is the same that your browser uses during normal navigation. You would need "POST" to actually send usable data. Browsers will usually send an agent string indicating that this call is from an XMLHttpRequest. So, you're not going to have luck screen scraping Google this way.

Making that XML Useful

In the above example, I used a parseXML function. What might that look like?


function parseXML(xmlString){
  var parser = new DOMParser();  // different for older IE
  var xmlDoc = parser.parseFromString(xmlString,"text/xml");
  var names = xmlDoc.getElementsByTagName("name");
  var list = document.getElementById("names-list");
  var innerHTML = "";
  for(var i = 0; i < names.length; i++){
    innerHTML += "<li>" + names[i].textContent + "</li>";
  }
  list.innerHTML = innerHTML;
}

Navigating the XML is really similar to navigating the DOM.

You may also like

  • AngularJS 와 VueJS 반응성

    VueJS는 우리가 가지고 있는 자바스크립트 프레임워크의 생태계에서 비교적 새로운 라이브러리다. 여윈반면 JS는 오랫동안 자리를 잡았고 많은 후원을 받고 있다. 그러나 한 개발자의 MV* 라이브러리는 흥미로운 대안일 수 있다.

    Read More >