美文网首页
99%的面试会问的原生ajax

99%的面试会问的原生ajax

作者: Smallbore | 来源:发表于2017-01-16 12:04 被阅读0次

    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错误提示。

    相关文章

      网友评论

          本文标题:99%的面试会问的原生ajax

          本文链接:https://www.haomeiwen.com/subject/fugubttx.html