博客列表 >跨域请求实战案例与事件代理实战案例

跨域请求实战案例与事件代理实战案例

longlong
longlong原创
2020年08月15日 17:56:27514浏览

1. 跨域请求实战

此案例将使用JSONP的方式来请求跨域资源,并将其渲染到页面上

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <title>跨域资源请求--JSONP</title>
  7. <style>
  8. table {
  9. border-collapse: collapse;
  10. border: 1px solid black;
  11. }
  12. td {
  13. border: 1px solid black;
  14. padding: 5px 10px;
  15. background-color: lightsalmon;
  16. }
  17. </style>
  18. </head>
  19. <body>
  20. <button>获取商品一的信息</button>
  21. <button>获取商品二的信息</button>
  22. <button>获取商品三的信息</button>
  23. <button>获取商品四的信息</button>
  24. <button>获取商品五的信息</button>
  25. <h3></h3>
  26. <table></table>
  27. <script>
  28. // 获取标题,表格,所有的按钮
  29. let h3 = document.querySelector("h3");
  30. let table = document.querySelector("table");
  31. let btns = document.querySelectorAll("button");
  32. // 循环给按钮绑定单击事件,创建script标签,以JSONP的方式请求跨域资源
  33. for (let i = 0; i < btns.length; i++) {
  34. btns.item(i).addEventListener(
  35. "click",
  36. function () {
  37. let script = document.createElement("script");
  38. script.src =
  39. "http://front.test/demo.php?id=" + (i + 1) + "&jsonp=handle";
  40. document.head.appendChild(script);
  41. },
  42. false
  43. );
  44. }
  45. // 脚本标签中src属性的回调函数参数,这个data是服务器端返回的json格式字符串
  46. function handle(data) {
  47. // console.log(data);
  48. let obj = JSON.parse(data);
  49. // console.log(obj);
  50. h3.innerHTML = obj.title;
  51. let tr = document.createElement("tr");
  52. tr.innerHTML += "<td>" + obj.data.list + "</td>";
  53. tr.innerHTML += "<td>" + obj.data.name + "</td>";
  54. tr.innerHTML += "<td>" + obj.data.message + "</td>";
  55. tr.innerHTML += "<td>" + obj.data.spec + "</td>";
  56. tr.innerHTML += "<td>" + obj.data.price + "</td>";
  57. table.appendChild(tr);
  58. }
  59. </script>
  60. </body>
  61. </html>
  1. <?php
  2. header('content-type:text/html;charset=utf-8');
  3. // 获取链接中的GET参数,对应id和一个回调函数
  4. $id = $_GET['id'];
  5. $callback = $_GET['jsonp'];
  6. // 模拟接口数据,这个数据是一个数组,但是数组元素一定是json样式,但并不是json
  7. $datas = [
  8. 0 => '{"list":"商品一","name":"荣耀 Play4T Pro","message":"OLED屏幕指纹 4800万高感光夜拍三摄","spec":"全网通 8GB+128GB","price":"1598"}',
  9. 1 => '{"list":"商品二","name":"iphone 11","message":"双卡双待 数码变焦 人像模式","spec":"全网通 128GB","price":"5899"}',
  10. 2 => '{"list":"商品三","name":"Redmi 10X","message":"4800万超清四摄 小孔全面屏 大电量","spec":"全网通 4GB+128GB","price":"999"}',
  11. 3 => '{"list":"商品四","name":"华为 nova 7 SE","message":"麒麟820 5G Soc芯片 6400万高清四摄","spec":"全网通 8GB+128GB","price":"2399"}',
  12. 4 => '{"list":"商品五","name":"vivo iQOO Z1 ","message":"晓龙756G 120HZ竞速屏 超大电池 双模","spec":"全网通 6GB+128GB","price":"1798"}'
  13. ];
  14. // 因为要根据GET传过来的id来获取对应的数据,所以判断此id在数据数组中是否存在,若存在,则取出对应的数据
  15. if (array_key_exists(($id-1),$datas)){
  16. $data = $datas[$id-1];
  17. }
  18. // 将取出来的数据以字符串拼接的方式拼成json样式
  19. $json = '{"title":"商品信息表:","data":' . $data . '}';
  20. // 以字符串拼接的方式生成一条回调函数语句,且将数据转为json,然后返回给前端
  21. echo $callback.'('. json_encode($json) .')';

案例效果如下:

2. 事件代理

本次案例将修改上面的跨域请求实战案例,因为上面的案例是通过循环按钮,绑定事件的方式,这样很麻烦,而且执行效率也不高,所以通过改进,可以考虑将所有的按钮事件委托给另外一个标签来执行,利用事件冒泡的原理来实现自动绑定点击事件,并且通过dataset自定义属性,将id自动绑定到事件触发者身上,从而实现自动获取商品信息,此次只需要修改html里面的文件即可,修改如下:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <title>跨域资源请求--JSONP实战案例(使用事件代理)</title>
  7. <style>
  8. table {
  9. border-collapse: collapse;
  10. border: 1px solid black;
  11. }
  12. td {
  13. border: 1px solid black;
  14. padding: 5px 10px;
  15. background-color: lightsalmon;
  16. }
  17. a {
  18. padding: 5px 10px;
  19. background-color: limegreen;
  20. }
  21. a:hover {
  22. background-color: green;
  23. color: white;
  24. cursor: pointer;
  25. }
  26. </style>
  27. </head>
  28. <body>
  29. <div>
  30. <!-- 使用dataset自定义属性设置id,便于自动获取到JS脚本标签中的src -->
  31. <a data-id="1">获取商品一的信息</a>
  32. <a data-id="2">获取商品二的信息</a>
  33. <a data-id="3">获取商品三的信息</a>
  34. <a data-id="4">获取商品四的信息</a>
  35. <a data-id="5">获取商品五的信息</a>
  36. </div>
  37. <h3></h3>
  38. <table></table>
  39. <script>
  40. // 获取标题、表格、事件代理者div
  41. let h3 = document.querySelector("h3");
  42. let table = document.querySelector("table");
  43. let div = document.querySelector("div");
  44. // 给事件代理者添加事件监听
  45. div.addEventListener(
  46. "click",
  47. function (ev) {
  48. let script = document.createElement("script");
  49. // console.log(ev.target.dataset.id);
  50. // 通过dataset对象获取到商品id
  51. script.src =
  52. "http://front.test/demo.php?id=" +
  53. ev.target.dataset.id +
  54. "&jsonp=handle";
  55. document.head.appendChild(script);
  56. },
  57. false
  58. );
  59. // 脚本标签中src属性的回调函数参数,这个data是服务器端返回的json格式字符串
  60. function handle(data) {
  61. // console.log(data);
  62. let obj = JSON.parse(data);
  63. // console.log(obj);
  64. h3.innerHTML = obj.title;
  65. let tr = document.createElement("tr");
  66. tr.innerHTML += "<td>" + obj.data.list + "</td>";
  67. tr.innerHTML += "<td>" + obj.data.name + "</td>";
  68. tr.innerHTML += "<td>" + obj.data.message + "</td>";
  69. tr.innerHTML += "<td>" + obj.data.spec + "</td>";
  70. tr.innerHTML += "<td>" + obj.data.price + "</td>";
  71. table.appendChild(tr);
  72. }
  73. </script>
  74. </body>
  75. </html>

最后效果是一样的,但是没有用循环,效率就会高些了:

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议