'XMLHttpRequest'에 해당되는 글 3건

  1. 2008.04.22 100줄짜리 Ajax Wrapper
  2. 2008.04.17 W3C XMLHttpRequest 최종 초안
  3. 2008.04.17 Dojo XHR 플러그인; 오늘은 XHR을 어떻게 할까요?

100줄짜리 Ajax Wrapper

2008. 4. 22. 19:51 from [IT] Web Tech

Kris Zyp 씨가 미래를 대비한 100줄짜리 Ajax wrapper를 만들었습니다:

IE8의 새로운 기능인 XDocmainRequest는, 크로스 사이트 요청을 위해 추가된 새로운 API로서, W3C의 크로스-사이트 접근 제안 대신 사용할 수 있습니다. 그냥 재미삼아, 다음 세대 웹 개발자들을 위해 고전적인 Ajax request wrapper 함수는 어떻게 보일런지 보여주고자 했다. 그냥 XMLHttpRequest를 몇번 호출하는 것이 너무 쉬우니까 우리는 대신 이렇게 했다:

[code:JScript]
function doRequest(method,url,async,onLoad,onProgress) {
    var xhr;
    if ((onProgress || isXDomainUrl(url)) && window.XDomainRequest) {
        // if it is x-domain or streaming/incremental updates are needed we will use IE's XDomainRequest for IE
        // streaming/interactive mode is broken in IE's XHR, but for some reason works in XDR (with onprogress), so we will
        // need to use XDR if incremental updates are necessary
        // see bug https://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=334813
         if (url.match(/^https:/) && !onProgress) {
            // XDR doesn’t work for secure https communication
            // see bug https://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=333380
            loadUsingScriptTag(url); // script tag insertion can be more secure than XDR
                // in some situations because it supports https
            return;
    }
        xhr = new XDomainRequest;
        // relative paths don’t work in XDomainRequest, see bug https://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=333275
    if (!url.match(/^http:/)) { // test to see if it is an absolute url
            url = absoluteUrl(location.href,url); // must have a function to turn it into an absolute url
    }
    if (!(method == “GET” || method == “POST”)) {
        // XDomainRequest does not support methods besides GET and POST
        // see bug https://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=334809
        // We will try to add the method as a parameter and hope the server will understand… good luck :/
        url += “&method=” + method;
        method = “POST”;
    }
    function xdrLoad() {
       if (xhr.contentType.match(/\/xml/)){
        // there is no responseXML in XDomainRequest, so we have to create it manually
        var dom = new ActiveXObject(”Microsoft.XMLDOM”);
        dom.async = false;
        dom.loadXML(xhr.responseText,200);
        onLoad(dom);
       }
       else {
           onLoad(xhr.responseText,200); // we will assume that the status code is 200, XDomainRequest rejects all other successful status codes
        // see bug https://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=334804
       }
    }
    if (async === false) {
        // XDomainRequest does not support synchronous requests
        // see bug https://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=336031
        // so we will try to block execution on our own (which is not really possible in any reasonable manner)
        var loaded;
        xhr.onload = function() {
        loaded = true;
        xdrLoad();
        }
            xhr.open(method,url);
        xhr.send(null);
        while(!loaded) { // try to block until the response is received
        // I am sure the user won’t mind just clicking OK so we can block execution
        alert(”Waiting for the response, please click OK because it probably is here now”);
        }
         return;
    }
    else {    // do an asynchronous request with XDomainRequest
            xhr.onload = xdrLoad;
            xhr.open(method,url);
            xhr.onprogress = onProgress;
    }
    }
    // we will mercifully skip all the branches for ActiveXObject(”Microsoft.XMLHTTP”) to accomodate IE6 and lower
    else {
        xhr = new XMLHttpRequest; // use the standard XHR for same origin and browsers that implement cross-site
            // W3C requests and streaming
        xhr.open(method,url,async);
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 3) // interactive mode
                onProgress(xhr.responseText);
            if (xhr.readyState == 4) // finished
                onLoad(xhr.responseText,xhr.status);
        }
    }
    xhr.send(null); // finally send the request whether it be XDR or XHR

    // and supporting functions
    function absoluteUrl : function(baseUrl, relativeUrl) {
        // This takes a base url and a relative url and resolves the target url.
        // For example:
        // resolveUrl(”http://www.domain.com/path1/path2″,”../path3″) ->”http://www.domain.com/path1/path3″
        //
        if (relativeUrl.match(/\w+:\/\//))
            return relativeUrl;
        if (relativeUrl.charAt(0)==’/') {
            baseUrl = baseUrl.match(/.*\/\/[^\/]+/)
            return (baseUrl ? baseUrl[0] : ”) + relativeUrl;
        }
            //TODO: handle protocol relative urls:  ://www.domain.com
        baseUrl = baseUrl.substring(0,baseUrl.length - baseUrl.match(/[^\/]*$/)[0].length);// clean off the trailing path
        if (relativeUrl == ‘.’)
            return baseUrl;
        while (relativeUrl.substring(0,3) == ‘../’) {
            baseUrl = baseUrl.substring(0,baseUrl.length - baseUrl.match(/[^\/]*\/$/)[0].length);
            relativeUrl = relativeUrl.substring(3);
        }
        return baseUrl + relativeUrl;
    }
    function loadUsingScriptTag(url) {
        … do JSONP here if we want
    }

}
음... IE팀은 제발 표준을 좀 지켜줬으면!

from 100Line Ajax Wrapper on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 0

댓글을 달아 주세요

from Last call for W3C XMLHttpRequest comments on Ajaxian

W3C는 XMLHttpRequest 스펙의 최종 초안을 발표했습니다:

Web API 작업 그룹XMLHttpRequest 객체의 최종 초안을 발표했습니다. XMLHttpRequest 객체 명세는 클라이언트-서버간 데이터 전송을 위한 클라이언트 기능을 제공하는 API를 정의합니다. 6월 2일까지 의견을 받습니다. Rich Web Client Activity 에 대해 더 살펴보세요.

제대로 된 에러(SECURITY_ERR, NETWORK_ERR, ABORT_ERR)를 받을 수도 있습니다. 아직은 스펙에 포함되지 않았지만 앞으로 포함할 내용도 공개되었습니다:

  • load 이벤트와 onload 속성;
  • error 이벤트와 onerror 속성;
  • progress 이벤트와 onprogress 속성;
  • abort 이벤트와 onabort 속성;
  • 제안받은 Timers, 아마도 ontimeout 속성;
  • redirect 를 사용하지 않게 하는 속성;
  • text/html 문서를 위한 responseXML;
  • 크로스 도메인 XMLHttpRequest;
  • 바이트 스트림(주: 바이너리 데이터)를 다루기 위한 responseBody;
  • MIME 타입을 정하는 overrideMimeType;
  • getRequestHeader()removeRequestHeader().
Posted by 행복한고니 트랙백 0 : 댓글 0

댓글을 달아 주세요

from Dojo XHR Plugins; How do you want your XHR today? on Ajaxian

Neil Roberts씨가 Dojo를 사용한 XHR 플러그인과 어떻게 시스템을 확장할 수 있는지에 대해 글을 썼습니다.

여러분이 dojo.xhrGet을 봤다면, "받아들일수 있는 값이: 텍스트(기본값), json, json-comment-optional, json-comment-filtered, javascript, xml"과 같다는 것을 알게될 것입니다, 하지만:

여러분이 모를만한 것은 handleAs 파라미터가 단지 어떤 플러그인을 사용할지 정하는 방법에 불과하다는 것입니다. 이 플러그인들이 어디있는지, 어떻게 동작하는지, 어떻게 여러분의 프로젝트에 적용될 수 있는지를 알면 반복작업을 쉽게 보다 적은 에러로 수행할 수 있습니다.

그는 json 스타일 콜백에 피기백 방식을 사용했고, 쿼리 할 때에 대한 훅을 추가했습니다. 업데이트된 객체가 있다면 JSON 방식으로 되돌아올테고, 그러면 추가로 원격 호출을 하지 않아도 그들을 다룰 수가 있습니다:

[code:js]
dojo._contentHandlers.json = (function(old){
  return function(xhr){
    var json = old(xhr);
    if(json.updated){
      processUpdatedObjects(json.updated);
      delete json.updated;
    }
    return json;
  }
})(dojo._contentHandlers.json);

다음으로, Neil은 노드를 자동 업데이트하는 시스템을 작성했습니다:
[code:js]
dojo.xhrGet({
  url: "node-updates.php",
  handleAs: "node-update-server"
});

dojo.xhrGet({
  url: "node-content.php?node=sidebar",
  node: "sidebar",
  handleAs: "node-update"
});

참, 쉽죠:
[code:js]
dojo.mixin(dojo._contentHandlers, {
  "node-update-server": function(xhr){
    var json = dojo._contentHandlers.json(xhr);
    dojo.forEach(json.updates, function(update){
      var node = dojo.byId(update.id);
      if(node){
        node.innerHTML = update.html;
      }
    });
  },
  "node-update": function(xhr){
    var node = dojo.byId(xhr.args.node);
    if(node){
      node.innerHTML = dojo._contentHandlers.text(xhr);
    }
  }
});

Dojo 도 꽤 유연한 것 같습니다. 원하는 데이터 형태를 다루기 위해 간단히 새로운 handleAs 타입을 추가하기만 하면 되네요.
Posted by 행복한고니 트랙백 0 : 댓글 0

댓글을 달아 주세요