先後端數據交互

時間 2019-11-11

標籤後端數據交互简体版

原文原文鏈接

內容：php

1.跨域html

2.表單前端

3.Ajaxjquery

4.jsonpajax

5.WebSocketjson

參考：http://www.javashuo.com/article/p-ktjtcgkp-s.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>