前后端数据交互

内容：

1.表单

2.Ajax

3.jsonp

4.WebSocket

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.Ajax

(1)什么是Ajax

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术

AJAX = Asynchronous JavaScript and XML，意思就是用JavaScript执行异步网络请求

AJAX 是一种用于创建快速动态网页的技术，通过在后台与服务器进行少量数据交换，使网页实现异步更新。这意味着可以在不重载整个页面的情况下，对网页的某些部分进行更新。

而传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个页面。

(2)Ajax优缺点

优点：Ajax不用刷新就可以提交请求获取数据；另外Ajax可以跨域
缺点：Ajax性能低、跨域麻烦、只能单向通信、复杂业务处理麻烦

(3)原生Ajax

 1 // GET
 2 // 创建 AJAX 对象
 3 var r = new XMLHttpRequest()
 4 // 设置请求方法和请求地址
 5 r.open('GET', '/login', true)
 6 // 注册响应函数
 7 r.onreadystatechange = function() {
 8     console.log('state change: ', r)
 9 }
10 // 发送请求
11 r.send()
12 
13 
14 // POST
15 // 创建 AJAX 对象
16 var r = new XMLHttpRequest()
17 // 设置请求方法和请求地址
18 r.open('POST', '/login', true)
19 // 设置发送的数据的格式
20 r.setRequestHeader('Content-Type', 'application/json')
21 // 注册响应函数
22 r.onreadystatechange = function() {
23     if (r.readyState === 4) {
24         console.log('state change: ', r, r.status, r.response)
25         // 转换格式
26         var response = JSON.parse(r.response)
27         console.log('response', response)
28     } else {
29         console.log('change')
30     }
31 }
32 // 发送请求
33 var account = {
34     username: 'gua',
35     password: '123',
36 }
37 var data = JSON.stringify(account)
38 r.send(data)

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": {    //发送的数据，以JSON数据传递
10         "key1": value1,
11         "key2": value2
12     },
13     "success": function(backData,textStatus,ajax){   //成功之后执行的函数
14     }
15 });

3.jsonp

jsonp：跨域、安全性差

Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据

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>

4.WebSocket

(1)什么是WebSocket

WebSocket 是一种网络通信协议。RFC6455 定义了它的通信标准。WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议

WebSocket的优点：性能高

详细介绍：https://www.cnblogs.com/fuqiang88/p/5956363.html

(2)WebSocket与Ajax对比

Ajax：性能低、单向通信、跨域麻烦

WebSocket：性能高、双向通信、直接跨域

猜你喜欢