• 前后端数据交互

    内容：

    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：性能高、双向通信、直接跨域
  • 相关阅读:
    2015-SH项目总结
    2015年总结
    [css]我要用css画幅画(七)
    [css]我要用css画幅画(六)
    [css]我要用css画幅画(五)
    [css]我要用css画幅画(四)
    [css]我要用css画幅画(三)
    程序遇到问题需要关闭
    ASP.NET Core 验证：（二）介绍ASP.NET Core的 Indentity
    ASP.NET Core 验证：（一）概述
  • 原文地址：https://www.cnblogs.com/wyb666/p/9630787.html
Copyright © 2020-2023  润新知