PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

博客列表 > 跨域请求和DOM操作(0814)

跨域请求和DOM操作(0814)

丶久而旧之丶
丶久而旧之丶 原创
2020年09月26日 14:35:56 611浏览

跨域请求和DOM操作

  • 跨域请求(跨域不同域名访问资源)

  • 最简单的跨域请求就是 a img 等标签发起的请求

  • 为了网站安全,默认的禁止JS脚本发起跨域请求

跨域请求

  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>跨域请求</title>
  7. <style>
  8. p {
  9. color: lightblue;
  10. }
  11. </style>
  12. </head>
  13. <body>
  14. <button>跨域请求</button>
  15. <p></p>
  16. <script>
  17. var btn = document.querySelector('button');
  18. // 绑定事件
  19. btn.addEventListener('click', get, false);
  20. function get() {
  21. // 1.创建ajax对象
  22. var xhr = new XMLHttpRequest();
  23. // 2.监听请求
  24. xhr.onreadystatechange = function () {
  25. if (xhr.readyState === 4 && xhr.status === 200) {
  26. console.log(xhr.responseText);
  27. document.querySelector('p').innerHTML = xhr.responseText;
  28. }
  29. }
  30. // 3.配置参数
  31. xhr.open("get", "http://phpio.com/0814.php", true);
  32. // 4.发送请求
  33. xhr.send(null);
  34. }
  35. </script>
  36. </body>
  37. </html>

php脚本

  1. <?php
  2. // 同意其他域名发起跨域请求
  3. header('Access-Control-Allow-Origin:http://xiaoshang.com');
  4. echo '跨域脚本返回的数据';

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. </head>
  8. <body>
  9. <button>跨域请求</button>
  10. <script>
  11. function get(deta) {
  12. var obj = deta;
  13. console.log(obj);
  14. var ul = document.createElement('ul');
  15. ul.innerHTML += '<li>' + obj.title + '</li>';
  16. ul.innerHTML += '<li>' + obj.user.name + '</li>';
  17. ul.innerHTML += '<li>' + obj.user.result + '</li>';
  18. document.body.appendChild(ul);
  19. }
  20. var btn = document.querySelector('button');
  21. btn.addEventListener('click', function () {
  22. // 动态生成script标签发起jsop请求
  23. // 1.先创建标签
  24. var scr = document.createElement("script");
  25. // 设置跨域请求
  26. scr.src = "http://phpio.com/JSONP.php?id=3&jsonp=get";
  27. // 标签类型
  28. scr.type = "text/javascript";
  29. // 插入到页面中
  30. document.body.appendChild(scr);
  31. })
  32. </script>
  33. </body>
  34. </html>

php脚本

  1. <?php
  2. // 先设置编码类型
  3. header('content-type:text/html;charset=utf-8');
  4. // 获取数据
  5. $id = $_GET['id'];
  6. // 获取前端的回调函数名,这个必须是url中的最后一个
  7. $call = $_GET['jsonp'];
  8. $users = [
  9. ["name" => "PHP", "result" => 80],
  10. ["name" => "HTML", "result" => 75],
  11. ["name" => "javascript", "result" => 70]
  12. ];
  13. // 判断请求的的id作为键名是否存在数组中
  14. if (array_key_exists(($id - 1), $users)) {
  15. $user = $users[$id - 1];
  16. }
  17. // 返回前端回调函数的参数json数据
  18. $json = ["title" => "成绩表", "user" => $user];
  19. // 生成js函数调用语句
  20. echo $call . '(' . json_encode($json) . ')';

事件代理

  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>跨域请求</title>
  7. <style>
  8. .item {
  9. width: 50px;
  10. height: 50px;
  11. border-radius: 40px;
  12. background-color: lightgreen;
  13. text-align: center;
  14. box-sizing: border-box;
  15. padding-top: 15px;
  16. margin: 10px;
  17. }
  18. .item1 {
  19. width: 50px;
  20. height: 50px;
  21. border-radius: 40px;
  22. background-color: lightseagreen;
  23. text-align: center;
  24. box-sizing: border-box;
  25. padding-top: 15px;
  26. margin: 10px;
  27. }
  28. </style>
  29. </head>
  30. <body>
  31. <ul>
  32. <li>item1</li>
  33. <li>item2</li>
  34. <li>item3</li>
  35. </ul>
  36. <div class='container'>
  37. <div class='item'>PHP</div>
  38. <div class='item1'>CSS</div>
  39. </div>
  40. <script>
  41. // 事件冒泡
  42. var lis = document.querySelectorAll("li");
  43. document.querySelector("ul").addEventListener("click", function (ev) {
  44. // 打印事件绑定者
  45. console.log(ev.currentTarget);
  46. // 打印事件触发者
  47. console.log(ev.target);
  48. });
  49. // 所以如果要给多个子元素添加事件可以直接给父元素添加同名事件即可
  50. var div = document.querySelector(".container");
  51. div.addEventListener("mouseover", function (ev) {
  52. ev.target.style = "width:200px; transition:all 0.5s ease-out";
  53. });
  54. div.addEventListener("mouseout", function (ev) {
  55. ev.target.style = null;
  56. ev.target.style = "transition:all 0.5s ease-out";
  57. });
  58. </script>
  59. </body>
  60. </html>

总结
1.JSONP那里数据用了数组方式书写没用JSON,看起来好像会更清晰点就是不知道这样好不好

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