2021-06-21 使用ajax设置同步百度的搜索栏

代码

html:

    <input type="text" id="txt">
    <ul class="list"></ul>

js:

class Search {
    constructor(ops) {
        this.txt = ops.txt;
        this.list = ops.list;
        this.url = ops.url;
        this.addEvent();
    }
    addEvent() {
        const that = this;
        this.txt.oninput = function() {
            if (this.value === "") return;
            that.v = this.value;
            that.load();
        }
    }

    load() {
        request({
            url: this.url,
            type: "jsonp",
            data: {
                wd: this.v,
                cb: "dshdfja"
            },
            filedName: "cb",
            success: (res) => {
                this.res = res.s;
                this.render();
            }
        })
    }
    render() {//渲染
        let str = "";
        for (var i = 0; i < this.res.length; i++) {str += `<li>${this.res[i]}</li>`;
        this.list.innerHTML = str;
    }
}
new Search({
    txt: document.getElementById("txt"),
    list: document.querySelector(".list"),
    url: "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su"
});
//设置ajax
function request(ops) {
	let { url, success, type = "get", data = {}, error, timeout = 1000, dataType = "text", filedName = "" } = ops;
    let str = "";
    for (let i in data) {str += `${i}=${data[i]}&`;}
    url = url + "?" + str + "_qft_=" + Date.now();
    if (type !== "jsonp") {
        let xhr = new XMLHttpRequest();//创建xhr对象
        xhr.open(type, url);//设置请求
        xhr.onload = function() {if (xhr.status === 200) {const res = dataType === "json" ? JSON.parse(xhr.responseText) : xhr.responseText;}}//设置监听
        xhr.send();//发送请求
    } else {
        let script = document.createElement("script");//动态创建script标签
        script.id = "abc";
        script.src = url;//用script标签的src属性进行跨域
        document.body.appendChild(script);//节点追加
        window[data[filedName]] = function(res) {
            res = dataType === "json" ? JSON.parse(res) : res;
            //成功后删除script标签
            success && success(res);
            script && script.remove();
        }
    }
}

结果: