vue 项目 使用 jquery 判断 URL 是否有效

前言

   当我们访问 无效的 URL 时页面会报错（如下），这让用户的使用体验变得很差，如果在点击前对 URL 进行判断是否有效，再根据判断结果进行下一步操作，如果该 URL 真实有效则进行 xxxxx 操作 , 无效则提示用户该 URL 无法访问不进行跳转。（ vue 项目 引入 jquery 可以看我的 另一篇文章）

判断 URL 是否有效

方法一 ：仅适用于 IE （ 不推荐）

function getUrlState(URL) {
  var xmlhttp = new ActiveXObject("microsoft.xmlhttp");
  xmlhttp.Open("GET", URL, false);
  try {
    xmlhttp.Send();
  } catch (e) {
  } finally {
    var result = xmlhttp.responseText;
    if (result) {
      if (xmlhttp.Status == 200) {
        return true;
      } else {
        return false;
      }
    } else {
      return false;
    }
  }
}

 方法二：支持跨域

利用 jquery 的 ajax 请求返回请求结果进行判断, 如果这个 url 不存在，ajax 请求会返回 404 . 然后判断 返回的状态码，能响应200，说明 url 真实有效 ，状态码为其它则表示 URL 出现问题，需要发出提示

实现原理：

1、使用 jsonp，解决跨域问题

2、使用 timeout，在服务端出错时（http 状态码为：5XX、4XX），jquery 无法捕获到这个错误

只要加上timeout 参数即可，超时设置越短越好

代码

$.ajax({
        type:'get',
        url:this.resume.resumeUrl,
        dataType: 'jsonp',
        timeout: 1000,
        complete: function (res) {
          if (res.status == 200) {
              window.open(resumeUrl)    // 这里是打开该 URL ，可以根据自己的需求更改逻辑代码
          } else {
            this.$message.error('文件无效或已删除');
          }
      }
  })

文章如有错误，恳请大家提出问题，本人不胜感激 。 不懂的地方可以评论，我都会 一 一 回复

文章对大家有帮助的话，希望大家能动手点赞鼓励，大家未来一起努力     长路漫漫，道阻且长

代码007普通

打赏 收藏 海报 链接