modify:Node.js
This commit is contained in:
qianguyihao
@@ -567,6 +567,86 @@ JSON(JavaScript Object Notation)：是ECMAScript的子集。作用是进行数
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## jQuery 中的 Ajax
|
||||
|
||||
|
||||
JQuery作为最受欢迎的js框架之一，常见的Ajax已经帮助我们封装好了，只需要调用即可。更为详细的api文档可以查阅：[w3cSchool_JQueryAjax](http://www.w3school.com.cn/jquery/jquery_ref_ajax.asp)
|
||||
|
||||
格式举例：
|
||||
|
||||
```javascript
|
||||
$.ajax({
|
||||
url:'01.php',//请求地址
|
||||
data:'name=fox&age=18',//发送的数据
|
||||
type:'GET',//请求的方式
|
||||
success:function (argument) {},// 请求成功执行的方法
|
||||
beforeSend:function (argument) {},// 在发送请求之前调用,可以做一些验证之类的处理
|
||||
error:function (argument) {console.log(argument);},//请求失败调用
|
||||
})
|
||||
```
|
||||
|
||||
|
||||
|
||||
代码举例：
|
||||
|
||||
（1）index.html
|
||||
|
||||
```html
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>jquery-ajax</title>
|
||||
</head>
|
||||
<body>
|
||||
<input type="button" value="点击" id="btn">
|
||||
<div id="showInfo"></div>
|
||||
<script type="text/javascript" src="jquery-1.11.2.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(function(){
|
||||
|
||||
$("#btn").click(function(){
|
||||
$.ajax({
|
||||
url:"data.php",
|
||||
dataType:"text",
|
||||
type:"get",
|
||||
success:function(data){
|
||||
alert(data);
|
||||
//$("#showInfo").html(data);
|
||||
},
|
||||
error:function(e){
|
||||
console.log(e);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
（2）data.php：
|
||||
|
||||
```php
|
||||
<?php
|
||||
|
||||
$text = 'hello world';
|
||||
|
||||
echo $text;
|
||||
|
||||
?>
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
## 我的公众号
|
||||
|
||||
想学习<font color=#0000ff>**代码之外的软技能**</font>？不妨关注我的微信公众号：**生命团队**（id：`vitateam`）。
|
||||
@@ -575,6 +655,3 @@ JSON(JavaScript Object Notation)：是ECMAScript的子集。作用是进行数
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
240
08-Ajax/03-函数封装：Ajax发送http请求（get&post）.md
Normal file
240
08-Ajax/03-函数封装：Ajax发送http请求（get&post）.md
Normal file
@@ -0,0 +1,240 @@
|
||||
|
||||
|
||||
|
||||
|
||||
## 函数封装
|
||||
|
||||
ajax_tool.js：
|
||||
|
||||
```javascript
|
||||
// 方法：ajax get 五部曲
|
||||
function ajax_get(url,data) {
|
||||
// 异步对象
|
||||
var ajax = new XMLHttpRequest();
|
||||
|
||||
// url 方法
|
||||
// 如果是get发送数据 发送的格式为 xxx.php?name=jack&age=18
|
||||
// 所以 这里 需要拼接 url
|
||||
if (data) {
|
||||
// 如果有值 需要拼接字符串
|
||||
// 拼接为xxx.php?name=jack&age=18
|
||||
url+='?';
|
||||
url+=data;
|
||||
}else{
|
||||
}
|
||||
|
||||
ajax.open('get',url);
|
||||
// 发送
|
||||
ajax.send();
|
||||
|
||||
// 注册事件
|
||||
ajax.onreadystatechange = function () {
|
||||
// 在事件中 获取数据 并修改界面显示
|
||||
if (ajax.readyState==4&& ajax.status==200) {
|
||||
console.log(ajax.responseText);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 方法：ajax_post五部曲
|
||||
function ajax_post(url,data) {
|
||||
// 异步对象
|
||||
var ajax = new XMLHttpRequest();
|
||||
|
||||
// url 方法
|
||||
ajax.open('post',url);
|
||||
|
||||
// 设置 请求报文
|
||||
ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
|
||||
|
||||
// 发送
|
||||
if (data) {
|
||||
// 如果 有值 post请求 是在 send中 发送给服务器
|
||||
ajax.send(data);
|
||||
}else{
|
||||
ajax.send();
|
||||
}
|
||||
|
||||
|
||||
// 注册事件
|
||||
ajax.onreadystatechange = function () {
|
||||
// 在事件中 获取数据 并修改界面显示
|
||||
if (ajax.readyState==4&&ajax.status==200) {
|
||||
console.log(ajax.responseText);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// 方法：将 get 跟post 封装到一起
|
||||
/*
|
||||
参数1:url
|
||||
参数2:数据
|
||||
参数3:请求的方法
|
||||
参数4:数据成功获取以后，调用的方法
|
||||
*/
|
||||
function ajax_tool(url,data,method,success) {
|
||||
// 异步对象
|
||||
var ajax = new XMLHttpRequest();
|
||||
|
||||
// get 跟post 需要分别写不同的代码
|
||||
if (method=='get') {
|
||||
// get请求
|
||||
if (data) {
|
||||
// 如果有值
|
||||
url+='?';
|
||||
url+=data;
|
||||
}else{
|
||||
|
||||
}
|
||||
// 设置 方法 以及 url
|
||||
ajax.open(method,url);
|
||||
|
||||
// send即可
|
||||
ajax.send();
|
||||
}else{
|
||||
// post请求
|
||||
// post请求 url 是不需要改变
|
||||
ajax.open(method,url);
|
||||
|
||||
// 需要设置请求报文
|
||||
ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
|
||||
|
||||
// 判断data send发送数据
|
||||
if (data) {
|
||||
// 如果有值 从send发送
|
||||
ajax.send(data);
|
||||
}else{
|
||||
// 木有值 直接发送即可
|
||||
ajax.send();
|
||||
}
|
||||
}
|
||||
|
||||
// 注册事件
|
||||
ajax.onreadystatechange = function () {
|
||||
// 在事件中 获取数据 并修改界面显示
|
||||
if (ajax.readyState==4&&ajax.status==200) {
|
||||
// console.log(ajax.responseText);
|
||||
|
||||
// 将 数据 让 外面可以使用
|
||||
// return ajax.responseText;
|
||||
|
||||
// 当 onreadystatechange 调用时 说明 数据回来了
|
||||
// ajax.responseText;
|
||||
|
||||
// 数据成功获取以后，执行方法success()。
|
||||
//我们把获取的数据作为 success()的参数，意思是：
|
||||
//success方法是外面的，数据是里面给的。那数据就变相地传递到了外面去【重要】
|
||||
success(ajax.responseText);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
|
||||
## 函数调用（get方法）
|
||||
|
||||
test_get.html:
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<input type="button" value="测试get" id='ajax_get'>
|
||||
</body>
|
||||
</html>
|
||||
<!-- 导入 封装的js -->
|
||||
<script type="text/javascript" src='ajax_tool.js'></script>
|
||||
<script type="text/javascript">
|
||||
document.querySelector('#ajax_get').onclick = function () {
|
||||
// 直接使用 封装的 工具函数即可
|
||||
/*
|
||||
参数1:url
|
||||
参数2:数据
|
||||
参数3:请求的方法
|
||||
参数4：请求成功后，调用的方法
|
||||
*/
|
||||
var backData = ajax_tool('test_get.php','name=smyhvae&skill=code','get',function(data){
|
||||
console.log(data);
|
||||
});
|
||||
// 测试
|
||||
console.log(backData);
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
|
||||
test_get.php：
|
||||
|
||||
|
||||
```php
|
||||
<?php
|
||||
// 获取get提交的数据
|
||||
echo $_GET['skill'];
|
||||
?>
|
||||
```
|
||||
|
||||
## 函数调用（post方法）
|
||||
|
||||
test_post.html：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<input type="button" value="测试post" id='ajax_post'>
|
||||
</body>
|
||||
</html>
|
||||
<!-- 导入 封装的js -->
|
||||
<script type="text/javascript" src='ajax_tool.js'></script>
|
||||
<script type="text/javascript">
|
||||
document.querySelector('#ajax_post').onclick = function () {
|
||||
// 直接使用 封装的 工具函数即可
|
||||
/*
|
||||
参数1:url
|
||||
参数2:数据
|
||||
参数3:请求的方法
|
||||
参数4:数据获取成功调用的方法
|
||||
*/
|
||||
var backData = ajax_tool('02.test_post.php','friend=好丽友','post',function(data){
|
||||
console.log(data);
|
||||
});
|
||||
// 测试
|
||||
console.log(backData);
|
||||
|
||||
|
||||
// 怎么样 处理数据 全部写在 匿名函数中
|
||||
ajax_tool('02.test_post.php','friend=好丽友','post',function(data){
|
||||
console.log(data);
|
||||
// 修改页面的显示呢?
|
||||
});
|
||||
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
test_post.php：
|
||||
|
||||
```php
|
||||
<?php
|
||||
|
||||
echo $_POST['friend'];
|
||||
?>
|
||||
|
||||
```
|
||||
|
||||
工程文件：
|
||||
|
||||
- 2018-02-28-Ajax请求封装.rar
|
||||
@@ -1,100 +0,0 @@
|
||||
|
||||
|
||||
|
||||
```html
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
```html
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
```html
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
```html
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
```html
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
```html
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
```html
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
```html
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
```html
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
```html
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
```html
|
||||
|
||||
```
|
||||
|
||||
|
||||
169
08-Ajax/04-同源和跨域.md
Normal file
169
08-Ajax/04-同源和跨域.md
Normal file
@@ -0,0 +1,169 @@
|
||||
|
||||
## 同源和跨域
|
||||
|
||||
## 同源
|
||||
|
||||
同源策略是浏览器的一种安全策略，所谓同源是指，域名，协议，端口完全相同。
|
||||
|
||||
|
||||
|
||||
## 跨域问题的解决方案
|
||||
|
||||
从我自己的网站访问别人网站的内容，就叫跨域。
|
||||
|
||||
20180228_2231.png
|
||||
|
||||
出于安全性考虑，浏览器不允许ajax跨域获取数据。
|
||||
|
||||
|
||||
- iframe：处于安全性考虑，浏览器的开发厂商已经禁止了这种方式。
|
||||
|
||||
- JSONP：script 标签的 src 属性传递数据。
|
||||
|
||||
## JSONP
|
||||
|
||||
JSONP(JSON with Padding)：带补丁的 json，本质是利用了 `<script src=""></script>`标签具有可跨域的特性，由服务端返回一个预先定义好的JS函数的调用，并且将服务器数据以该函数参数的形式传递过来。此方法需要前后端配合完成。
|
||||
|
||||
我们知道， html标签的 src 属性是支持跨域的：
|
||||
|
||||
```html
|
||||
<img src="http://img.smyhvae.com/2016040101.jpg" alt="">
|
||||
```
|
||||
|
||||
jsonp 就是利用这个特性实现的跨域，但用的是 script 标签。如下：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- jsonp 就是 利用 src，实现的跨域 用的是 script标签 -->
|
||||
<script type="text/javascript" src='http://192.168.141.137/2018-02-28/myData.php'></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
上方那一行的代码，意思是：刷新A服务器上的index页面后，会去请求 B 服务器上的 `myData.php` 这个页面。而且请求的方式是 get 请求。
|
||||
|
||||
但是 B 服务器上的页面不是你想请求就可以请求的，大家一起配合才可以。
|
||||
|
||||
|
||||
**具体实现步骤：**
|
||||
|
||||
需要首先声明的是，jsonp 只能通过 GET 方式进行请求。
|
||||
|
||||
（1）A客户端的代码：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
<script type="text/javascript">
|
||||
|
||||
// 定义 eatFood()方法
|
||||
function fn(data) {
|
||||
console.log('我被调用了哦');
|
||||
console.log(data);
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- 使用 script标签 发送了 get请求 去到了一个 php页面 -->
|
||||
<script type="text/javascript" src='http://192.168.141.137/01.php?callback1=fn'></script>
|
||||
```
|
||||
|
||||
|
||||
我们来分析上方代码中的最后一行的那个url：A 客户端请求的是 B服务器上的 `01.php`页面。url里有个`callback1=fn`，意思是：callback1是A和B 之间的约定，约定后，将执行方法 fn。
|
||||
|
||||
其实，fn方法已经在最后一行代码中执行了。只不过，fn方法里的data数据，是从 B 服务器中获取的。
|
||||
|
||||
（2）B服务器端的代码：
|
||||
|
||||
```php
|
||||
<?php
|
||||
$mycallBack = $_GET['callback1'];
|
||||
|
||||
$arr = array("zhangsan","lisi","zhaoliu");
|
||||
|
||||
echo $mycallBack.`(`.json_encode($arr).`)`; //字符串拼接
|
||||
?>
|
||||
```
|
||||
|
||||
代码解释：
|
||||
|
||||
第一行的`callback1` 是A和B之间的约定，二者必须一致。
|
||||
|
||||
echo语句中输出的内容，即使要返回给A客户端的内容，此内容会保存在 A 客户端的fn方法的data里。 data[0]指的是 zhangsan。
|
||||
|
||||
|
||||
`json_encode`指的是，将php对象转化为 json。
|
||||
|
||||
|
||||
刷新A页面，输出结果为：
|
||||
|
||||
```
|
||||
mycallBack([zhangsan","lisi","zhaoliu])
|
||||
```
|
||||
|
||||
|
||||
## jQuery 中的 JSONP
|
||||
|
||||
我们知道，jQuery 中发送 Ajax 请求，格式是：
|
||||
|
||||
```javascript
|
||||
$("#btn").click(function(){
|
||||
$.ajax({
|
||||
url:"./data.php?callback1=fn",
|
||||
dataType:"jsonp",
|
||||
type:"get",
|
||||
//jsonp:"callback1", //传递给B服务器的回调函数的名字（默认为 callback）
|
||||
//jsonCallBack:"fn" //自定义的函数名称。默认为 jQuery 自动生成的随机函数名
|
||||
success:function(data){
|
||||
alert(data);
|
||||
//$("#showInfo").html(data);
|
||||
},
|
||||
error:function(e){
|
||||
console.log(e);
|
||||
}
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
那如果数据是 JSONP，上方代码则改为：
|
||||
|
||||
|
||||
```javascript
|
||||
$("#btn").click(function(){
|
||||
$.ajax({
|
||||
url:"./data.php?fn",
|
||||
dataType:"text",
|
||||
type:"get",
|
||||
success:function(data){
|
||||
alert(data);
|
||||
//$("#showInfo").html(data);
|
||||
},
|
||||
error:function(e){
|
||||
console.log(e);
|
||||
}
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
|
||||
## 参考链接
|
||||
|
||||
参考链接：https://www.cnblogs.com/2050/p/3191744.html
|
||||
|
||||
128
08-Ajax/05-模板引擎.md
Normal file
128
08-Ajax/05-模板引擎.md
Normal file
@@ -0,0 +1,128 @@
|
||||
|
||||
|
||||
## 模版引擎
|
||||
|
||||
### 引入
|
||||
|
||||
我们在使用ajax请求数据时，返回的如果是一个 JSON 格式的字符串，我们需要将其包装到对应的HTML代码中，再添加到页面上，才能看到效果。那么这个包装得过程有没有简单的方法呢?
|
||||
|
||||
|
||||
假设在 js 中有如下数据：
|
||||
|
||||
|
||||
|
||||
```javascript
|
||||
var obj = {
|
||||
name:"fox",
|
||||
age:18,
|
||||
skill:"卖萌"
|
||||
};
|
||||
```
|
||||
|
||||
希望包装为:
|
||||
|
||||
```html
|
||||
<ul>
|
||||
<li>姓名:fox</li>
|
||||
<li>年龄:18</li>
|
||||
<li>爱好:卖萌</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
|
||||
我们可以通过模板插件来实现。
|
||||
|
||||
### 模版插件的原理
|
||||
|
||||
我们定义一段文本作为模板,读取文本,使用特殊的符号<%= 属性名 %>,通过正则表达式找到这些特殊的符号进行替换,是不是就实现了这样的效果呢?
|
||||
|
||||
### 常见的模板引擎
|
||||
|
||||
- BaiduTemplate(百度开发)
|
||||
|
||||
- ArtTemplate(腾讯开发)：[GitHub地址](https://github.com/aui/art-template)、[文档地址](https://aui.github.io/art-template/zh-cn/docs/)。
|
||||
|
||||
- velocity.js(淘宝开发)
|
||||
|
||||
- Handlebars
|
||||
|
||||
|
||||
## ArtTemplate
|
||||
|
||||
|
||||
标准语法：
|
||||
|
||||
|
||||
|
||||
|
||||
```html
|
||||
{{if user}}
|
||||
<h2>{{user.name}}</h2>
|
||||
{{/if}}
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
渲染模板：
|
||||
|
||||
|
||||
```javascript
|
||||
var data = {
|
||||
title: `标签`,
|
||||
list: [`文艺`, `博客`, `摄影`]
|
||||
};
|
||||
var html = template(`test`, data);
|
||||
document.getElementById(`content`).innerHTML = html;
|
||||
```
|
||||
|
||||
|
||||
举例：
|
||||
|
||||
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Title</title>
|
||||
<script src="js/template-native-debug.js"></script>
|
||||
<script src="js/jquery-2.2.0.js"></script>
|
||||
|
||||
<script id="tpl" type="text/html">
|
||||
<h3><%= className %></h3>
|
||||
<ul>
|
||||
<% for(var i = 0; i< students.length;i++) { %>
|
||||
<li><%= i+1 %>. <%= students[i] %></li>
|
||||
<% } %>
|
||||
</ul>
|
||||
|
||||
</script>
|
||||
|
||||
<script>
|
||||
var data = {
|
||||
className:"前端1期",
|
||||
students:["张飞","刘备","诸葛亮","甄姬","小乔","汪汪"]
|
||||
};
|
||||
|
||||
$(function (){
|
||||
var html = template("tpl",data);
|
||||
$("#demo").html(html);
|
||||
})
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="demo">
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
效果：
|
||||
|
||||
20180301_1223.png
|
||||
|
||||
Reference in New Issue
Block a user