zoukankan      html  css  js  c++  java
  • 面试时怎样回答:你对原生ajax的理解

    很多人跟我一样用习惯了jq封装好的$.ajax,但是面试时,原生ajax是很多面试官喜欢问的问题,今天再查资料,打算好好整理一下自己理解的原生ajax。

    首先,jq的ajax:一般我常用的参数就是这些,不过可以配置的参数不止这些

    $.ajax({
        url:'',//请求文件路径
        type:'',//请求方式GET POST
        data:{},//要发给服务器的数据参数
        dataType:'',//希望接口返回的数据格式json,string等等
        success:function(){
            // 请求成功的回调
        },
        error:function(){
            // 请求失败的回调
        }
    })

    接下来,jq毕竟只是一个类库,原生js还是要弄清楚的,那原生的ajax怎么写呢:

    一个ajax的请求可以形象的比喻为一次打电话的过程:

    //1 拿出手机        创建XMLHttpRequest对象
    //2 拨号            连接到服务器
    //3 说话            发送请求
    //4 等待对方回应     服务器响应请求
    
    //1 拿出手机        创建XMLHttpRequest对象
    if(window.XMLHttpRequest){
        var OAjax = new XMLHttpRequest()
    }else{
        // 兼容ie6及以下写法
        var OAjax = new ActiveXObject("Misrcsoft.XMLHTTP")
    }
    //2 拨号            连接到服务器
    OAjax.open('GET','a.html?t="new Date().getTime()"','true');//请求方式,请求路径,t为了消除缓存,是否异步
    //3 说话            发送请求
    OAjax.send();
    //4 等待对方回应     服务器响应请求
    OAjax.onreadystatechange = function(){
        //OAjax.readyState,监听浏览器和服务器之间的交互到哪一步了
            // 0->未初始化,还没有调用open方法
            // 1->载入,已调用send()方法,正在发送请求
            // 2->载入完成,send()方法已完成,已收到全部响应内容
            // 3->解析,解析响应的内容
            // 4->完成,相应内容解析完成,可以在客户端调用
        if(OAjax.readyState == 4){
            if(OAjax.status == 200){
                // 请求a.html成功,responseText为服务器响应的内容
                console.log('ajax请求成功',OAjax.responseText);
                
            }else{
                // 状态不为200
                console.log('ajax请求失败');
                
            }
        }
    }
  • 相关阅读:
    企业财务分析一头雾水?有了这个财务报表工具,问题一键解决
    解决wamp 3.0.6 访问路径出现 403 错误
    解决wamp 3.0.6 访问路径出现 403 错误
    解决wamp 3.0.6 访问路径出现 403 错误
    区间树
    区间树
    区间树
    区间树
    阿里云弹性裸金属服务器-神龙架构(X-Dragon)揭秘
    阿里云弹性裸金属服务器-神龙架构(X-Dragon)揭秘
  • 原文地址:https://www.cnblogs.com/1463069300limingzhi/p/10850002.html
Copyright © 2011-2022 走看看