封装跨域方法

从淘宝提示词和百度提示词两个案例的代码中可以看出：跨域的实现过程中有很多代码是固定的，因此可以封装一个跨域方法：

myAjax.js

function myAjax(obj){
    var defaults = {
        type:"get",
        url:"#",
        data:{},
        success:function(data){},
        jsonp:"callback",
        jsonpCallback:"myFunction"
    };

    for(var key in obj){
        defaults[key] = obj[key];
    }

    var params = "";
    for(var attr in defaults.data){
        params += attr+"="+defaults.data[attr]+"&";
    }
    if(params){
        params = params.substring(0,params.length-1);
        defaults.url += "?"+params;
    }
    defaults.url += "&"+defaults.jsonp+"="+defaults.jsonpCallback;

    var script = document.createElement("script");
    script.src = defaults.url;

    window[defaults.jsonpCallback] = function(data){
        defaults.success(data);
    };

    var head = document.querySelector("head");
    head.appendChild(script);
}

用封装的跨域方法实现淘宝提示词和百度提示词两个案例

淘宝提示词

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>淘宝提示词</title>
</head>
<body>
<input type="text" id="keyword" placeholder="请输入关键字"/>
<input type="button" id="btn" value="查询"/>
<div class="box"></div>

<script src="myAjax.js"></script>
<script>
    var btn = document.getElementById("btn");
    btn.onclick = function(){
        var keyWord = document.getElementById("keyword").value;
        var obj={
            url:"https://suggest.taobao.com/sug",
            data:{q:keyWord},
            success:function(data){
                var list = "<ul>";
                for(var i=0; i<data.result.length; i++){
                    var temp = data.result[i];
                    var tempSug = temp[0];
                    list += "<li>"+tempSug+"</li>";
                }
                list += "</ul>";
                var box = document.querySelector(".box");
                box.innerHTML = list;
            }
        };
        myAjax(obj);
    };
</script>
</body>
</html>

百度提示词

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百度提示词</title>
</head>
<body>
<input type="text" id="keyword" placeholder="请输入关键字"/>
<input type="button" id="btn" value="查询"/>
<div class="box"></div>

<script src="myAjax.js"></script>
<script>
    var btn = document.getElementById("btn");
    btn.onclick = function(){
        var keyWord = document.getElementById("keyword").value;
        var obj={
            url:"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",
            data:{wd:keyWord},
            jsonp:"cb",
            success:function(data){
                var list = "<ul>";
                for(var i=0; i<data.s.length; i++){
                    var temp = data.s[i];
                    list += "<li>"+temp+"</li>";
                }
                list += "</ul>";
                var box = document.querySelector(".box");
                box.innerHTML = list;
            }
        };
        myAjax(obj);
    };
</script>
</body>
</html>

猜你喜欢