webcourse/Webcourse
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

refactor: 目录结构调整

Browse Source
This commit is contained in:
qianguyihao
2020-04-19 18:24:43 +08:00
parent 8e979bff7d
commit 6fbb5659e4
106 changed files with 27 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

941
07-Ajax/01-服务器分类及PHP入门.md Normal file
View File

@@ -0,0 +1,941 @@
## C/S架构和B/S架构
### C/S架构
是Client/Server这两个单词的首字母，指的是客户端，服务器。
优点:
- 性能较高：可以将一部分的计算工作放在客户端上,这样服务器只需要处理数据即可。
- 界面酷炫:客户端可以使用更多系统提供的效果,做出更为炫目的效果。
缺点:
- 更新软件：如果有新的功能，就要推出新的版本。
- 不同设备访问：如果使用其他的电脑，没有安装客户端的话就无法登陆软件。
### B/S架构
是Browser/Server的这两个单词的首字母。指的是浏览器、服务器，是WEB兴起之后的一种架构。
现在所有的网站都是B/S架构，较为常见的例子有百度、知乎、网易云音乐Web等等，只需要通过浏览器即可使用.
优点：
- 更新简洁：如果需要更新内容了,对开发人员而言需要更改服务器的内容，对用户而言只需要刷新浏览器即可。
- 多设备同步：所有数据都在网上,只要能够使用浏览器即可登录使用。
缺点:
- 性能较低：相比于客户端应用性能较低,但是随着硬件性能的提升,这个差距在缩小。
- 浏览器兼容：处理低版本的浏览器显示问题一直是前端开发人员头痛的问题之一。移动设备兼容性较好，ie6已经越来越少人用了。
## 服务器分类
项目开发时，有三套环境：
- Development 开发环境
- Test 测试环境
- Production 生产环境
程序员平时干活儿用开发环境；开发完成后，部署到测试环境；测试完成后，产品上线，部署到生产环境。
三套环境意味着三个服务器。
### 服务器类型
按类型分：
- 文件服务器
- 数据库服务器
- 邮件服务器
- Web 服务器等
按软件分：
- Apache 服务器
- Nginx 服务器
- IIS 服务器
- Tomcat 服务器
- Node 服务器等
按操作系统分：
- Linux服务器
- Windows服务器等
### 服务器软件
提供了某种服务的计算器，我们称之为服务器。那么这些赋予计算器各种服务功能的软件主要有哪一些呢？
常见的服务器软件有：
- 文件服务器：Server-U、FileZilla、VsFTP等；
- 数据库服务器：Oracle、MySQL、PostgreSQL、MSSQL等；
- 邮件服务器：Postfix、Sendmail等；
- HTTP 服务器：Apache（免费、开源）、Nginx、IIS（微软的.net服务器）、Tomcat（java编程的服务器）、NodeJS 等。
## 使用 WampServer 搭建 HTTP服务
### 集成环境的分类
- AMP：Apache + Mysql + PHP。
- WAMP：windows + Apache + Mysql + PHP。
- XAMPP：WAMP 是针对windows的，而 XAMPP 可以安装在Linux、Windows、MacOS、Solaris这些操作系统上面。
在windows平台下，如果想要一步到位安装好这些软件，可是使用软件 **WampServer**。
### WampServer 的安装
去 WampServer 的[官网](http://www.wampserver.com/en/)下载软件。
![](http://img.smyhvae.com/20180227_1936.png)
安装完成后进行安装。
### 测试访问
打开浏览器输入 `127.0.0.1` 查看显示的内容，如果是第一次安装，默认显示的应该是如下图片：
![](http://img.smyhvae.com/20180227_2203.png)
127.0.0.1 是回送地址，指本地机，一般用来测试使用，如果想要让其他电脑也能够访问，需要进行如下配置：
（1）关闭防火墙：
![](http://img.smyhvae.com/20180227_2207.gif)
（2）修改httpd.conf文件：
因为 Apache 的配置默认不允许外部访问，我们需要修改配置。
打开文件`c:\wamp\bin\apache\Apache2.2.21\conf\httpd.conf`，通过搜索功能找到`onlineoffline tag - don't remove`这句话，在第234行的 `Allow from 127.0.0.1`的下面，加一行：`Allow from all`。
然后将第192行的`Deny from all`改为`Allow from all`。
保存，然后重启 wamp 即可。
### 配置网站根目录
网站的根目录默认是在`D:\wamp\www`。如果想修改这个根目录，可以这样改：
打开 Apache的配置文件 `D:\wamp\bin\apache\Apache2.2.21\conf\http.conf`，如果是初次安装，找到178行的`DocumentRoot "d:/wamp/www/"`，以及205行的`<Directory "d:/wamp/www/">`，改这两个位置的路径即可。我们可以通过搜索关键字`documentRoot`来定位。
## 静态网站和动态网站
静态网站：
- 访问的是实实在在保存在服务器上的文件。静态资源包括：html页面、css文件、js文件、图片等。
- 当内容、图片、界面需要更新时，直接修改.html文件。
动态网站：
- 当用户访问网站时，根据`某些逻辑`,动态生成对应的`HTML、CSS、JS`代码给用户（这也就是web服务器开发的本质）。
- 通过某种手段，当有新的消息时，**自动**的完成网站的更新。
总结：
由于静态网站在维护的局限性，所以产生了动态网站。
实现动态网站的技术：php/jsp/.net/python等。
动态网站的原理：浏览器请求动态网站的页面（比如*.php），php拼接数据并动态生成html页面，然后将新生成的页面返回给浏览器
php 之所以被称为最好的语言，是因为：基本上，我们能够想到的功能，它都帮助我们封装成了方法。十分方便。
## PHP的常见语法
**PHP代码执行方式**：
- 在服务器端执行，然后返回给用户结果。如果直接使用浏览器打开，就会解析为文本。
- 意思是说，需要浏览器通过 http请求，才能够执行php页面。
这里只列举常用的PHP语法，更为详细的语法教程可以查阅 [api 文档](http://www.w3school.com.cn/php/index.asp)。
### 第一段 php 代码
将 WampServer 跑起来，在D:\wamp\www下新建一个`1.php`文件，代码如下：
1.php：
```
<?php
echo "hello smyhvae";
?>
```
在浏览器中输入`http://127.0.0.1/2018-02-28/1.php`，效果如下：
![](http://img.smyhvae.com/20180228_0910.png)
**代码的编写位置**：
上方代码中，注意php语言的格式，第一行和第三行的格式中，没有空格。代码的编写位置在`<?php 代码写在这里?>`。
### 注释
php 注释的写法跟 js 一致。
```
<?php
//这是单行注释
/*
这是多行注释
*/
?>
```
### 变量
- 变量以`$`符号开头，其后是变量的名称。大小写敏感。
- 变量名称必须以字母或下划线开头。
举例：
```
$a1;
$_abc;
```
### 数据类型
PHP支持的数据类型包括：
- 字符串
- 整数
- 浮点数
- 布尔
- 数组
- 对象
- NULLL
定义字符串时需要注意：
- 单引号`` ：内部的内容只是作为字符串。
- 双引号"" ：如果内部是PHP的变量,那么会将该变量的值解析。如果内部是html代码，也会解析成html。
说白了，单引号里的内容，一定是字符串。双引号里的内容，可能会进行解析。
```
echo "<input type=`button` value=`smyhvae`>";
```
上面这个语句，就被会解析成按钮。
```
// 字符串
$str = '123';
// 字符串拼接
$str2 = '123'.'哈哈哈';
// 整数
$numA = 1; //正数
$numB = -2;//负数
// 浮点数
$x = 1.1;
// 布尔
$a = true;
$b = false;
// 普通数组：数组中可以放 数字、字符串、布尔值等，不限制类型。
$arr1 = array('123', 123);
echo $arr1[0];
// 关系型数组：类似于json格式
$arr2 = $array(`name`=>`smyhvae`, `age`=>`26`);
echo $arr2[`name`]; //获取时，通过 key 来获取
```
上方代码中注意，php 中字符串拼接的方式是 `.`。要注意哦。
### 运算符
PHP 中的运算符跟 JavaScript 中的基本一致，用法也基本一致。
- 算数运算符：`+`、`-`、`/`、`*`、`%`
- 赋值运算符：`x = y`、`x += y`,`x -= y`等。
举例：
```php
<?php
$x = 10;
$y = 6;
echo ($x + $y); // 输出 16
echo ($x - $y); // 输出 4
echo ($x * $y); // 输出 60
echo ($x / $y); // 输出 1.6666666666667
echo ($x % $y); // 输出 4
?>
```
### 函数的定义
语法格式：
```php
function functionName() {
//这里写代码
}
```
（1）有参数、无返回值的函数：
```php
function sayName($name){
echo $name.'你好哦';
}
// 调用
sayName('smyhvae');
```
（2）有参数、参数有默认值的函数：
```php
function sayFood($food='西兰花'){
echo $food.'好吃';
}
// 调用
sayFood('西葫芦');// 如果传入参数,就使用传入的参数
sayFood();// 如果不传入参数,直接使用默认值
```
（3）有参数、有返回值的函数：
```php
function sum($a,$b){
return $a+$b
}
sum(1,2);// 返回值为1+2 = 3
```
### 类和对象
PHP中允许使用对象这种**自定义**的数据类型。必须先声明，实例化之后才能够使用。
定义最基础的类：
```php
class Fox{
public $name = 'itcast';
public $age = 10;
}
$fox = new $fox;
// 对象属性取值
$name = $fox->name;
// 对象属性赋值
$fox->name = '小狐狸';
```
带构造函数的类：
```php
class fox{
// 私有属性,外部无法访问
var $name = '小狐狸';
// 定义方法 用来获取属性
function Name(){
return $this->name;
}
// 构造函数,可以传入参数
function fox($name){
$this->name = $name
}
}
// 定义了构造函数 需要使用构造函数初始化对象
$fox = new fox('小狐狸');
// 调用对象方法,获取对象名
$foxName = $fox->Name();
```
### 内容输出
- `echo`：输出字符串。
- `print_r()`：输出复杂数据类型。比如数组、对象。
- `var_dump()`：输出详细信息。
```php
$arr =array(1,2,'123');
echo'123';
//结果：123
print_r($arr);
//结果：Array ( [0] => 1 [1] => 2 [2] => 123 )
var_dump($arr);
/* 结果：
array
0 => int 1
1 => int 2
2 => string '123' (length=3)
*/
```
### 循环语句
这里只列举了`foreach`、`for`循环。
for 循环：
```php
for ($x=0; $x<=10; $x++) {
echo "数字是：$x <br>";
}
```
foreach 循环：
```php
$colors = array("red","green","blue","yellow");
foreach ($colors as $value) {
echo "$value <br>";
}
```
上方代码中，参数一：循环的对象。参数二：将对象的值挨个取出，直到最后。
如果循环的是对象，输出的是对象的属性的值。
输出结果：
```bash
red
green
blue
yellow
```
## php中的header()函数
浏览器访问http服务器，接收到响应时，会根据响应**报文头**的内容进行一些具体的操作。在php中，我们可以根据 **header** 来设置这些内容。
**header()函数的作用**：用来向客户端(浏览器)发送报头。直接写在php代码的第一行就行。
下面列举几个常见的 header函数。
（1）设置编码格式：
```php
header('content-type:text/html; charset= utf-8');
```
例如：
```php
<?php
header('content-type:text/html; charset= utf-8');
echo "我的第一段 PHP 脚本";
?>
```
（2）设置页面跳转：
```php
header('location:http://www.baidu.com');
```
设置页面刷新的间隔：
```php
header('refresh:3; url=http://www.xiaomi.com');
```
## php中的 get 请求和 post 请求
### get 请求
可以通过`$_GET`对象来获取。
**举例**：下面是一个简单的表单代码，通过 get 请求将数据提交到01.php。
（1）index.html:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 通过 get 请求，将表单提交到 php 页面中 -->
<form action="01.php" method="get">
<label for="">姓名：
<input type="text" name="userName"></label>
<br/>
<label for="">邮箱：
<input type="text" name="userEmail"></label>
<br/>
<input type="submit" name="">
</form>
</body>
</html>
```
（2）01.php：
```php
<?php
header('content-type:text/html; charset= utf-8');
echo "<h1>php 的get 请求演示</h1>";
echo '用户名：'.$_GET['userName'];
echo '<br/>';
echo '邮箱：'.$_GET['userEmail'];
?>
```
上方代码可以看出，`$_GET`是关系型数组，可以通过 **$_GET[`key`]**获取值。这里的 key 是 form 标签中表单元素的 name 属性的值。
效果：
![](http://img.smyhvae.com/20180228_1140.gif)
### post 请求
可以通过`$_POST`对象来获取。
**举例**：下面是一个简单的表单代码，通过 post 请求将数据提交到02.php。
（1）index.html：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 通过 post 请求，将表单提交到 php 页面中 -->
<form action="02.php" method="post" >
<label for="">姓名：
<input type="text" name= "userName"></label>
<br/>
<label for="">邮箱：
<input type="text" name= "userEmail"></label>
<br/>
<input type="submit" name="">
</form>
</body>
</html>
```
（2）02.php：
```php
<?php
header('content-type:text/html; charset= utf-8');
echo "<h1>php 的 post 请求演示</h1>";
echo '用户名：'.$_POST['userName'];
echo '<br/>';
echo '邮箱：'.$_POST['userEmail'];
?>
```
上方代码可以看出，`$_POST`是关系型数组，可以通过 **$_POST[`key`]**获取值。这里的 key 是 form 标签中表单元素的 name 属性的值。
效果演示：
![](http://img.smyhvae.com/20180228_1145.gif)
实际开发中，可能不会单独写一个php文件，常见的做法是：在 html 文件中嵌入 php 的代码。
比如说，原本 html 中有个 li 标签是存放用户名的：
```html
<li>smyhvae</li>
```
嵌入 php后，用户名就变成了动态获取的：
```php
<li><?php
echo $_POST[`userName`]
?></li>
```
## php 中文件相关的操作
### 文件上传 `$_FILES`
上传文件时，需要在html代码中进行如下设置：
（1）在html表单中，设置`enctype="multipart/form-data"`。该值是必须的。
（2）只能用 post 方式获取。
代码如下：
（1）index.html:
```html
<form action="03-fileUpdate.php" method="post" enctype="multipart/form-data">
<label for="">照片:
<input type="file" name = "picture" multiple=""></label>
<br/>
<input type="submit" name="">
</form>
```
（2）在 php 文件中打印 file 的具体内容：
```php
<?php
sleep(5);// 让服务器休息一会
print_r($_FILES); //打印 file 的具体内容
?>
```
演示效果：
![](http://img.smyhvae.com/20180228_php_post_file.gif)
上方现象可以看出：
- 点击提交后，服务器没有立即出现反应,而是休息了一会`sleep(5)`。
- 在`wamp/tmp`目录下面出现了一个`.tmp`文件。
- .tmp文件一会就被自动删除了。
- 服务器返回的内容中有文件的名字`[name] => computer.png`，以及上传文件保存的位置`D:\wamp\tmp\php3D70.tmp`。服务器返回的内容如下：
```bash
Array ( [upFile] => Array ( [name] => yangyang.jpg [type] => image/jpeg [tmp_name] => D:\wamp\tmp\phpCC56.tmp [error] => 0 [size] => 18145 ) )
```
### 文件保存
我们尝试一下，把上面的例子中的`临时目录`下面的文件保存起来。这里需要用到 php 里的 `move_uploaded_file()`函数。[#](http://www.w3school.com.cn/php/func_filesystem_move_uploaded_file.asp)
格式如下：
```php
move_uploaded_file($_FILES['photo']['tmp_name'], './images/test.jpg');
```
参数解释：参数一：移动的文件。参数二：目标路径。
（1）index.html：（这部分的代码保持不变）
```php
<form action="03.fileUpdate.php" method="post" enctype="multipart/form-data">
<label for="">照片:
<input type="file" name = "picture" multiple=""></label>
<br/>
<input type="submit" name="">
</form>
```
（2）PHP代码：
暂略。
### WampServer 中修改上传文件的大小
（1）打开 WampServer的文件`php.ini`：
![](http://img.smyhvae.com/20180228_1454.png)
（2）修改`php.ini`中的如下内容：
设置文件最大上传限制：（值的大小可以根据需求修改）
```php
file_uploads = On; 是否允许上传文件 On/Off 默认是On
upload_max_filesize = 32M; 设置 上传文件的最大限制
post_max_size = 32M; 设置 通过Post提交的最多数据
```
考虑网络传输快慢：这里修改一些参数：
```php
max_execution_time = 30000 ; 脚本最长的执行时间 单位为秒
max_input_time = 600 ; 接收提交的数据的时间限制 单位为秒
memory_limit = 1024M ; 最大的内存消耗
```
## HTTP 协议
### 请求
客户端发出的请求，主要由三个组成部分：请求行、请求头、请求主体。如下图所示：
20180228_1505.jpg
**1、请求行：**
- 请求方法：GET or POST
- 请求URL
- HTTP协议版本
**2、请求头：**
常见的请求头如下：
```bash
User-Agent：浏览器的具体类型　　如：User-Agent：Mozilla/5.0 (Windows NT 6.1; rv:17.0) Gecko/20100101 Firefox/17.0
Accept：浏览器支持哪些数据类型　　如：Accept: text/html,application/xhtml+xml,application/xml;q=0.9;
Accept-Charset：浏览器采用的是哪种编码　　如：Accept-Charset: ISO-8859-1
Accept-Encoding：浏览器支持解码的数据压缩格式　　如：Accept-Encoding: gzip, deflate
Accept-Language：浏览器的语言环境　　如：Accept-Language zh-cn,zh;q=0.8,en-us;q=0.5,en;q=0.3
Host：请求的主机名，允许多个域名同处一个IP地址，即虚拟主机。Host:www.baidu.com
Connection：表示是否需要持久连接。
属性值可以是Keep-Alive/close，HTTP1.1默认是持久连接，它可以利用持久连接的优点，当页面包含多个元素时（例如Applet，图片），显著地减少下载所需要的时间。
要实现这一点，Servlet需要在应答中发送一个Content-Length头，最简单的实现方法是：先把内容写入ByteArrayOutputStream，然后在正式写出内容之前计算它的大小。如：Connection: Keep-Alive
Content-Length：表示请求消息正文的长度。对于POST请求来说Content-Length必须出现。
Content-Type：WEB服务器告诉浏览器自己响应的对象的类型和字符集。例如：Content-Type: text/html; charset='gb2312'
Content-Encoding：WEB服务器表明自己使用了什么压缩方法（gzip，deflate）压缩响应中的对象。例如：Content-Encoding：gzip
Content-Language：WEB服务器告诉浏览器自己响应的对象的语言。
Cookie：最常用的请求头，浏览器每次都会将cookie发送到服务器上，允许服务器在客户端存储少量数据。
Referer：包含一个URL，用户从该URL代表的页面出发访问当前请求的页面。服务器能知道你是从哪个页面过来的。Referer: http://www.baidu.com/
```
**3、请求体：**
指的是提交给服务器的数据。
需要注意的是，如果是往服务器提交数据，需要在请求头中设置`Content-Type: application/x-www-form-urlencoded`(在ajax中需要手动设置)。
### 响应
响应报文是服务器返回给客户端的。组成部分有响应行、响应头、响应主体。
![](http://img.smyhvae.com/20180228_1510.jpg)
**1、状态行：**
HTTP响应行：主要是设置响应状态等信息。
**2、响应头：**
Cookie、缓存等信息就是在响应头的属性中设置的。
常见的响应头如下：
```bash
Cache-Control
响应输出到客户端后，服务端通过该报文头属告诉客户端如何控制响应内容的缓存。
下面，的设置让客户端对响应内容缓存3600秒，也即在3600秒内，如果客户再次访问该资源，直接从客户端的缓存中返回内容给客户，不要再从服务端获取（当然，这个功能是靠客户端实现的，服务端只是通过这个属性提示客户端“应该这么做”，做不做，还是决定于客户端，如果是自己宣称支持HTTP的客户端，则就应该这样实现）。
Cache-Control: max-age=3600
ETag
一个代表响应服务端资源（如页面）版本的报文头属性，如果某个服务端资源发生变化了，这个ETag就会相应发生变化。它是Cache-Control的有益补充，可以让客户端“更智能”地处理什么时候要从服务端取资源，什么时候可以直接从缓存中返回响应。
ETag: "737060cd8c284d8af7ad3082f209582d"
Location
我们在Asp.net中让页面Redirect到一个某个A页面中，其实是让客户端再发一个请求到A页面，这个需要Redirect到的A页面的URL，其实就是通过响应报文头的Location属性告知客户端的，如下的报文头属性，将使客户端redirect到iteye的首页中：
Location: http://www.google.com.hk
Set-Cookie
服务端可以设置客户端的Cookie，其原理就是通过这个响应报文头属性实现的。
Set-Cookie: UserID=JohnDoe; Max-Age=3600; Version=1
```
**3、HTTP响应体：**
如果请求的是HTML页面，那么返回的就是HTML代码。如果是JS就是JS代码。
### 抓包工具
常见的抓包工具有：Fiddler、Charles。
```php
```
```php
```
```php
```
```php
```

657
07-Ajax/02-Ajax入门和发送http请求.md Normal file
View File

@@ -0,0 +1,657 @@
> 本文最初发表于[博客园](http://www.cnblogs.com/smyhvae/p/8485028.html)，并在[GitHub](https://github.com/qianguyihao/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，一起入门和进阶前端。
> 以下是正文。
## 同步和异步
### 同步和异步的概念
- 同步：必须等待前面的任务完成，才能继续后面的任务。
- 异步：不受当前任务的影响。
拿排队举例：
- 同步：在银行排队时，只有等到你了，才能够去处理业务。
- 异步：在排队的时候，可以玩手机。
### 异步更新网站
我们在访问一个普通的网站时，当浏览器加载完`HTML、CSS、JS`以后，网站的内容就固定了。如果想让网站内容发生更改，就必须**刷新**页面才能够看到更新的内容。
可如果用到**异步更新**，情况就大为改观了。比如，我们在访问新浪微博时，看到一大半了，点击底部的**加载更多**，会自动帮我们加载更多的微博，同时页面并没有刷新。
试想一下，如果没有异步刷新的话，每次点击“加载更多”，网页都要刷新，体验就太不好了。
web前端里的异步更新，就要用到 Ajax。
## Ajax
### Ajax 的概念
在浏览器中，我们可以在不刷新页面的情况下，通过ajax的方式去获取一些新的内容。
Ajax：Asynchronous Javascript And XML（异步 JavaScript 和 XML）。它并不是凭空出现的新技术，而是对于现有技术的结合。Ajax 的核心是 js 对象：**XMLHttpRequest**。
### 发送 Ajax 请求的五个步骤
> 其实也就是 使用 XMLHttpRequest 对象的五个步骤。
我们先回忆一下，一个完整的HTTP请求需要的是：
- 请求的网址、请求方法get/post。
- 提交请求的内容数据、请求主体等。
- 接收响应回来的内容。
发送 Ajax 请求的五个步骤：
（1）创建异步对象。即 XMLHttpRequest 对象。
（2）使用open方法设置请求的参数。open(method, url, async)。参数解释：请求的方法、请求的url、是否异步。
（3）发送请求。
（4）注册事件。 注册onreadystatechange事件，状态改变时就会调用。
如果要在数据完整请求回来的时候才调用，我们需要手动写一些判断的逻辑。
（5）获取返回的数据。
### Ajax 请求：get 请求举例
（1）index.html：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>Ajax 发送 get 请求</h1>
<input type="button" value="发送get_ajax请求" id='btnAjax'>
<script type="text/javascript">
// 绑定点击事件
document.querySelector('#btnAjax').onclick = function () {
// 发送ajax 请求 需要 五步
// （1）创建异步对象
var ajaxObj = new XMLHttpRequest();
// （2）设置请求的参数。包括：请求的方法、请求的url。
ajaxObj.open('get', '02-ajax.php');
// （3）发送请求
ajaxObj.send();
//（4）注册事件。 onreadystatechange事件，状态改变时就会调用。
//如果要在数据完整请求回来的时候才调用，我们需要手动写一些判断的逻辑。
ajaxObj.onreadystatechange = function () {
// 为了保证 数据 完整返回，我们一般会判断 两个值
if (ajaxObj.readyState == 4 && ajaxObj.status == 200) {
// 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的
// 5.在注册的事件中 获取 返回的 内容 并修改页面的显示
console.log('数据返回成功');
// 数据是保存在 异步对象的 属性中
console.log(ajaxObj.responseText);
// 修改页面的显示
document.querySelector('h1').innerHTML = ajaxObj.responseText;
}
}
}
</script>
</body>
</html>
```
（2）02-ajax.php：
```php
<?php
echo 'smyhvae';
?>
```
效果如下：
![](http://img.smyhvae.com/20180228_1605.gif)
### Ajax 请求：post 请求举例
index.html：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>Ajax 发送 get 请求</h1>
<input type="button" value="发送put_ajax请求" id='btnAjax'>
<script type="text/javascript">
// 异步对象
var xhr = new XMLHttpRequest();
// 设置属性
xhr.open('post', '02.post.php');
// 如果想要使用post提交数据,必须添加此行
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// 将数据通过send方法传递
xhr.send('name=fox&age=18');
// 发送并接受返回值
xhr.onreadystatechange = function () {
// 这步为判断服务器是否正确响应
if (xhr.readyState == 4 && xhr.status == 200) {
alert(xhr.responseText);
}
};
</script>
</body>
</html>
```
## XMLHttpRequest 对象详解
我们在上一段讲解了使用 XMLHttpRequest 对象的五个步骤。本段，我们讲一下注意事项。
### 发送请求
发送请求的方法：
```javascript
open(method, url, async);
```
参数解释：
- method：请求的类型；GET 或 POST
- url：文件在服务器上的位置
- async：true（异步）或 false（同步）
另外还有个方法：（仅用于 POST 请求）
```javascript
send(string);
```
### POST请求时注意
如果想让 像form 表单提交数据那样使用POST请求，就需要使用 XMLHttpRequest 对象的 setRequestHeader()方法 来添加 HTTP 头。然后在 send() 方法中添加想要发送的数据：
```javascript
xmlhttp.open("POST","ajax_test.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("name=smyhvae&age=27");
```
### onreadystatechange 事件
注册 onreadystatechange 事件后，每当 readyState 属性改变时，就会调用 onreadystatechange 函数。
readyState：（存有 XMLHttpRequest 的状态。从 0 到 4 发生变化）
- 0: 请求未初始化
- 1: 服务器连接已建立
- 2: 请求已接收
- 3: 请求处理中
- 4: 请求已完成，且响应已就绪
status：
- 200: "OK"。
- 404: 未找到页面。
在 onreadystatechange 事件中，**当 readyState 等于 4，且状态码为200时，表示响应已就绪**。
### 服务器响应的内容
- responseText：获得字符串形式的响应数据。
- responseXML：获得 XML 形式的响应数据。
如果响应的是普通字符串，就使用responseText；如果响应的是XML，使用responseXML。
## Ajax 传输 XML
### XML 语法
XML（Extensible Markup Language）：可扩展标记语言。详细语法可以查看：[#](http://www.w3school.com.cn/xml/index.asp)。
**1、XML声明：**
```xml
<?xml version="1.0" encoding="UTF-8"?>
```
第一行的声明，指定了XML版本(1.0)以及使用的编码。
**2、自定义标签：**
XML中没有默认的标签，所有的标签都是我们自己已定义的。例如：
```xml
<fox></fox>
<name></name>
```
XML中没有单标签，都是双标签。
**3、根节点：**
XML中必须要有一个根节点，所有的子节点都放置在根节点下。例如：
```xml
<root1>
<name></name>
</root1>
```
### XML 解析
因为 XML 就是标签，所以我们可以直接用**解析Dom元素**的方法解析 XML。
**解析过程：**
（1）html 部分：（包含 xml ）
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<person id='personXML'>
<name>fox</name>
<age>18</age>
<skill>小花花</skill>
</person>
</body>
</html>
```
（2）解析 xml：
```html
<script type="text/javascript">
var xmlObj = document.getElementById("personXML");
var name = xmlObj.getElementsByTagName('name')[0].innerHTML;
console.log(name);
</script>
```
### ajax 请求解析xml（举例）
（1）get_xml.php：（里面包含了xml文件）
```php
<?php
// 设置 返回的为 xml
header('content-type:text/xml; charset= utf-8');
// 读取xml文件 并返回
echo file_get_contents('info/star.xml');
?>
```
上方代码解释：
- php 自带了 读取 xml 文件的方法。
- 在 php 中，如果要使用xml传输数据，则需要使用header()设置返回的内容为xml。
（2）get_xml.html：（Ajax 请求，获取并解析xml）
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="button" value="获取XMl数据" id='getXML'>
</body>
</html>
<script type="text/javascript">
document.querySelector('#getXML').onclick = function () {
var ajax = new XMLHttpRequest();
ajax.open('get','get_XMl.php');
ajax.send();
ajax.onreadystatechange = function () {
if (ajax.readyState == 4 && ajax.status==200) {
// 如果 返回的是 xml文件
console.log(ajax.responseText);
// 异步 对象中 有另外一个属性 用来专门获取 xml
// xml对象 在浏览器段 就是一个 document对象
// 解析时 可以直接使用 querySelector 或者 getElementById等等 document对象 有的语法
console.log(ajax.responseXML);
console.log(ajax.responseXML.querySelector('kuzi').innerHTML);
// 下面这个 页面文档对象 如果要获取某个标签
console.log(window.document);
}
}
}
</script>
```
## Ajax 传输 JSON
### JSON 的语法
JSON(JavaScript Object Notation)：是ECMAScript的子集。作用是进行数据的交换。语法更为简洁，网络传输、机器解析都更为迅速。
语法规则：
- 数据在键值对中
- 数据由逗号分隔
- 花括号保存对象
- 方括号保存数组
数据类型：
- 数字（整数或浮点数）
- 字符串（在双引号中）
- 逻辑值（true 或 false）
- 数组（在方括号中）
- 对象（在花括号中）
- null
示例：
```json
// 对象
{
"name":"fox",
"age":"18",
"sex":"true",
"car":null
}
// 数组
[
{
"name":"小小胡",
"age":"1"
},
{
"name":"小二胡",
"age":"2"
}
]
```
### JavaScript中：json 字符串 <--> js 对象
基本上，所有的语言都有**将 json 字符串转化为该语言对象**的语法。
比如在 js中：
- JSON.parse()：将JSON字符串转化为 js 对象。例如：
```javascript
// 将 JSON 字符串格式化为 js 对象
var jsObj = JSON.parse(ajax.responseText);
```
- JSON.stringify()：将 JS 对象转化为JSON字符串。例如：
```javascript
var Obj = {
name: "fox",
age: 18,
skill: "撩妹"
};
console.log(Obj);
// 将 js 对象格式化为 JSON 字符串
var jsonStr = JSON.stringify(Obj);
```
### PHP中：json 字符串 <--> js 对象
- **json_decode()**方法：将`json`字符串转化为变量。
- **json_encode()**方法：将变量转化为`json`字符串。
代码举例：
```php
<?php
header("Content-Type:text/html;charset=utf-8");
// json字符串
$jsonStr = '{"name":"itcast","age":54,"skill":"歌神"}';
// 字符串转化为 php对象
print_r(json_decode($jsonStr));
echo "<br>";
// php数组
$arrayName = array('name' =>'littleFox' ,'age' => 13 );
// php对象 转化为 json字符串
print_r(json_encode($arrayName));
?>
```
输出结果：
```bash
stdClass Object ( [name] => itcast [age] => 54 [skill] => 歌神 )
{"name":"littleFox","age":13}
```
### ajax 请求解析 json（举例）
（1）Person.json:
```json
{
"name":"小强",
"skill":"砍树",
"friend":"老板"
}
```
（2）myJson.php：
```php
<?php
// 读取json文件 并返回即可
echo file_get_contents('info/Person.json');
?>
```
（3）getJson.html：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>获取 json 数据</h1>
<input type="button" value="获取json" id='btnJson'>
</body>
</html>
<script type="text/javascript">
// 获取的是一个 如果要获取多个
// document.querySelectorAll(selector)
document.querySelector("#btnJson").onclick = function () {
var ajax = new XMLHttpRequest();
ajax.open('get','myJson.php');
ajax.send();
ajax.onreadystatechange = function () {
if (ajax.readyState==4&&ajax.status==200) {
// json 字符串 是字符串 所以我们可以 通过 responseText获取
console.log(ajax.responseText);
// 转化为 js对象
var jsObj = JSON.parse(ajax.responseText);
console.log(jsObj);
// 拼接ul s
var str = '';
str+='<ul>';
str+='<li>'+jsObj.name+'</li>';
str+='<li>'+jsObj.skill+'</li>';
str+='<li>'+jsObj.friend+'</li>';
str+='</ul>';
// 设置到界面上
document.body.innerHTML = str;
}
}
}
</script>
```
演示效果：
![](http://img.smyhvae.com/20180228_1740.gif)
## 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：`qianguyihao`）。
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
![](http://img.smyhvae.com/2016040102.jpg)

240
07-Ajax/03-函数封装-Ajax发送http请求（get&post）.md Normal file
View 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

169
07-Ajax/04-同源和跨域.md Normal file
View File

@@ -0,0 +1,169 @@
## 同源和跨域
## 同源
同源策略是浏览器的一种安全策略，所谓同源是指，域名，协议，端口完全相同。
## 跨域问题的解决方案
从我自己的网站访问别人网站的内容，就叫跨域。
![](http://img.smyhvae.com/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
07-Ajax/05-模板引擎.md Normal file
View 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>
```
效果：
![](http://img.smyhvae.com/20180301_1223.png)