前后端数据交互

内容：

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

 

posted @ 2018-09-11 22:23  woz333333  阅读(208)  评论(0)  编辑  收藏  举报