一招教你如何正确校验有效的URL

前言

大家好，我是青年野味，自学习这么久以来，在你更在深入了解代码的属性时，都离不开我们的基础，基础对我们来说是基石。今天就来让我们见识一下如何正确的校验有效的URL。

正则的校验

//第一种正则
const urlReg = /^((https?|ftp|file):\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/ 
// 测试代码
const urlStr1 = 'https://www.baidu.com/' 
console.log(urlReg.test(urlStr1)) // true 
const urlStr2 = 'sss://www.baidu.com/' 
console.log(urlReg.test(urlStr2)) // false
const urlStr3 = 'https://www.bidu.om/' 
console.log(urlReg.test(urlStr3)) // true

//第二种正则
const urlReg2 = /\b(https?):\/\/[\-A-Za-z0-9+&@#\/%?=~_|!:,.;]*[\-A-Za-z0-9+&@#\/%=~_|]/i;
// 测试代码
const urlStr4 = "https://www.dute.org";
console.log(urlReg2.test(urlStr4));true
const urlStr5 = "ftp://www.dute.org";
console.log(urlReg2.test(urlStr5));false
const urlStr6 = "ftp://ww.dte.rg";
console.log(urlReg2.test(urlStr6));true

从上面的情况可以得知，这种只能校验URL是否合法，但是并不能校验URL是否有效。判断URL是否有效我们可以利用一个浏览器特殊的属性——XMLHttpRequest对象。这个也是Ajax的一个核心对象，且所有现代浏览器都支持 XMLHttpRequest 对象

实现校验有效的URL的方法

function ajaxHttpRequestFunc(URL, callback) {
    // 创建XMLHttpRequest对象，即一个用于保存异步调用对象的变量
    let xmlHttpRequest;
    // 老版本的 Internet Explorer（IE5 和 IE6）使用 ActiveX 对象
    // 所有现代浏览器（Chrom、IE7+、Firefox、Safari 以及 Opera）都有内建的 XMLHttpRequest 对象
    if (window.ActiveXObject) {
        xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
    } else if (window.XMLHttpRequest) { // Netscape浏览器中的创建方式
        xmlHttpRequest = new XMLHttpRequest();
    }
    // 设置响应http请求状态变化的事件
    xmlHttpRequest.onreadystatechange = function () {
        console.log('请求过程', xmlHttpRequest.readyState);
        // 判断异步调用是否成功,若成功开始局部更新数据
        if (xmlHttpRequest.readyState == 4) {
            console.log('状态码为', xmlHttpRequest.status);
            if (xmlHttpRequest.status == 200) {
                // console.log('异步调用返回的数据为：', xmlHttpRequest.responseText);
                callback(true)
                //此处可以写当前URL有效的一个操作
            } else { // 如果异步调用未成功,抛出错误,并显示错误状态码
                //此处可以写当前URL无效的一个操作
                // throw "error:HTTP状态码为:" + xmlHttpRequest.status
                callback(false)
                console.error("error:HTTP状态码为:" + xmlHttpRequest.status)
                // return false
            }
        }
    }
    // 创建http请求，并指定请求得方法（get）、url（需要校验的URL）以及验证信息
    xmlHttpRequest.open("GET", URL, true);
    // 发送请求，因为是get的请求，可以不携带参数
    xmlHttpRequest.send(null);
}

const urlStr1 = 'https://www.baidu.com'
ajaxHttpRequestFunc(urlStr1, (status) => {
    console.log("当前URL是否有效",status) //true
})
const urlStr2 = 'https://www.bidu.cm'
ajaxHttpRequestFunc(urlStr2, (status) => {
    console.log("当前URL是否有效",status) //false
})

原理就是利用了浏览器都拥有了一个XMLHttpRequest对象，通过GET请求的方式去判断当前URL是否有效的，相当于一个只有GET请求的AJAX封装。

完整的Ajax封装

function xhrAjax(options) {
    // 返回一个promise对象
    return new Promise((resolve, reject) => {
        // 处理method(转大写)
        var {
            url,
            method,
            params,
            data
        } = options
        method = method.toUpperCase()
        // 处理query参数(拼接到url上)   id=1&xxx=abc
        let queryString = ''
        Object.keys(params).forEach(key => {
            queryString += `${key}=${params[key]}&`
        })
        if (queryString) { // id=1&xxx=abc&
            // 去除最后的&
            queryString = queryString.substring(0, queryString.length - 1)
            // 接到url
            url += '?' + queryString
        }
        // 执行异步ajax请求
        // 第一步，创建对象
        const xhr = new XMLHttpRequest()
        // 第二步，配置请求信息，参数一是请求的类型,参数二是请求的url,
        xhr.open(method, url, true)
        // 发送请求
        if (method === 'GET' || method === 'DELETE') {
            // 第三步，发送请求
            xhr.send()
        } else if (method === 'POST' || method === 'PUT') {
            // 告诉服务器请求体的格式是json
            xhr.setRequestHeader('Content-Type', 'application/json;charset=utf-8')
            xhr.send(JSON.stringify(data)) // 发送json格式请求体参数
        }
        // 第四步，绑定状态改变的监听
        xhr.onreadystatechange = function () {

            // 如果请求没有完成, 直接结束
            if (xhr.readyState !== 4) {
                return
            }
            // 如果响应状态码在[200, 300)之间代表成功, 否则失败
            const {
                status,
                statusText,
            } = xhr

            // 第五步，获取返回的数据
            if (status >= 200 && status <= 299) { // 如果请求成功了, 调用resolve()
                if (xhr.response !== "") {
                    //因为这里并没有做html的解析，JSON.parse无法解析，如果数据中存在undefined也会报错
                    //可以用过.replace(eval(/undefined/g), 将undefined替换掉'')
                    try {
                        var data = JSON.parse(xhr.response)
                    } catch {
                        var data = xhr.response
                    }

                }
                // 准备结果数据对象response
                const response = {
                    data,
                    status,
                    statusText
                }
                resolve(response)
            } else { // 如果请求失败了, 调用reject()
                reject(new Error('请求出错' + status))
            }
        }
    })
}

function getURL() {
    return xhrAjax({
        url: "https://www.baidu.com",
        method: 'GET',
        params: {},
        data: {}
    })
}

getURL().then((res) => {
    console.log("成功了")
}).catch(err => {
    console.log("失效了")
})

好了，大致的就这样完成了。

拓展

网络请求的方式一共以下几种：

• form： 表单、ifream、刷新页面
• Ajax：  异步网络请求的开山鼻祖
• jQuery：  一个时代
• fetch：  Ajax的替代者（传统 Ajax 已死，Fetch 永生）
• axios、request等众多开源库

总结

每天轻松一学习，让你每天在代码的道路上，一去不复返了。写的文章还不太成熟，希望各位大佬们能够指导弟弟指出不足之处，让我们一起茁壮成长。