zoukankan      html  css  js  c++  java
  • Ajax总结

    #1. ajax的理解
    ## 1). ajax是什么?
        异步 JavaScript 和 XML (Asynchronous JavaScript and XML)
        客户端与服务器,可以在【不必刷新整个浏览器】的情况下,与服务器进行异步通讯的技术
        与后台进行HTTP通信, 不用刷新整体页面, 而只是根据自己的需求做页面的局部更新
        相关技术
            XMLHttpRequest 对象 (异步的与服务器交换数据)
            JavaScript/DOM (信息显示/交互)
            CSS (给数据定义样式)
            XML (作为转换数据的格式)

      *原生ajax  

      //创建 XMLHttpRequest 对象
        var ajax = new XMLHttpRequest();
       //规定请求的类型、URL 以及是否异步处理请求。
        ajax.open('GET',url,true);
       //发送信息至服务器时内容编码类型
        ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
      //发送请求
        ajax.send(null);
      //接受服务器响应数据
        ajax.onreadystatechange = function () {
          if (obj.readyState == 4 && (obj.status == 200 || obj.status == 304)) {
          }
        };
       绑定事件监听
      onreadystatechange 会监听readyState值的变化,一旦发生变化,就会触发当前事件
      readyState
      0:xhr对象创建成功,但是xhr.open方法还未调用
      1:open方法已经调用了,但是还未调用xhr.send方法(意味着还没有发送请求,还可以设置请求头信息)
      2:send方法已经调用了,接受到了部分响应数据(响应首行和响应头)
      3:接受了响应体数据(如果响应体数据较小或者是纯文本,在此阶段就全部接受完了)
      4:接受了全部响应体数据(数据较大或者音视频资源等)
     

    ## 2). 区别ajax请求和普通的HTTP请求?
        相同点: 都是向服务器提交的http请求
        不同点:             
                           --普通的HTTP--            --ajax请求--
           得到             页面                      json数据
           浏览器处理响应    自动显示新页面            不会更新页面, 需要手动处理更新
           数据渲染          服务器端                 浏览器端
           应用类型         多页应用                  单页应用
           
    #2. 如何发送ajax请求
    ## 1). 使用XMLHttpRequest
    ## 2). 使用jQuery
    ## 3). 使用axios
    ## 4). 使用fetch

    #3. ajax请求跨域问题
    ## 1). 理解跨域
        请求的地址与当前所在地址有下面任意不同就是跨域
          协议不同
          域名不同
          端口号不同
        理解ajax跨域问题
          浏览器基于同源政策(安全考虑), 不允许发送跨域的ajax请求
        
    ## 2). 解决ajax跨域问题的办法
        a. jsonp: 只能解决GET请求跨域
        b. cors: 可以解决GET/POST
        c. 代理: 在开发环境下使用比较多/比较方便, 在生产环境下用Apache做转发(代理)也可以实现

    # 4.其它面试问题
    ## 1. http常见响应状态码
        200: 成功
        404: 找不到
        500: 服务器端运行出错
        304: 重定向
        
    ## 2. Ajax的实现流程是怎样的?
        1). 创建XMLHttpRequest对象
        2). 创建一个新的HTTP请求,并指定该HTTP请求的URL,方法
        3). 设置响应HTTP请求状态变化的函数.
        4). 发送HTTP请求.
        5). 获取异步调用返回的数据.
        6). 使用JavaScript和DOM实现局部刷新.

    ## 3. AJAX有哪些有点和缺点?
        优点:
          1、最大的一点是页面无刷新,用户的体验非常好。
          2、使用异步方式与服务器通信,具有更加迅速的响应能力。
          3、可以把以前一些服务器负担的工作转嫁到客户端,利用客户端闲置的能力来处理,减轻服务器和带宽的负担,节约空间和宽带租用成本。并且减轻服务器的负担,ajax的原则是“按需取数据”,可以最大程度的减少冗余请求,和响应对服务器造成的负担。
          4、基于标准化的并被广泛支持的技术,不需要下载插件或者小程序。
        缺点:
          1、ajax不支持浏览器back按钮。
          2、对搜索引擎的支持比较弱。
          
    ## 4. 同步和异步的区别?
        同步:浏览器向服务器请求数据,服务器比较忙,浏览器一直等着(页面白屏),直到服务器返回数据,浏览器才能显示页面。
        异步:浏览器向服务器请求数据,服务器比较忙,浏览器可以自如的干原来的事情(显示页面),服务器返回数据的时候通知浏览器一声,浏览器把返回的数据再渲染到页面,局部更新。

    ## 5. GET和POST的区别,何时使用POST?
        GET:一般用于信息获取,使用URL传递参数,对所发送信息的数量也有限制
        POST:一般用于修改服务器上的资源,对所发送的信息没有限制。
        以下情况中,请使用POST请求:
            需要携带数据到服务器端
            会更新服务器端数据

    ## 6. ajax的最大特点是什么?
        ajax可以实现异步通信效果,实现页面局部刷新,带来更好的用户体验;按需要获取数据,节约带宽资源。
        
    ## 7. 解释jsonp的原理,以及为什么不是真正的ajax?
        jsonp并不是一种数据格式,而是json是一种数据格式,jsonp是用来解决跨域获取数据的一种解决方案,
        具体是通过动态创建script标签,然后通过标签src属性获取js文件中的js脚本,该脚本的内容是一个函数调用,
        参数就是服务器返回的数据,为了处理这些返回的数据,需要事先在页面定义好回调函数,
        本质上使用的并不是ajax技术。

  • 相关阅读:
    新版ubuntu中打开终端的方法和安装ssh 的方法
    HTML中利用404将老域名重定向到新域名
    KeelKit 1.0.3500.25185
    如何制作VSPackage的安装程序
    一副漫画:IE6滚回你老家去
    “表单控件”与“实体类”
    VS2005中得到 Web页面 或 窗体的 IDesignerHost
    一句SQL搞定分页
    CodeDom Assistant CodeDom的强大工具, 有些BUG修正了下,发到CodePlex,大家有需要的可以看看
    VS2005 出现 The OutputPath property is not set for this project. 错误的解决方法
  • 原文地址:https://www.cnblogs.com/haoning/p/10538139.html
Copyright © 2011-2022 走看看