Ajax详细（异步交互对象）、封装及调用

网页与服务器的三次握手
    客户向服务器进行http请求
    服务器讲数据传到客户
    客户向服务器提交数据
 
 实例：
    <script type="text/javascript">

        //创建Ajax
        var xmlHttp;
        if (window.XMLHttpRequest) {//标准创建方式
            xmlHttp = new XMLHttpRequest();
        }
        else if (window.ActiveXObject) {
            //IE6创建方式
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        //2、open打开后端页面
        xmlHttp.open("post", "http://www.qhdlink-student.top/student/banner.php", true);

        // 3、设置头信息富
        xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        //4、 给响应事件添加方法
        xmlHttp.onreadystatechange = getbanner;
        //5.发送消息
        var postmsg = 'username=csgo & userpwd=12345678 & userclass=74 & type=2'
        xmlHttp.send(postmsg);

        function getbanner() {
            if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                var con = xmlHttp.responseText;
                var cons = eval("(" + con + ")");
                // consloe.log(cons);
                var bannerc = document.getElementById("showbanner");
                for (v in cons) {
                    var div = document.createElement("div")
                    // div.className = "swiper-slide"
                    // console.log(cons[v]);
                    var imgo = document.createElement("img");
                    imgo.src = "http://www.qhdlink-student.top/" + cons[v].path_banner;
                    // bannerc.appendChild(imgo);
                    div.appendChild(imgo);
                    bannerc.appendChild(div);
                    bannerc.children[v].setAttribute("class", "swiper-slide");
                }

            }
        }
        
Ajxa封装：
 function getData(fn, method, url, asy, data) {//一、创建ajax刘象
            var xmlHttp;
            if (window.XMLHttpRequest) {//标准创建方式
                xmlHttp = new XMLHttpRequest();
            } else if (window.Activexobject) {//IE6创建方式
                xmlHttp = new Activex0bject("Microsoft.XMLHTTP");
            }
            // 二、打开链接
            xm1Http.open(method, ur1, asy);
            //三、设置头信息
            xm1Http.setRequestHeader("Content-type", "application/x-ww-fonm-urlencoded");
            //四、设置响应信息
            xm1Http.onreadystatechange = change;
            //五、发送
            if (data) {
                xmlHttp.send(data);
            } else i
            xmlHttp.send();
            function change() {
                if (xm1Http.readystate == 4 & xm1Http.status == 200) {
                    var str = xmlHttp.responseText;
                    fn(str);
                } else {
                    console.log("连接阶段");
                }
            }
        }
        
    调用：

        //调用
        document.form1.sub.onclick = function () {//获取表单信息
            var names = document.form1.username.value;
            var pwd = document.form1.userpwd.value;
            var cla = document.form1.userclass.value;
            var t = document.form1.type.value;
            var postmsg = "username=" + names + "&userpwd=" + pwd + "&userclass=" + cla + "&type=" + t;
            //调用ajax
        getData(getLogin, "post", " http: // www.qhdlink-student.top/student/login.php", true, postmsg);
        }
        function getLogin(g) {//处理方法
            if (g == "ok") {
                location.href = "index.html";
            } else {
                document.getElementById("showmsg").innerHTML = "用户名或密码错误";
            }
        } 
        
        
        //利用闭包第二原理,写的封装

        function getA(str) {//全局函数
            console.log(str);
        }
        function sendData(fn) {//a是局部变量，在运行sendData时，把getA传过去，那么，就把给getA函数，保留下来
            var a = 10;
            fn(a);
        }
        sendData(getA);