对于前端实习小白分享几种常用的前端请求数据的方式（超实用）

最新推荐文章于 2023-08-23 23:46:25 发布

此湖不结冰

最新推荐文章于 2023-08-23 23:46:25 发布

阅读量663

点赞数

分类专栏：前端开发

本文链接：https://blog.csdn.net/weixin_43992119/article/details/100514686

版权

前端开发专栏收录该内容

2 篇文章 0 订阅

订阅专栏

第一种 XMLHttpRequest

ajax是一种技术方案，但并不是一种新技术。它依赖的是现有的CSS/HTML/Javascript，而其中最核心的依赖是浏览器提供的XMLHttpRequest对象，是这个对象使得浏览器可以发出HTTP请求与接收HTTP响应。

** 所以我用一句话来总结两者的关系：我们使用XMLHttpRequest对象来发送一个Ajax请求 **

<script>
  var xhr = new XMLHttpRequest();
  xhr.open("get", "http://i2.mediapower.mobi/adpower/vm/Bora/js/test.js", true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
      console.log(xhr.responseText);
    }
  };
  xhr.send(null);
</script>

第二种jquery的$.ajax方法

场景1. 用Ajax进行数据验证
场景2.按需取数据
场景3.自动更新页面
异步请求方式，jQuery都封装好了，具体的业务可以通过设置不同的属性去实现

<script src="js/jquery-1.11.3.js"></script>
<script>
$(function(){
  $.ajax({
    async: false,
    type: "GET",
    dataType: 'jsonp',
    jsonp: 'callback',
    jsonpCallback: 'callbackfunction',
    url: "http://i2.mediapower.mobi/adpower/vm/Bora/js/test.js",
    data: "",
    timeout: 3000,
    contentType: "application/json;utf-8",
    success: function(msg) {
      console.log(msg);
    }
  });
})
</script>

第三种 postMessage+iframe

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>testa</title>
</head>
<script>
window.onload = function() {
  document.getElementById('ifr').contentWindow.postMessage('我是一条测试数据', 'https://mp.csdn.net/mdeditor/100514686');
};
</script>
<body>
  <iframe id="ifr" src="https://mp.csdn.net/mdeditor/100514686.html"></iframe>
</body>
</html>

请求的页面则可以通过添加监听来获得请求数据

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>testb</title>
</head>
<script>
//可以调用window中的时间监听对跨域访问的postmessage经行监听
window.addEventListener('message', function(event) {
  // 通过origin属性判断消息来源地址
  if (event.origin === 'http://127.0.0.1:8080') {
    alert(event.data); 
  }
}, false);
</script>
<body>
</body>
</html>

此湖不结冰

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
对于前端实习小白分享几种常用的前端请求数据的方式（超实用）

第一种 XMLHttpRequestajax是一种技术方案，但并不是一种新技术。它依赖的是现有的CSS/HTML/Javascript，而其中最核心的依赖是浏览器提供的XMLHttpRequest对象，是这个对象使得浏览器可以发出HTTP请求与接收HTTP响应。** 所以我用一句话来总结两者的关系：我们使用XMLHttpRequest对象来发送一个Ajax请求 **<script&...
复制链接

扫一扫