原生JavaScript/js实现ajax异步数据处理

一、ajax介绍

Ajax 是一种用于创建快速动态网页的技术。Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。[百度百科]

简单的讲，ajax就是一种不需要刷新就可以实现一些交互操作的技术，例如常见的登录，密码如果错误，会有红色字提示密码错误，这种就用的ajax技术，数据验证不需要刷新浏览器，直接就进行相应的检测，并返回相应信息

二、jQuery中实现

核心部分html 代码

    账号：
    
 密码：
    
    确认

不设置样式的结果，顺便复习一下，input是内联块状元素，就是这两个元素的特点兼而有之，它能像内联元素一样可以与其他元素放在同一行，又与块状元素一样可以设置元素宽、高等

jQuery实现ajax，首先要页面引入jQuery才可以

        $(document).ready(function() {

            $("button").click(function() {
                var uid = $('#uid').val();
                var pass = $('#pass').val();

                //ajax  post 至少三个参数 url,data,成功回调函数

                $.post(
                    "./login_confirm", {
                        "uid": uid,
                        "pass": pass
                    },
                    function(result) {
                    
                        console.log(result);
                    }
                );
            });
        });

当鼠标点击的时候，则会实现相应的方法。

三、JavaScript实现ajax

ajax的实现主要基于XMLHttpRequest,在不重新加载页面的情况下更新网页，在页面已加载后从服务器请求数据，在页面已加载后从服务器接收数据，在后台向服务器发送数据，所有现代浏览器 (IE7+、Firefox、Chrome、Safari 以及 Opera) 都内建了 XMLHttpRequest 对象。所以对于<--![IF LT IE6]>，需要用到ActiveXObject，所以需要先判断。

var xhr;
        if (window.XMLHttpRequest) {
            //如果支持XMLHttpRequest
            xhr = new XMLHttpRequest();
        } else if (window.ActiveXObject) {

            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }

接下来主要实现post，和get两个方法

 var ajax = {
            //传入URL，以及执行成功的回调函数
            get: function(url, fn) {
                xhr.open('GET', url, true);
                xhr.onreadystatechange = function() {
                    if (xhr.readyState == 4 && xhr.status == 200 || xhr.status == 304) {

                        fn.call(this, xhr.responseText);
                    }

                };

                xhr.send();
            },
            post: function(url, data, fn) {
                xhr.open('POST', url, true);
                xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                //POST 需要设置内容类型
                xhr.onreadystatechange = function() {
                    if (xhr.readyState == 4 && xhr.status == 200 || xhr.status == 304) {
                        fn.call(this, xhr.responseText);
                        this将继承fn的相关方法，也就是fn作为回调。
                    }

                }

                //post的send方法可以传递相关数据
                xhr.send(data);
            }

        }

post进行调用，get方法类似。

var btn = document.getElementById('btn')
        var btn = document.getElementsByTagName("button")[0];

        btn.onclick = function() {
            var uid = document.getElementById('uid').innerHTML;

            var pass = document.getElementById('pass').innerHTML;
            var url = "./login_confirm";
            data = {
                "uid": uid,
                "pass": pass
            };
            var formData = "";

            //需要将数据变成post能认识的类型
            data = (function(value) {
                for (var key in value) {
                    formData += key + "=" + value[key] + "&";
                }
                return formData;
            })(data);
            //使用立即执行函数来进行 值的拼接过程
            //进行调用
            ajax.post(url, data, function(res) {
                console.log(res);
            });

        }

至此，ajax的简易实现就基本完成了。