ajax封装

最基本的请求

创建一个json文件:如a.json

js写法

let ajax = new XMLHttpRequest()
ajax.open('get','/a.json',true)
ajax.send()
ajax.onreadystatechange = () => {
    if(ajax.readyState === 4){
        if(ajax.status === 200) {
            console.log(JSON.parse(ajax.response))
        }
    }
}

jquery写法

$.ajax({
    type:"get",
    url:"/a.json",
    async:true,
    success:function(data){
        console.log(data)
    }
})

此时没有引入jquery文件没有$，自己封装一个ajax的结构

let $ = {
    ajax(options//对象) {
        let ajax = new XMLHttpRequest()
        ajax.open(options.type ,options.url,options.async)
        ajax.send()
        ajax.onreadystatechange = () => {
             if(ajax.readyState === 4){
                  if(ajax.status === 200) {
                    options.success(JSON.parse(ajax.response))
                }
            }
        }
    }
}

如果jquery方法中，type和async省略不写，则修改为

let $ = {
    ajax(options//对象) {
        let ajax = new XMLHttpRequest()
        ajax.open(options.type || 'GET',options.url,options.async || true)          //如果省略自动生成默认值
        ajax.send()
        ajax.onreadystatechange = () => {
             if(ajax.readyState === 4){
                  if(ajax.status === 200) {
                    options.success(JSON.parse(ajax.response))
                }
            }
        }
    }
}

使用get方法调用封装好的ajax

$.get('/a.json',function(data) {
    console.log(data)
})

//此时添加get方法
let $ = {
    get (url,success) {
        this.ajax({
            url,
            success             //当变量和变量名重复时可简写
        })
    },
    ajax(options//对象) {
        let ajax = new XMLHttpRequest()
        ajax.open(options.type || 'GET',options.url,options.async || true)          //如果省略自动生成默认值
        ajax.send()
        ajax.onreadystatechange = () => {
             if(ajax.readyState === 4){
                  if(ajax.status === 200) {
                    options.success(JSON.parse(ajax.response))
                }
            }
        }
    }
}

再次解构options

let $ = {
    get (url,success) {
        this.ajax({
            url,
            success             //当变量和变量名重复时可简写
        })
    },
    ajax({type,url,async,success}) {
        let ajax = new XMLHttpRequest()
        ajax.open(type || 'GET',url,async || true)          //如果省略自动生成默认值
        ajax.send()
        ajax.onreadystatechange = () => {
             if(ajax.readyState === 4){
                  if(ajax.status === 200) {
                    options.success(JSON.parse(ajax.response))
                }
            }
        }
    }
}