美文网首页
ajax状态码,封装ajax

ajax状态码,封装ajax

作者: 前端浅语 | 来源:发表于2018-11-03 17:26 被阅读0次

    AJAX = 异步 JavaScript 和 XML。
    AJAX 是一种用于创建快速动态网页的技术。
    通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
    传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。
    有很多使用 AJAX 的应用程序案例:新浪微博、Google 地图、开心网等等。

    Ajax请求有两种 get请求和post请求。
    get / post 不是对立的,他俩是可以共存的。
    很多人都喜欢说 post请求比get 请求更安全。但是在前端根本没有安全性可言,get,post请求转化后都是?ie=utf-8&f=8&的形式。get请求我们看见我们请求的信息出现在地址栏中,觉得很不安全。post请求虽然没显示在页面中但是也可以在前端获取到。只是用户体验不同而已。对于前端来说是用户体验是第1位。

    下面我们来封装ajax

    ajax5步执行:

    0 初始化 -- 刚创建这个对象 new ()下面
    1 已连接 open 下面
    2 已送达 我们发的东西送过去了
    3 已接收 header 认为 3就可以结束 也是OK的
    4 已接收 body

    2、状态码的含义:
    (1)1xx (消息)不需要反馈 websocket
    (2)2xx 成功
    (3)3xx 重定向 。什么是重定向呢?例如, 儿时朋友 你去他家找他, 他家人住的人变了(你不认识了) 他告诉你 他搬到那那那了,你去那个地方找他。
    (4)301 永久重定向 ( 基本不会这么用 )
    比如 浏览器已经记住了 你就应该访问 https://www.baidu.com
    (5)302 临时重定向 (99%使用)
    http://baidu.com ====> https://www.baidu.com
    (6)304 缓存(服务器 和 客户端之间的关系)
    告诉你本地缓存已经有了数据,服务端就不会再发一次,让你去本地获取
    (7)4xx 客户端报错 404没找到
    (8)5xx 服务端的错误 =====>(503) 服务器过载了 服务器不可用
    (9)6xx 扩展( 自己可以去添加 )

    为什么状态码都是数字呢?因为只有数字才是世界通用的呀!
    function ajax(options){
      options=options||{};
      options.type=options.type||'get';
      options.data=options.data||{};
      options.dataType=options.dataType||'text';
    
    //不兼容IE6
    //老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveX 对象:
    //xhr=new ActiveXObject("Microsoft.XMLHTTP");
    // 1.初始化
    let xhr=new XMLHttpRequest();
    
    //数据组装
    let arr=[];
    for(let name in options.data){
    arr.push(`${encodeURIComponent(name)}=${enc  odeURIComponent(options.data[name])}`);
    }
    let strData=arr.join('&');
    // 判断是post请求还是get请求
      if(options.type=='post'){
        //2.连接    open的参数1:发送请求的类型               参数2:路径 
    //  参数3:同步还是异步(true)(版本高的浏览器禁止同步)
    xhr.open('POST', options.url, true);
    // 设置请求头
    xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
    // 3.发送请求
    xhr.send(strData);
    }else{
    // get请求参数2需要拼接?
    xhr.open('GET', options.url+'?'+strData, true);
    // 发送请求
    xhr.send();
    }
    
    //接收
    xhr.onreadystatechange=function (){
    //4--执行到第4步了 已经接受到请求
    if(xhr.readyState==4){
      //成功——2xx、304
      if(xhr.status>=200 && xhr.status<300 || xhr.status==304){
        let data=xhr.responseText;
        switch(options.dataType){
          case 'json':
          // 兼容问题 
            if(window.JSON && JSON.parse){
            //字符串转json
              data=JSON.parse(data);
            }else{
              // 浏览器版本低 eval
              // 不安全 ==> ( 语法要求 )
              data=eval('('+str+')');
            }
            break;
          case 'xml':
            data=xhr.responseXML;
            break;
        }
    
        options.success && options.success(data);
      }else{
        options.error && options.error();
      }
      }
      };
    }
    

    相关文章

      网友评论

          本文标题:ajax状态码,封装ajax

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