ajax状态码,封装ajax

2018-11-03  本文已影响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();
  }
  }
  };
}
上一篇下一篇

猜你喜欢

热点阅读