ajax原理(原生js详解)

什么是ajax？

AJAX即”Asynchronous Javascript And XML“(异步JavaScript和XML)，是指一种创建交互式网页应用的网页开发技术。

通过在后台与服务器进行少量数据交换，AJAX可以是网页实现异步更新。这就意味着可以在不重新加载整个网页的情况下，对网页的某部分进行局部更新。

如何使用AJAX？

第一步：创建一个异步调用对象

let xhr = new XMLHttpRequest();

第二步：创建一个新的‘HTTP’请求

xhr.open('get','http://shujvjiekou.php',true);

参数一：请求方式(get/post/put...)；参数二：请求地址(接口地址)；参数三：是否异步

第三步：发送解析，不涉及传输数据的话，参数为空。

xhr.send();

在send过程中要进行5步操作

第一步：请求初始化(open没有调用)。                         就绪状态码表示为0

第二步：请求已经建立,但是还没有发送。                    就绪状态码表示为1

第三步：请求已经发送,准备处理。                               就绪状态码表示为2

第四步：请求处理,获取内容的基本信息。                     就绪状态码表示为3

第五步：请求响应全部完成,响应服务器的一切内容。   就绪状态码表示为4

第四步：取到接口数据。

xhr.onreadystatechange = function () {
            if (xhr.readyState == 4) {//就绪码为4，代表请求相应完成
                if (xhr.status === 200) {//http状态码为200时（连接成功）
                    let data = JSON.parse(xhr.responseText);//获取接口返回的数据。类型是字符串。并将json格式字符串转换为对象
                }else {
                    //抛错
                    throw new Error('接口地址有误' + xhr.status);//.status   http状态码
                }
            }
        }

如果向后端传输数据？

1.如果是通过get方式，那么我们可以把数据放在请求地址中，将数据用“?”连接。

需要注意的是，如果传输数据是一个对象，那么我们需要对对象进行处理。

function objtostring(obj) {
            if (Object.prototype.toString.call(obj).slice(8, -1) === 'Object') {
                let arr = [];
                for (let attr in obj) {
                    arr.push(attr + '=' + obj[attr])//[a=1, b=2 ,c=3]
                }
                return arr.join('&');////a=1&b=2&c=3
            } else {
                throw new Error('你输入的不是对象格式');
            }
        }

2.如果是通过post传输，我们需要注意的是，必须要设置请求头！

xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');

传输的数据放在send里面。

 

用原生js封装一个简单的ajax

        //ajax四部曲
        function $ajax(obj) {
            //判断传输的数据是否是对象
            function objtostring(obj) {
                //定义一个空数组
                let arr = [];
                if (Object.prototype.toString.call(obj).slice(8, -1) === 'Object') {
                    for (let value in obj) {
                        arr.push(value + '=' + obj[value]);
                    }
                    return arr.join('&');//将数组转换成由&拼接的字符串；
                } else {
                    throw new Error('你输入的不是一个纯粹的对象');
                }
            }

            let ajax = new XMLHttpRequest();

            //设置传输方式默认为get
            obj.type = obj.type || 'get';


            //设置传输地址，让地址不能为空；
            if (!obj.url) {
                throw new Error("接口地址不能为空");
            }

            //设置是否异步
            if (obj.async === 'false' || obj.async === false) {
                obj.async = false;
            } else {
                obj.async = true;
            }


            //如果传输数据时，要对get和post方式进行不同的兼容处理
            if (obj.data) {//判断是否传输数据
                //如果传输数据时
                if (Object.prototype.toString.call(obj.data).slice(8, -1) === 'Object') {//判断传输数据是否为对象
                    obj.data = objtostring(obj.data);
                } else {//不是对象
                    obj.data = obj.data;
                }
            }

            //如果传输数据存在，且传输方式为get时
            if (obj.data && obj.type === 'get') {
                obj.url += '?' + obj.data;
            }

            ajax.open(obj.type, obj.url, obj.async);

            //如果传输数据存在，且传输方式为post时
            if (obj.data && obj.type == 'post') {
                ajax.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
                ajax.send(obj.data);
            } else {
                ajax.send();
            }

            //当obj.async没有设置异步时，就是同步，无需监听；当设置异步时，就必须监听
            if (obj.async) {//异步时
                ajax.onreadystatechange = function () {
                    if (ajax.readyState === 4) {//请求成功
                        if (ajax.status === 200) {//接口地址正确
                            //当对象中有success属性，且该属性类型为函数
                            obj.success && typeof obj.success === 'function' && obj.success(ajax.responseText);
                        } else {
                            obj.error && typeof obj.error === 'function' && obj.error('接口地址有误' + ajax.status);
                        }
                    }
                }
            } else {//同步时
                if (ajax.status === 200) {
                    obj.success && typeof obj.success === 'function' && obj.success(ajax.responseText);
                } else {
                    obj.error && typeof obj.error === 'function' && obj.error('接口地址有误' + ajax.status);
                }
            }

        }

调用：

        $ajax({
            type:'get',
            url:'http://phpget.php',
            data:{
                username:'zhangsan'
            },
            async:true,
            success:function(str){
                console.log(JSON.parse(str));
            },
            error:function(e){
                console.log(e);
            }
        })

此原生js只适合去理解ajax，如果项目中使用的话，最好还是使用框架中的一些简易操作。

比如：jQuery中，引入后直接调用就可以。

　　　　$.ajax({
            type: 'post',//请求类型，默认get
            url: 'http://data.php',//接口地址
            data: {//传输数据
                username:'zhangsan'
            },
            async: true,//默认异步
            dataType: 'json',//数据类型  JSON就会生成一个JavaScript对象
        }).done(function (d) {//请求成功
            console.log(d);
        }).fail(function (err) {//请求失败
            console.log(err);
        })