Javascript 复盘深入解读之—用原生js实现ajax封装

一、什么是ajax?

定义:Asynchronous JavaScript and XML,意思是异步JS和XML。是一种异步请求数据的web开发技术,在不需要重新刷新页面的情况下,Ajax 通过异步请求加载后台数据,并在网页上呈现出来。

解释下异步,异步是相对于同步来说的,同步即同时进行(累积多了就排队,一个一个执行,必须等上一个结束,才能到下一个),而异步就是执行到我了,我去旁边继续执行等结果,后面排队的继续不用等我结果出来再执行。

这是对于ajax的特点来设计的,因为ajax对后端数据的请求需要时间,而这个时间不利用起来就是浪费。当然,如果必须要等前一个的结果怎么办,这就使用到JS中的重要部分——回调函数了,其实回调在JS中应用很多,只是我们对它没有概念而已,像点击事件执行的就是回调(先绑定事件,只有在点击发生时,才会执行)。那么ajax也一样,先请求数据,只有在状态改变时才会执行接下来的(这个状态包括请求成功和请求失败)。

作用:提高用户体验,减少网络数据的传输量

二、ajax常见运用场景

表单验证是否登录成功、百度搜索下拉框提示和快递单号查询等等。

三、Ajax原理是什么

Ajax请求数据流程,其中最核心的依赖是浏览器提供的对象xhr,它扮演的角色相当于秘书,使得浏览器可以发出HTTP请求与接收HTTP响应。浏览器接着做其他事情,等收到XHR返回来的数据再渲染页面

四、AJAX涉及的知识点

1、readyState:返回当前文档的载入状态

 0-(未初始化)还没有调用send()方法

 1-(载入)已调用send()方法,正在发送请求

 2-(载入完成)send()方法执行完成,已经接收到全部响应内容

 3-(交互)正在解析响应内容

 4-(完成)响应内容解析完成,可以在客户端调用了

2、status:HTTP状态码

   1XX:信息性状态码     ,表示接收的请求正在处理

   2XX:成功状态码       , Ok,表示请求正常处理

   3XX:重定向状态码    ,表示需要附加操作来完成请求

   4XX:客户端错误状态  ,表示服务器无法处理请求

   5XX:服务器错误状态  ,表示服务器处理请求出错

3、服务器反馈的内容:(数据)

 responseText:做为响应主体被返回的内容
 
 responseXML:包含响应数据为XML DOM文档
 
 status:响应的HTTP状态
 
 statusText:HTTP状态的说明

五、原生JS实现ajax请求

function ajax(options){
    options = options ||{};  //调用函数时如果options没有指定,就给它赋值{},一个空的Object
    options.type=(options.type || "GET").toUpperCase();/// 请求格式GET、POST,默认为GET
    options.dataType=options.dataType || "json";    //响应数据格式,默认json

    var params=formatParams(options.data);//options.data请求的数据

    var xhr;
    //考虑兼容性
    if(window.XMLHttpRequest){
        xhr=new XMLHttpRequest();
    }else if(window.ActiveObject){//兼容IE6以下版本
        xhr=new ActiveXobject('Microsoft.XMLHTTP');
    }

    //启动并发送一个请求
    if(options.type=="GET"){
        xhr.open("GET",options.url+"?"+params,true);
        xhr.send(null);
    }else if(options.type=="POST"){
        xhr.open("post",options.url,true);

        //设置表单提交时的内容类型
        //Content-type数据请求的格式
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xhr.send(params);
    }

//    设置有效时间
    setTimeout(function(){
        if(xhr.readySate!=4){
            xhr.abort();
        }
    },options.timeout)

//    接收
//     options.success成功之后的回调函数  options.error失败后的回调函数 
   //xhr.responseText,xhr.responseXML  获得字符串形式的响应数据或者XML形式的响应数据
    xhr.onreadystatechange=function(){
        if(xhr.readyState==4){
            var status=xhr.status;
            if(status>=200&& status<300 || status==304){
              options.success&&options.success(xhr.responseText,xhr.responseXML);
            }else{
                options.error&&options.error(status);
            }
        }
    }
}

//格式化请求参数
function formatParams(data){
    var arr=[];
    for(var name in data){
        arr.push(encodeURIComponent(name)+"="+encodeURIComponent(data[name]));
    }
    arr.push(("v="+Math.random()).replace(".",""));
    return arr.join("&");

}
//基本的使用实例
ajax({
    url:"http://server-name/login",
    type:'post',
    dataType:'json',
    data:{
        username:'username',
        password:'password'
    },
    timeout:10000,
    contentType:"application/json",
    success:function(data){
      。。。。。。//服务器返回响应,根据响应结果,分析是否登录成功
    },        //异常处理
    error:function(e){
        console.log(e);
    }
})

参考阅读:

Ajax原理一篇就够了

你可能感兴趣的:(Javascript 复盘深入解读之—用原生js实现ajax封装)