简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 跨域请求、JSONP、节点
Blogger Information
Blog 28
fans 0
comment 0
visits 25665
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
跨域请求、JSONP、节点
，多思曩惜，
Original
837 people have browsed it

教学内容

1. 跨域请求

1. CORS

  • CORS: 跨域资源共享
  • CSRF: 跨站请求伪造

同源策略

  • 多个页面的协议, 域名, 端口完全相同, 则认为他们遵循了”同源策略”

  • 同源策略是一种安全机制

  • 浏览器禁止通过脚本发起跨域请求, 如XMLHttpRequest,但是允许通知 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></title>
  7. </head>
  8. <body>
  9.     <button>
  10.         跨域请求
  11.     </button>
  12.     <h2></h2>
  13.     <script>
  14.         // 获取按钮
  15.         var btn = document.querySelector("button");
  16.         // 给按钮添加点击事件
  17.         btn.addEventListener("click",function(){
  18.             // 创建监听对象
  19.             var xhr = new XMLHttpRequest();
  20.             // 监听请求
  21.              xhr.onreadystatechange =function(){
  22.             if(xhr.readyState === 4 && xhr.status === 200){
  23.                 console.log(xhr.responseText);
  24.                 // 将结果打印到h2元素中
  25.                 document.querySelector("h2").innerHTML=xhr.responseText;
  26.                 }
  27.             };
  28.             // 初始化请求参数
  29.             xhr.open("GET","http://localhost/0415php/0522/test1.php",true);
  30.             // 访问另一个服务器 http://localhost/0415php/0522/test1.php
  31.             // 发送请求
  32.             xhr.send(null);
  33.         },
  34.         false
  35.     );
  36.     </script>
  37. </body>
  38. </html>
  • 其中，最重要的就是Access-Control-Allow-Origin，标识允许哪个域的请求。
  • Access-Control-Allow-Origin有多种设置方法：
    • 设置 *，不安全开放式请求。
    • 指定域，例如http://js.edu
    • 动态设置为请求域
  1. <?php
  2. header("Access-Control-Allow-Origin:http://js.edu");
  3. echo "跨域测试";
  4. flush();

" class="reference-link">-

2. 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">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10.     <button>
  11.         跨域请求
  12.     </button>
  13.     <script>
  14.         // 回调处理函数
  15.        function handle(jsonData){
  16.            console.log(jsonData);
  17.            //    转为JS对象
  18.            var data =JSON.parse(jsonData);
  19.            console.log(data);
  20.         //    将数据渲染到页面中
  21.            var ul = document.createElement("ul");
  22.            ul.innerHTML += "<li>" + data.title + "</li>";
  23.            ul.innerHTML += "<li>姓名:" + data.user.name + "</li>";
  24.            ul.innerHTML += "<li>邮箱:" + data.user.email + "</li>";
  25.            document.body.appendChild(ul);
  26.         }
  27.         //    获取按钮
  28.        var btn = document.querySelector("button");
  29.         //    添加事件
  30.         btn.addEventListener("click",function(){
  31.             // 动态发起jsonp的跨域请求
  32.            var script =document.createElement("script");
  33.            script.src="http://localhost/0415php/0522/test2.php?jsonp=handle&id=1";
  34.            document.head.appendChild(script);
  35.         },
  36.         false
  37.     );
  38.     </script
  39. </body>
  40. </html>
  1. <?php
  2. // json只支持utf-8
  3. header('content-type:text/html;charset=utf-8');
  4. // 获取前端传入的数据
  5. $callback = $_GET['jsonp'];
  6. $id=$_GET['id'];
  8. // echo  $callback;
  9. // 用对象
  10. $users = [
  11.     '{"name":"admin","email":"admin@qq.com"}',
  12.     '{"name":"ming","email":"admin@qq.com"}',
  13.     '{"name":"admin","email":"admin@qq.com"}',
  14. ];
  15. // 检测是否存在
  16. if(array_key_exists(($id-1),$users)){
  17.     $user =$users[$id-1];
  18. }
  19. $json ='{
  20.     "title": "用户表",
  21.     "user": '.$user.'
  22. }';
  23. echo $callback . '(' . json_encode($json) . ')';

节点

  • 节点：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>Document</title>
  7. </head>
  8. <body>
  9.     <p style="color: red;">php.cn</p>
  10.     <form action="1.php"></form>
  11.     <form action="2.php"></form>
  12.     <form action="3.php"></form>
  13.     <!-- <form action="3.php" id="login"></form> -->
  14.     <form action="3.php" name="login">
  15.       <input type="text" name="username" value="xxx" />
  16.     </form>
  17.     <script>
  18.         // 节点：html文档中所有的内容都是节点
  19.         // 节点树：DOM树
  20.         // 节点类型：元素、文本节点、属性节点、注释节点、文档节点
  21.         // doctype html
  22.         // console.log(document.doctype);
  23.         // html ---html
  24.         // console.log(document.documentElement);
  25.         // head
  26.         // console.log(document.head);
  27.         // body
  28.         // console.log(document.body);
  29.         // console.log(document.forms[0]);
  30.         // 通过ID拿
  31.         // console.log(document.getElementById("login"));
  32.         // console.log(document.forms.namedItem("login"));
  33.         console.log(document.forms.namedItem("login").username.value);
  34.     </script>
  35. </body>
  36. </html>

总结

  • 了解跨域请求的方法、json只支持utf-8。
  • Access-Control-Allow-Origin的使用
  • 了解获取HTML文档中的各个节点
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：跨域其实一点也不新鲜， 之前咱们一直在用，只是没有关注过它， 如<a>, <img>， <link>
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！