视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
AJAX跨域请求的详细介绍
2020-11-27 20:17:02 责编:小采
文档


由于浏览器的同源策略 ajax请求不可以接收到请求响应回来的数据

  请求数据需要调用浏览器的内置构造函数 XMLHttpRequest() 进行 实例对象

  var xhr = new XMLHttpRequest();

  注意点 在IE8之前支持的 ActiveXobject("Microsoft.XMLHTTP"); 记住要进行兼容处理哦 在这里我就不写了

  通过该对象进行获取

  获取数据的四种状态 xhr.readyState 该属性保存着请求数据的几种状态

    1.xhr.open(请求方式,请求地址,设置同/异步);

    2.xhr.send(null);//发送请求 如果是post请求 那么参数需要在send中进行传递

    3.会一直检测数据是否返回

    4.数据返回 那么xhr.readyState的值是4 说明数据返回成功

那么我们需要进行跨域请求如何做呢

方案一:

  利用script标签的src属性请求数据 src属性请求的数据浏览器是不会进行拦截的

  <script srrc="http://jiang.com/AJAX/data.php"><script/>

  这样我们是可以请求到数据的 但是这样有一些缺点

  1.我们无法控制何时发送请求的 页面加载到这里就是发送请求的

  2.这样的方式 请求方式是同步的请求 需要请求到数据才会执行下一步的代码 这样页面加载时间可能延长

  3.所以建议不要使用这样的方式 不推荐

方案二:

  在js中动态创建script标签 指定请求的接口

  var script = document.createELement("script");

  //将script追加到head标签中

  document.getElementsTagName("head")[0].appendChild(script);

  优点:我们可以控制请求的时机 并且这样请求的方式是异步的 不会延长页面加载的时间

  重要点:我们可以在请求数据中调用请求页面中的函数 使用函数的形参接收请求回来的数据

方案三:

  在请求的后端接口设置一个 请求头即可

  Access-Control-Allow-Origin

  含有这个请求头 前端页面跨域请求的数据就不会被浏览器进行拦截啦

方案四:

  使用<iframe>标签 将一个页面 将可以可变的内容部分放置在该标签中 发送请求就会进行刷新啦 严格意义上不算ajax啦

  该方式在ajax未出现 就是使用该标签实现请求数据的

下载本文
显示全文
专题