码迷,mamicode.com
首页 > Web开发 > 详细

Ajax总结

时间:2019-03-15 17:27:08      阅读:173      评论:0      收藏:0      [点我收藏+]

标签:函数   取数   生产   请求头   apach   更新   解释   解决   函数调用   

#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技术。

Ajax总结

标签:函数   取数   生产   请求头   apach   更新   解释   解决   函数调用   

原文地址:https://www.cnblogs.com/haoning/p/10538139.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!