99%的面试会问的原生ajax

2017-01-16  本文已影响0人  Smallbore

AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。
AJAX 不是新的编程语言,而是一种使用现有标准的新方法。
AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。

所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject)。
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

ajax原生版,兼容所有浏览器:

function loadXMLDoc(url){
    xmlhttp=null;
    if (window.XMLHttpRequest){
        // code for Firefox, Opera, IE7, etc.
        xmlhttp=new XMLHttpRequest();
    }
    else if (window.ActiveXObject){
        // code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    if (xmlhttp!=null){
        xmlhttp.onreadystatechange=state_Change;
        xmlhttp.open("GET",url,true);//method:请求的类型;GET 或 POST。async:true(异步)或 false(同步)
        xmlhttp.send(null);//string:仅用于 POST 请求
        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");//添加请求头。
    }
    else{
        alert("Your browser does not support XMLHTTP.");
    }
}

function state_Change(){
    if (xmlhttp.readyState==4){
        // 4 = "loaded"
        if (xmlhttp.status==200){
            // 200 = "OK"
            document.getElementById('T1').innerHTML=xmlhttp.responseText;
        }
        else{
            alert("Problem retrieving data:" + xmlhttp.statusText);
        }
    }
}

1.responseText 获得字符串形式的响应数据。
2.responseXML 获得 XML 形式的响应数据。
3.onreadystatechange 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
4.readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成,且响应已就绪

5.status
200: "OK"
404: 未找到页面

简化ajax模版,便于工作中调用:

function loadAjax(url,box){
    // code for IE7+, Firefox, Chrome, Opera, Safari || code for IE6, IE5
    var req = new XMLHttpRequest() || new ActiveXObject("Microsoft.XMLHTTP");
    req.open("GET",url,true); //post 中文路径会报错。
    req.send();
    req.onreadystatechange = function(){
        if(req.readyState==4&&req.status==200){
            box.innerHTML=req.responseText;
        }
    }
}

注:没有readyState和status错误提示。

上一篇下一篇

猜你喜欢

热点阅读