前端面试题40----ajax

1.AJAX是什么？

• AJAX的全称是Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）
• ajax不是新的编程语言，而是一种使用现有标准的新方法。ajax是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下
• ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术
• ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换。ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。而传统的网页（不使用ajax）如果需要更新内容，必须重载整个网页面
• ajax的应用使用支持以上技术的web浏览器作为运行平台。这些浏览器目前包括：Mozilla、Firefox、Internet Explorer、Opera、Konqueror及Safari。但是Opera不支持XSL格式对象，也不支持XSLT
• ajax前景非常乐观，可以提高系统性能，优化用户界面。AJAX现有直接框架AjaxPro，可以引入AjaxPro.2.dll文件，可以直接在前台页面JS调用后台页面的方法。但此框架与FORM验证有冲突。另微软也引入了AJAX组建，需要添加AjaxControlToolkit.dll文件，可以在控件列表中出现相关控件

2.AJAX的优点

• 最大的一点是页面无刷新，用户的体验非常好。
• 使用异步方式与服务器通信，具有更加迅速的响应能力。。
• 可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。
• 基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。
• ajax可使因特网应用程序更小、更快，更友好。

3.AJAX的缺点

• ajax不支持浏览器back按钮。
• 安全问题 AJAX暴露了与服务器交互的细节。
• 对搜索引擎的支持比较弱。
• 破坏了程序的异常机制。
• 不容易调试。

4.原生JS实现AJAX

• 1.创建核心对象
• 2.与服务器建立连接open()
• (post请求设置请求头)
• 3.向服务器发送数据send()
• 4.监听服务器的通信状态
• 5.获取服务器的通信状态码readyState如果为4
  0 - 未初始化
  1 - 正在连接
  2 - 正在接受请求
  3 - 正在解析响应
  4 - 响应完毕，可以应用服务器端的响应数据
• 6.获取服务器的反馈状态码status(在5成立的基础上)如果为200
  1xx - 请求接受，继续处理
  2XX - 操作成功收到，分析，继续接受
  3XX - 完成请求后需要下一步处理
  4xx - 请求有一个语法错误或者不能完成交互
  5xx - 服务器执行一个完全有效的请求失败 - 服务器错误
  200 - 接受成功
  404 - 找不到指定文件或资源
  500 - 服务器产生内部错误

function ajax(obj){
//判断是否是ie浏览器
    if(window.XMLHttpRequest){//其他浏览器
        var myajax=new XMLHttpReuqest();
    }else{//ie浏览器
        var myajax=new ActiveXObject('Microsoft.XMLHTTP');
    }
    if(obj.type.toLowerCase()=='get'){//get请求
        var url=obj.data?(obj.data+'?'+obj.url):obj.url;
        myajax.open('get',url);
        myajax.send();
    }else if(obj.type.toLowerCase()=='post'){//post请求
        myajax.open('post',obj.url);
        myajax.setRequestHeader('Content-type','application/x-www-form-urlencoded');
        obj.data?myajax.send(obj.data):myajax.send();
    }
    myajax.onreadystatechange=function(){//监听事件
        if(myajax.readyState==4&&myajax.status==200){
            obj.success(myajax.response);
        }else{
            obj.error&&obj.error();//如果error存在则执行，不存在就不执行
        }
    }
}

部分内容参考自：参考