实现校验有效的URL的方法
前言 大家好，我是青年野味，自学习这么久以来，在你更在深入了解代码的属性时，都离不开我们的基础，基础对我们来说是基石。今天就来让我们见识一下如何正确的校验有效的URL。
正则的校验 js//第一种正则
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//第一种正则
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的方法 jsfunction 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
})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封装
js
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("失效了")
})
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等众多开源库总结 每天轻松一学习，让你每天在代码的道路上，一去不复返了。写的文章还不太成熟，希望各位大佬们能够指导弟弟指出不足之处，让我们一起茁壮成长。