Question

actually i am working on ajax in which i want to convert the iframe into div
means that what is the functionality of iframe i want the same in div

Thanks.

Answer 1

You can’t have the exact same functionality of an iframe in a simple div. That’s why they have two different names. Iframe is a bit of sandboxing, and can open urls on any domain.

With Ajax on nowadays browsers you have to stick with the same-origin policy which means you can only load contents from the same domain your site operates on.

So, aside from this restriction and the fact that iframe-like sandboxing cannot be emulated in a div here, is a simple ajax solution with javascript, which you can use to achive a site navigation for instance:

HTML

<ul id="nav">
  <li><a href="page1.html">page1</a></li>
  <li><a href="page2.html">page2</a></li>
  <li><a href="page3.html">page3</a></li>
</ul>

Javascript

// select the menu element
var nav = document.getElementById("nav");

// watch for clicks on the menu
nav.onclick = function(e) {

  // get the element that was clicked
  e = e || window.event;
  var el = e.target || e.srcElement;

  // only act if it was a link
  if (el.nodeName == "A") {

    // making a call is as simple as this
    ajax(el.href, function(data) {

        // do something with the server's response
        // e.g.: put it to the #content element
        document.getElementById("content").innerHTML = data;
    });

    // prevent default action
    return false;
  }
};

///////////////////////////////////////////////////////////////////////////////

function getXmlHttpObject() {
    var xmlHttp;
    try {
        xmlHttp = new XMLHttpRequest();
    } catch (e) {
        try {
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
    return xmlHttp;
}

function ajax(url, onSuccess, onError) {
    var xmlHttp = getXmlHttpObject();
    xmlHttp.onreadystatechange = function () {
        if (this.readyState == 4) {
            // onError
            if (this.status != 200) {
                if (typeof onError == 'function') {
                    onError(this.responseText);
                }
            }
            // onSuccess
            else if (typeof onSuccess == 'function') {
                onSuccess(this.responseText);
            }
        }
    };
    xmlHttp.open("GET", url, true);
    xmlHttp.send(null);
    return xmlHttp;
}​

​