美文网首页
原生实现ajax和promise实现

原生实现ajax和promise实现

作者: 小豆soybean | 来源:发表于2018-08-13 22:50 被阅读0次

    http://caibaojian.com/ajax-jsonp.html
    我的理解:关于注册回调函数。一般要把它最先写了,等到一会open和send时候就不至于没有回调。

    //第一步,创建XMLHttpRequest对象
    var xmlHttp = new XMLHttpRequest();
    function CommentAll() {
        //第二步,注册回调函数
        xmlHttp.onreadystatechange =callback1;
        //{
        //    if (xmlHttp.readyState == 4)
        //        if (xmlHttp.status == 200) {
        //            var responseText = xmlHttp.responseText;
    
        //        }
        //}
        //第三步,配置请求信息,open(),get
        //get请求下参数加在url后,.ashx?methodName = GetAllComment&str1=str1&str2=str2
        xmlHttp.open("post", "/ashx/myzhuye/Detail.ashx?methodName=GetAllComment", true);
    
        //post请求下需要配置请求头信息
        //xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    
        //第四步,发送请求,post请求下,要传递的参数放这
        xmlHttp.send("methodName = GetAllComment&str1=str1&str2=str2");//"
    
    }
    //第五步,创建回调函数
    function callback1() {
        if (xmlHttp.readyState == 4)
            if (xmlHttp.status == 200) {
                //取得返回的数据
                var data = xmlHttp.responseText;
                //json字符串转为json格式
                data = eval(data);
                $.each(data,
                    function(i, v) {
                        alert(v);
                    });       
            }
    }
    

    promise实现ajax

    'use strict';
    
    // ajax函数将返回Promise对象:
    function ajax(method, url, data) {
        var request = new XMLHttpRequest();
        return new Promise(function (resolve, reject) {
            request.onreadystatechange = function () {
                if (request.readyState === 4) {
                    if (request.status === 200) {
                        resolve(request.responseText);
                    } else {
                        reject(request.status);
                    }
                }
            };
            request.open(method, url);
            request.send(data);
        });
    }
    

    相关文章

      网友评论

          本文标题:原生实现ajax和promise实现

          本文链接:https://www.haomeiwen.com/subject/mjmpbftx.html