zoukankan      html  css  js  c++  java
  • 前后端数据交互

    内容:

    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:性能高、双向通信、直接跨域

  • 相关阅读:
    flash加载外部swf文件层次问题
    C语言之算法初步(骑士周游世界)
    cocos2dx 画一个有边框的矩形
    C++程序员学习历程
    再诡异的现象背后可能只是一个傻X的低级错误——谈调试心态
    [原创]TimeQuest约束外设之ddio的潜规则
    [原创]三段式状态机的思维陷阱
    [原创]TimeQuest约束外设之诡异的Create Generated Clocks用法
    [原创]换位思考多周期约束
    毫秒必争之如何搞定cache(下)
  • 原文地址:https://www.cnblogs.com/wyb666/p/9630787.html
Copyright © 2011-2022 走看看