前后端数据交互
内容：
1.跨域
2.表单
3.Ajax
4.jsonp
5.WebSocket
参考：https://www.cnblogs.com/chenshishuo/p/4919224.html
1.跨域
(1)什么是跨域
从字面上来理解，就是不能从一个域名上去调用另一个域名下的资源，例如a.cn下面的js不能调用b.cn中的js,对象或数据(因为a.cn和b.cn是不同域)
为了防止XSS攻击，浏览器强制禁止了跨域的发生，当然也有方法去跨域
(2)为什么要跨域
- 同一家不同的域名之间需要跨域
- 第三方数据
(3)跨域的方法
- 表单 – 最基础
- Ajax – 麻烦、安全
- jsonp – 简单、有风险
- WebSocket –
2.表单
(1)什么是表单
表单 -> 前后端数据交互最基本的最常见的，其实本质上说http数据请求都是表单
1 <!-- 表单必须包在form标签中 提交数据的按钮类型必须是submit form的action属性指定提交地址，method属性指定提交方法(get or post) --> 2 <form action="" method="post"> 3 <input type="text" name="username" placeholder="请输入用户名"> 4 <input type="password" name="password" placeholder="请输入密码"> 5 <input type="submit" value="提交"> 6 </form>
(2)表单相关
表单属性：
- action：提交到哪里去
- method：提交方式 – get、post；put、header、delete；自定义
- name：必须加，后端用此取值
- submit：按钮，必须有这个
数据提交方式：
- get：数据放在url中(容量有限；看得见(表单提交))，有缓存，利于分享和收藏
- post：数据放在http-body中(容量很大；看不见)，无缓存，无法分享和收藏
注意：对于前端来说，get和post在本质上安全性是一样的，真正的安全是https才可以保证的
(3)表单校验
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"> 6 <title>表单校验</title> 7 </head> 8 <body> 9 10 <form action="" method="post" id="form1"> 11 用户名: <input type="text" name="username" > <br> 12 密码: <input type="password" name="password" > 13 <input type="submit" value="提交"> 14 </form> 15 16 <script> 17 const $ = document.querySelectorAll.bind(document) 18 19 window.onload = function () { 20 let oForm = $("#form1")[0] 21 let oUser = document.getElementsByName(\'username\')[0] 22 let oPwd = document.getElementsByName(\'password\')[0] 23 console.log(oUser, oPwd) 24 25 oForm.onsubmit = function () { 26 if(oPwd.value === \'\' && oUser.value === \'\'){ 27 alert("用户名和密码不能为空") 28 return false 29 } 30 if(oUser.value===\'\'){ 31 alert("用户名不能为空!") 32 return false 33 } 34 if(oPwd.value===\'\'){ 35 alert("密码不能为空!") 36 return false 37 } 38 } 39 } 40 </script> 41 42 </body> 43 </html>
3.Ajax
(1)什么是Ajax
AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术
AJAX = Asynchronous JavaScript and XML，意思就是用JavaScript执行异步网络请求
AJAX 是一种用于创建快速动态网页的技术，通过在后台与服务器进行少量数据交换，使网页实现异步更新。这意味着可以在不重载整个页面的情况下，对网页的某些部分进行更新。
而传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个页面。
(2)Ajax优缺点
- 优点：Ajax不用刷新就可以提交请求获取数据；另外Ajax可以跨域
- 缺点：Ajax性能低、跨域麻烦、只能单向通信、复杂业务处理麻烦
(3)原生Ajax
1 // GET 2 // 1.创建 AJAX 对象 3 var r = new XMLHttpRequest() 4 // 2.连接 - 设置请求方法和请求地址 5 r.open(\'GET\', \'/login\', true) 6 // 3.发送请求 7 r.send() 8 // 4.接受响应 9 r.onreadystatechange = function() { 10 console.log(\'state change: \', r) 11 } 12 13 14 // POST 15 // 1.创建 AJAX 对象 16 var r = new XMLHttpRequest() 17 // 2.连接 - 设置请求方法和请求地址 18 r.open(\'POST\', \'/login\', true) 19 // 3.设置发送的数据的格式 20 r.setRequestHeader(\'Content-Type\', \'application/json\') 21 // 4.发送请求 22 var account = { 23 username: \'gua\', 24 password: \'123\', 25 } 26 var data = JSON.stringify(account) 27 r.send(data) 28 // 5.接受响应 29 r.onreadystatechange = function() { 30 if (r.readyState === 4) { 31 console.log(\'state change: \', r, r.status, r.response) 32 // 转换格式 33 var response = JSON.parse(r.response) 34 console.log(\'response\', response) 35 } else { 36 console.log(\'change\') 37 } 38 }
Ajax封装成函数：
1 /* 2 ajax 函数 3 */ 4 var ajax = function(method, path, data, reseponseCallback) { 5 var r = new XMLHttpRequest(); 6 // 设置请求方法和请求地址 7 r.open(method, path, true); 8 // 设置发送的数据的格式为 application/json 9 // 这个不是必须的 10 r.setRequestHeader(\'Content-Type\', \'application/json\'); 11 // 注册响应函数 12 r.onreadystatechange = function() { 13 if(r.readyState === 4) { 14 // r.response 存的就是服务器发过来的放在 HTTP BODY 中的数据 15 reseponseCallback(r.response); 16 } 17 }; 18 // 把数据转换为 json 格式字符串 19 data = JSON.stringify(data); 20 // 发送请求 21 r.send(data); 22 };
(4)jQuery的Ajax
1 // 第一种方法: 2 $.post(url,sendData,function(){}); 3 $.get(url,sendData,function(){}); 4 5 // 第二张方法: 6 $.ajax({ 7 "type": POST/GET, //提交的方式 8 "url": "\*\*\*?time="+new Date().getTime(), //传递到服务器的url 9 "data": { 10 //发送的数据，以JSON数据传递 11 "key1": value1, 12 "key2": value2 13 }, 14 "success": function(backData,textStatus,ajax){ 15 //成功之后执行的函数 16 }, 17 "error": function(){ 18 alert("请求失败") 19 } 20 });
(5)表单重复处理
1 $("#btn1").click( 2 function(){ 3 // 点击后禁用按钮 4 $("#btn1").attr(\'disabled\', true) 5 // 执行ajax请求 6 $.ajax({ 7 ... 8 "success": function(str){ 9 alert(str) 10 // 成功请求后解除禁用 11 $("#btn1").attr(\'disabled\', false) 12 } 13 "error": function(){ 14 alert("失败") 15 // 请求失败后也解除禁用 16 $("#btn1").attr(\'disabled\', false) 17 } 18 ... 19 }) 20 21 } 22 )
4.jsonp
jsonp：跨域、安全性差(过于开放)、只能发起get请求
Jsonp(JSON with Padding) 是 json 的一种”使用模式”，可以让网页从别的域名（网站）那获取资料，即跨域读取数据，jsonp原理
jsonp使用实例：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>JSONP 实例</title> 6 <script src="http://cdn.static.runoob.com/libs/jquery/1.8.3/jquery.js"></script> 7 </head> 8 <body> 9 <div id="divCustomers"></div> 10 <script> 11 $.getJSON("http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=?", function(data) { 12 13 var html = \'<ul>\'; 14 for(var i = 0; i < data.length; i++) 15 { 16 html += \'<li>\' + data[i] + \'</li>\'; 17 } 18 html += \'</ul>\'; 19 20 $(\'#divCustomers\').html(html); 21 }); 22 </script> 23 </body> 24 </html>
jsonp原理：创建一个script标签插入页面中，然后调用回调函数，原理演示如下：
1 <!-- author: wyb --> 2 <!DOCTYPE html> 3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <title>jsonp - 百度</title> 8 <script> 9 function show(json){ 10 alert(json.s); 11 } 12 </script> 13 <script src="https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=ss&cb=show" charset="utf-8"></script> 14 </head> 15 <body> 16 </body> 17 </html>
百度搜索提示实现：
1 <!-- author: wyb --> 2 <!DOCTYPE html> 3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <title>jsonp - 百度</title> 8 <script> 9 function show(json){ 10 let oUl = document.getElementById("ul") 11 // alert(json.s); 12 oUl.innerHTML = \'\' 13 json.s.forEach( 14 function (str) { 15 let li = document.createElement("li") 16 li.innerText = str 17 oUl.appendChild(li) 18 } 19 ) 20 } 21 22 window.onload = function () { 23 let oTxt = document.getElementById(\'txt1\') 24 25 oTxt.oninput = function () { 26 let oS = document.createElement(\'script\') 27 oS.src = `https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=${encodeURIComponent(oTxt.value)}&cb=show` 28 29 document.head.appendChild(oS) 30 } 31 32 } 33 34 </script> 35 </head> 36 <body> 37 38 <input type="text" id="txt1"> 39 <ul id="ul"></ul> 40 41 </body> 42 </html>
5.WebSocket
(1)什么是WebSocket
WebSocket 是一种网络通信协议。RFC6455 定义了它的通信标准。WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议
WebSocket的优点：性能高
详细介绍：https://www.cnblogs.com/wyb666/p/9733737.html
(2)WebSocket与Ajax对比
Ajax：性能低、单向通信、跨域麻烦
WebSocket：性能高、双向通信、直接跨域
版权声明：本文为wyb666原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。