数据交互
第一部分数据存储
1、前言
（1）通信协议
（2）HTTP协议
2、cookie
（1）概念
（2）特点
（3）使用
（4）封装
（5）cookie与json
（6）XSS攻击
3、localStorage
（1）概念
（2）优势
（3）局限
（4）使用
4、后台环境的搭建
前言
（1）Apache服务器
（2）webserver
5、PHP
（1）概念（2）作用
（3）输出HTML
（4）变量命名规则
（5）变量数据类型
（6）变量作用域
（7）预定义变量
（8）数组
（9）数组的方法
（10）php与json的常用方法
6、mysql
（1）概念
（2）数据类型
（3）语法
7、PHP连接MySql
（1）连接MySql
（2）PHP操作数据库
第二部分数据交互手段
1、Ajax
（1）概念
（2）优势
（3）使用
（4）封装
（4）依赖调用
2、Promise（1）概念
（2）使用1
（3）使用2
3、跨域
（1）同源策略
（2）Jsonp跨域
（3）服务器端跨域
4、前后端不分离
（1）get与post
（2）post请求
（3）接口文件
5、接口文档编写
（1）接口文档范例
（2）接口
第一部分数据存储
1、前言
（1）通信协议
通信协议是指双方实体完成通信或服务所必须遵循的规则和约定。协议定义了数
据单元使用的格式，信息单元应该包含的信息与含义，连接方式，信息发送和接收的
时序，从而确保网络中数据顺利地传送到确定的地方。
在计算机通信中，通信协议用于实现计算机与网络连接之间的标准，网络如果没
有统一的通信协议，电脑之间的信息传递就无法识别。 通信协议是指通信各方事前
约定的通信规则，可以简单地理解为各计算机之间进行相互会话所使用的共同语言。
两台计算机在进行通信时，必须使用的通信协议。
常见的协议有：TCP/IP协议、HTTP协议等等。
（2）HTTP协议超文本传输协议（HTTP，HyperText Transfer Protocol）是互联网上应用最为
广泛的一种网络协议。所有的WWW文件都必须遵守这个标准。该协议用于从WWW
服务器传输超文本到本地浏览器的传输协议。它可以使浏览器更加高效，使网络传输
减少。它不仅保证计算机正确快速地传输超文本文档，还确定传输文档中的哪一部
分，以及哪部分内容首先显示(如文本先于图形)等。
HTTP协议是一个无状态的通信协议，一旦数据交换完毕，客户端与服务器端的
连接就会关闭，再次交换数据需要建立新的连接。它基于TCP协议的一种高级协议，
用于客户端和服务器直接的通信。http 默认端口号 80 https（secure）协议 默
认端口号443
2、cookie
（1）概念
指某些网站为了辨别用户身份，进行session（会话）跟踪而存储在用户本地终
端上的数据（通常经过加密）。以文本形式存在。
谷歌浏览器存储地址： C:\Users\用户名
\AppData\Local\Google\Chrome\User Data\Default\文件夹下的Cookies文件。
注：cookie 只有在服务器环境下才有用
禁用cookie：改变浏览器的cookie设置。如果浏览器完全禁止cookie功能的
话，大多数网站的基本功能无法正常使用。
（2）特点
chrome和safari没有对cookie的个数做限制，一般浏览器限制同一域名数量为
50个。
cookie文件的总大小一般为4KB（同一个域名）。
只能使用文本文件。
读取有域名限制。 域名 www.baidu.com www.taobao.com so.com
不可跨域读取,只能由来自 写入cookie的 同一域名 的网页可进行读取。 简单的
讲就是,谁写的cookie,谁才有权利读取
时效限制。 每个cookie都有时效,最短的有效期是,会话级别:就是当浏览器关闭,
那么cookie立即销毁。
（3）使用
添加cookie
1 document.cookie="key=value"//键值对的形式
2 document.cookie = 'test1=hello';
3 document.cookie = 'test2=world';
4 //在浏览器中查看一下现在的cookie是什么样子 打开控制台 点击application 就能看
到cookies
5 //注意 document.cookie一次只能写入一个 Cookie，而且写入并不是覆盖，而是添加读取cookie
1 document.cookie
2 document.cookie // "test1=hello; test2=world"
3 //上面代码从document.cookie一次性读出两个 Cookie，它们之间使用 分号空格 分隔。
必须手动还原，才能取出每一个 Cookie 的值。
4 //对cookie数据进行处理
5 var cookies = document.cookie.split('; ');
6 for (var i = 0; i < cookies.length; i++) {
7 console.log(cookies[i]);
8 }
9 // foo=bar// baz=bar
修改cookie
1 document.cookie = 'test2=hah';
2 document.cookie // "test1=hello; test2=hah"
失效时间
1 //expires ，没有设置失效时间的cookie 在浏览器关闭以后就会自动删除，如果设置了失
效时候在未来的时间，就可以让cookie保存的时间长一点
2 //设置失效时间格式：document.cookie = “key=value;expires=”+ oDate;
3 var oDate = new Date();//电脑当前的时间
4 oDate.setDate(oDate.getDate() + 7);
5 document.cookie = “key=value;expires=”+ oDate;
6 //上面代码设置cookie的过期时间为7天以后
删除cookie
1 //将cookie的值覆盖为空，并将失效时间设置为过去的时间
2 var oDate = new Date();
3 oDate.setDate(oDate.getDate() ‐7);
4 document.cookie = “test=;expires=”+ oDate;
5 //将cookie的过期时间设置为 7天前，test 这个cookie 就获取不到了
设置域名domain设置路径path
1 //设置域名：document.cookie = “key=value;domain=www.baidu.com“;
2 //注：必须在绑定域名的服务器才可以设置域名，上不同服务器之间的cookie文件不能共
享。
3 //设置路径：path
4 //设置路径： document.cookie = “key=value;path=/“;
5 //注：在同一路径下的网页可以共享cookie，路径不同时，不可以访问。
6 document.cookie = “key=value;path=/“;//设置cookie的路径为跟路径，这样我们网
站下的所有页面可以共享cookie
中文的处理
1 //如果有中文内容，需要用encodeURIComponent(‘xxxx’)进行编码，再使用decodeURICo
mponent(‘xxxx’)进行解码，解决中文乱码的问题。（4）封装
1 let Cookie = {}
2 ;(function(){
3 console.log(1)
4 function setCookie({
5 key,
6 value,
7 day,
8 path = '/'
9 }) {
10 console.log(key, value)
11 if (day) {
12 let d = new Date()
13 d.setDate(d.getDate() + day)
14 document.cookie = `${key}=${value};expires=${d};path=${path}`
15 } else {
16 console.log(`${key}=${value}`)
17 document.cookie = `${key}=${value};path=${path}`
18 }
19 }
20 function removeCookie({
21 key,
22 path = '/'
23 }) {
24 console.log({
25 key,
26 path,
27 day: ‐7
28 })
29 setCookie({
30 key,
31 path,
32 day: ‐7
33 })
34 }
35 // removeCookie({key:'age'})
36 function getCookie({
37 key
38 }) {
39 //abc=你好; age=18; name=aaa40 console.log(document.cookie)
41 let arr = document.cookie.split('; ')
42 for (let i = 0; i < arr.length; i++) {
43 let tmpArr = arr[i].split('=')
44 if (tmpArr[0] == key) {
45 return tmpArr[1]
46 }
47 }
48 return null
49 }
50 Cookie.setCookie = setCookie
51 Cookie.getCookie = getCookie
52 Cookie.removeCookie = removeCookie
53 })();
54 // Math.random()
55 // random()
56 console.log(Cookie)
57 Cookie.getCookie({key:'age'})
（5）cookie与json
JSON 格式（JavaScript Object Notation 的缩写）是一种用于数据交换的文本
格式，2001年由 Douglas Crockford 提出，目的是取代繁琐笨重的 XML 格式。
相比 XML 格式，JSON 格式有两个显著的优点：书写简单，一目了然；符合
JavaScript 原生语法，可以由解释引擎直接处理，不用另外添加解析代码。所以，
JSON 迅速被接受，已经成为各大网站交换数据的标准格式，并被写入标准。
每个 JSON 对象就是一个值，可能是一个数组或对象
JSON 对值的类型和格式有严格的规定
1. json的值只能是数组或对象，不能是函数、正则表达式对象、日期对象。
2. 字符串必须使用双引号表示，不能使用单引号。
3. 对象的键名必须放在双引号里面。
4. 数组或对象最后一个成员的后面，不能加逗号。
以下都是合法的 JSON。
1 以下都是合法的 JSON。
2 ["one", "two", "three"]
3 { "one": 1, "two": 2, "three": 3 }
4 {"names": ["张三", "李四"] }
5 [ { "name": "张三"}, {"name": "李四"} ]
以下都是不合法的 JSON。
1 { name: "张三", 'age': 32 } // 属性名必须使用双引号2 [32, 64, 128, 0xFFF] // 不能使用十六进制值
3 { "name": "张三", "age": undefined } // 不能使用 undefined
4 { "name": "张三",
5 "birthday": new Date('Fri, 26 Aug 2011 07:13:10 GMT'),
6 "getName": function () {
7 return this.name;
8 }} // 属性值不能使用函数和日期对象
stringify方法---将json对象转为字符串 存入cookie。
1 //将json对象转换成字符串
2 JSON.stringify([1, 1])// '[1,1]'
3 JSON.stringify({ name: "张三" })// '{"name":"张三"}'
parse将json字符串转成对象。
1 JSON.parse('{}') // {}
2 JSON.parse('[1, 5]') // [1, 5]
3 var o = JSON.parse('{"name": "张三"}');
4 o.name // 张三
（6）XSS攻击
跨站脚本攻击(Cross Site Scripting)，为不和层叠样式表(Cascading Style
Sheets, CSS)的缩写混淆，故将跨站脚本攻击缩写为XSS。恶意攻击者往Web页面里
插入恶意Script代码，当用户浏览该页之时，嵌入其中Web里面的Script代码会被执
行，从而达到恶意攻击用户的目的。
跨站脚本攻击的核心在于脚本的成功注入，并二次展示。通常服务器端都会对文
本内容进行安全性的过滤。
3、localStorage
（1）概念
HTML5新特性，用来作为本地存储使用。
解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)。
localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会
有所不同。
（2）优势
localStorage拓展了cookie的4K限制
localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的
针对于前端页面的数据库，相比于cookie可以节约带宽，但是这个却是只有在高版本的浏
览器中才支持的。
（3）局限
浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性。目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日
常比较常见的JSON对象类型需要一些转换。
（4）使用
数据写入
1 var storage=window.localStorage;
2 //写入a字段
3 storage["a"]=1;
4 //写入b字段
5 storage.a=1;
6 //写入c字段
7 storage.setItem("c",3);
数据读取
1 //第一种方法读取
2 var a=storage.a;
3 console.log(a);
4 //第二种方法读取
5 var b=storage["b"];
6 console.log(b);
7 //第三种方法读取
8 var c=storage.getItem("c");
9 console.log(c)
数据修改
1 var storage=window.localStorage;
2 //写入a字段
3 storage["a"]=1;
4 storage.a=4; //修改
5 console.log(storage.a)
数据删除
1 storage.setItem("c",3);
2 console.log(storage);
3 storage.removeItem("a");
清空localStorage
1 storage.clear();
注意事项
1. 一般我们会将JSON(js中的对象)存入localStorage中，但是在localStorage会自动
将localStorage转换成为字符串形式
2. 这个时候我们可以使用JSON.stringify()这个方法，来将JSON转换成为JSON字符
串1 var data={
2 name:'zhangsan',
3 sex:'man',
4 };
5 var d=JSON.stringify(data);
6 storage.setItem("data",d);
7 //将JSON字符串转换成为JSON对象输出
8 var json=storage.getItem("data");
9 var jsonObj=JSON.parse(json);
4、后台环境的搭建
前言
目前我们的计算机中有两个web服务器（hbuilder自带的web服务一个是wamp
中的apache）其中自带的web服务访问地址：127.0.0.1：8020，wamp提供的web
服务地址：localhost
自带的web服务不具有解析php的能力
--LAMP（linux+apache+mysql+php）
--WAMP（window+apache+mysql+php）
（1）Apache服务器
Apache HTTP Server（简称APache）是Apache软件基金会的一个开放源码的
网页服务器
apache是世界使用排名第一的Web服务器软件。它可以运行在几乎所有广泛使
用的计算机平台上，由于其跨平台和安全性被广泛使用，是最流行的Web服务器端
软件之一。它快速、可靠并且可通过简单的API扩充，将Perl/Python等解释器编译
到服务器中。同时Apache音译为阿帕奇。
Apache的诞生极富有戏剧性。当NCSAWWW服务器项目停顿后，那些使用
NCSAWWW服务器的人们开始交换他们用于该服务器的补丁程序，他们也很快认识
到成立管理这些补丁程序的论坛是必要的。就这样，诞生了Apache Group，后来这
个团体在NCSA的基础上创建了Apache。
（2）webserver
Web Server中文名称叫网页服务器或web服务器。WEB服务器也称为
WWW(WORLD WIDE WEB)服务器，主要功能是提供网上信息浏览服务
Web服务器可以解析(handles)HTTP协议。当Web服务器接收到一个HTTP请求
(request)，会返回一个HTTP响应(response)，例如送回一个HTML页面。为了处理
一个请求(request)，Web服务器可以响应(response)一个静态页面或图片，进行页
面跳转(redirect)，或者把动态响应(dynamic response)的产生委托(delegate)给一
些其它的程序例如CGI脚本，JSP(JavaServer Pages)脚本，servlets，ASP(ActiveServer Pages)脚本，服务器端(server-side)JavaScript，或者一些其它的服务器端技
术。无论它们(译者注：脚本)的目的如何，这些服务器端的程序通常产生一个HTML
的响应(response)来让浏览器可以浏览，通俗的讲，当你在浏览器输入一个网址的时
候，就发起了一个http请求，请求某一个服务器，然后服务器 上的程序（服务端）
决定给你什么网页
5、PHP
（1）概念
PHP 是 "PHP Hypertext Preprocessor" 的首字母缩略词，是一种创建动态交
互性站点的强有力的服务器端脚本语言。PHP 是免费的，并且使用广泛。对于像微
软 ASP 这样的竞争者来说，PHP 无疑是另一种高效率的选项。
（2）作用
PHP 能够生成动态页面内容
PHP 能够创建、打开、读取、写入、删除以及关闭服务器上的文件
PHP 能够接收表单数据
PHP 能够发送并取回 cookies
PHP 能够添加、删除、修改数据库中的数据
PHP 能够限制用户访问网站中的某些页面
PHP 能够对数据进行加密
（3）输出HTML
不带格式的HTML
带格式的HTML
使用定界符表示HTML（<<<EOD(...HTML代码...)EOD）
把PHP切入HTML
PHP注释：单行注释（//或者#）与多行注释（/**/）
（4）变量命名规则
变量以 $ 符号开头，其后是变量的名称
变量名称必须以字母或下划线开头
变量名称不能以数字开头
变量名称只能包含字母数字字符和下划线（A-z、0-9 以及 _）
变量名称对大小写敏感（$y 与 $Y 是两个不同的变量）
php没有创建变量的命令，变量在赋值时被创建
（5）变量数据类型
布尔值：true true var_dump()
整型integer
浮点型flaot字符串string
数组array
对象object（php通过定义类声明变量）
测试php类型---var_dump(变量)
echo只能接受字符串类型
php根据变量的值，自动将变量转换为正确的数据类型
（6）变量作用域
php变量可以在脚本的任意位置进行声明。
三种作用域
1. 全局作用域（global）
1 index.php文件
2 <!DOCTYPE html>
3 <html>
4 <head>
5 <meta charset="UTF‐8">
6 <title></title>
7 </head>
8 <body>
9 <?php
10 $x=5; // 全局作用域
11
12 function myTest() {
13 $y=10; // 局部作用域
14 global $x;
15 echo "<p>测试函数内部的变量：</p>";
16 echo "变量 x 是：$x";
17 echo "<br>";
18 echo "变量 y 是：$y";
19 }
20 myTest();
21 echo "<p>测试函数之外的变量：</p>";
22 echo "变量 x 是：$x";
23 echo "<br>";
24 echo "变量 y 是：$y";
25 ?>
26 </body>
27 </html>
重写全局变量1 <?php
2 $x=5;
3 $y=10;
4 function myTest() {
5 $GLOBALS['y']=$GLOBALS['x']+$GLOBALS['y'];
6 }
7 myTest();
8 echo $y; // 输出 15
9 ?>
2. 局部作用域（local）
3. 静态（static）
函数完成或执行后，会删除所有变量。不过，有时我需要不删除某个局部变量。
实现这一点需要进一步工作。要完成这一点需要在声明变量时使用static关键字。每
次函数调用时，所存储的信息都是函数最后一次被调用时所包含的信息。---该变量
依然是函数的局部变量
1 <?php
2 function myTest() {
3 static $x=0;
4 echo $x;
5 $x++;
6 }
7 myTest();
8 myTest();
9 myTest();
10 ?>
（7）预定义变量
服务器变量$_SERVER,保存头信息，路径，脚本位置等的数组
Cookie变量$_COOKIE，保存cookie值的数组
HTTP GET变量$_GET，保存url请求和表单get提交的变量的数组
HTTP POST变量$_POST，保存post方法生成的变量的数组
Request变量$_REQUEST
PHP的变量大小写敏感，而用户定义的大小写不敏感
（8）数组
数组的创建
不带索引的数组
带索引的数组
二维数组使用变量创建数组compact() $a = “aaa”;$b = “bbb”; $c=array(1,2);
compact(“a”,”b”,”c”);“a”,”b”,”c”在结果中对应key值
使用两个数组创建一个数组 $a=array(1,2,3);$b=array(“a”,”b”,”c”);
array_combine($a,$b);$a的值为key，$b的值为value
建立指定范围单元的数组range(start,end,step)
（9）数组的方法
in_array($val,$arr) 判断数组中是否包含某个值，返回布尔值
取得键名和键值 array_keys($arr) array_values($arr)
移除数组中重复的值,返回去重之后的数组 array_unique($arr)
list($a,$b) = $arr;把数组中的值赋给指定的变量
foreach($arr as $val) 遍历数组
计算数组的长度 count($arr)
添加删除 array_push($arr,1,2) array_pop($arr)
统计数组中所有的值出现的次数array_count_values($arr)
（10）php与json的常用方法
isset($a)判断一个变量是否定义
json_encode($val) 用于对变量进行 JSON 编码，该函数如果执行成功返回
JSON 数据，否则返回 FALSE。
json_encode($students,JSON_UNESCAPED_UNICODE)
json_decode($val,true) 函数用于对 JSON 格式的字符串进行解码，并转换为
PHP 变量。
True表示转换成数组，false转换成对象。
6、mysql
（1）概念
数据库（Database）是按照数据结构来组织、存储和管理数据的仓库，每个数
据库都有一个或多个不同的API用于创建，访问，管理，搜索和复制所保存的数据。
我们也可以将数据存储在文件中读写数据速度相对较慢。所以，现在我们使用关系型
数据库管理系统（RDBMS）来存储和管理的大数据量。所谓的关系型数据库，是建
立在关系模型基础上的数据库，借助于集合代数等数学概念和方法来处理数据库中的
数据。
MySQL是一个关系型数据库管理系统，由瑞典MySQL AB公司开发，目前属于
Oracle公司。MySQL是一种关联数据库管理系统，关联数据库将数据保存在不同的
表中，而不是将所有数据放在一个大仓库内，这样就增加了速度并提高了灵活性。
数据库：数据库是一些关联表的集合
数据表：表是数据的矩阵。在一个数据库中的表看起来像一个简单的电子表格主键：主键是唯一的。一个数据表中只能包含一个主键。你可以用主键来查询数
据。
（2）数据类型
mysql支持多种类型，大致可以分为三类：数值、日期/时间和字符串（字符）
类型。
数值类型：INT或INTEGER 大整数值；decimal 类型可以精确地表示非常大或
非常精确的小数 ，用于定义货币要求精确度高的数据
字符串类型：VARCHAR 变长字符串
日期和时间类型：DATETIME 混合日期和时间值 格式 YYYY-MM-DD
HH:MM:SS
（3）语法
查找数据
1 SELECT
2 student.id,
3 student.username,
4 student.time,
5 student.money
6 FROM
7 student
8 WHERE
9 student.id = 1 Limit 10
10 //相当于
11 SELECT * FROM student WHERE student.id > 1 Limit 10
插入数据
1 INSERT INTO student (username, time, money) VALUES ('赵云', '2018‐05‐15 2
3:53:52', '44');
修改
1 UPDATE student SET username='韩信' WHERE (id='10')
删除
1 DELETE FROM student WHERE (id='4')
7、PHP连接MySql
（1）连接MySql
1 $dbhost = 'localhost:3306'; // mysql服务器主机地址
2 $dbuser = 'root'; // mysql用户名
3 $dbpass = ''; // mysql用户名密码
4 $conn = mysqli_connect($dbhost, $dbuser, $dbpass);
5 if($conn )6 {
7 echo '数据库连接成功！';
8 }
9 ?>
（2）PHP操作数据库
插入数据
1 <?php
2 $dbhost = 'localhost:3306'; // mysql服务器主机地址
3 $dbuser = 'root'; // mysql用户名
4 $dbpass = ''; // mysql用户名密码
5 $conn = mysqli_connect($dbhost, $dbuser, $dbpass);
6 if(! $conn )
7 {
8 die('连接失败: ' . mysqli_error($conn));
9 }
10 echo '连接成功<br />';
11 // 设置编码，防止中文乱码
12 mysqli_query($conn , "set names utf8");
13
14 $username = '鲁班七号';
15 $money = '250';
16 $time = '2018‐03‐06';
17 //注意这里在字符串内部也可以写变量
18 $sql = "INSERT INTO student ".
19 "(username,money, time) ".
20 "VALUES ".
21 "('$username','$money','$time')";
22
23 mysqli_select_db( $conn, 'db1' );
24 $retval = mysqli_query( $conn, $sql );
25 if(! $retval )
26 {
27 die('无法插入数据: ' . mysqli_error($conn));
28 }
29 echo "数据插入成功\n";
30 mysqli_close($conn);
31 ?>
修改数据库数据
1 <?php
2 $dbhost = 'localhost:3306'; // mysql服务器主机地址3 $dbuser = 'root'; // mysql用户名
4 $dbpass = ''; // mysql用户名密码
5 $conn = mysqli_connect($dbhost, $dbuser, $dbpass);
6 if(! $conn )
7 {
8 die('连接失败: ' . mysqli_error($conn));
9 }
10 echo '连接成功<br />';
11 // 设置编码，防止中文乱码
12 mysqli_query($conn , "set names utf8");
13 $sql = "UPDATE student SET username='韩信33' WHERE (id='10')";
14 mysqli_select_db( $conn, 'db1' );
15 $retval = mysqli_query( $conn, $sql );
16 if(! $retval )
17 {
18 die('无法更改数据: ' . mysqli_error($conn));
19 }
20 echo "数据更新成功\n";
21 mysqli_close($conn);
22 ?>
删除数据库数据
1 <?php
2 $dbhost = 'localhost:3306'; // mysql服务器主机地址
3 $dbuser = 'root'; // mysql用户名
4 $dbpass = ''; // mysql用户名密码
5 $conn = mysqli_connect($dbhost, $dbuser, $dbpass);
6 if(! $conn )
7 {
8 die('连接失败: ' . mysqli_error($conn));
9 }
10 echo '连接成功<br />';
11 // 设置编码，防止中文乱码
12 mysqli_query($conn , "set names utf8");
13 $sql = "DELETE FROM student WHERE (id='6')";
14
15 mysqli_select_db( $conn, 'db1' );
16 $retval = mysqli_query( $conn, $sql );
17 if(! $retval )
18 {
19 die('无法删除数据: ' . mysqli_error($conn));20 }
21 echo '数据删除成功！';
22 mysqli_close($conn);
23 ?>
第二部分数据交互手段
1、Ajax
（1）概念
全称：Asynchronous(异步) Javascript And Xml。前端经常需要使用后端提供
的接口获取数据，怎么向服务器请求数据呢，就是使用ajax
AJAX不是一种新的编程语言，而是一种用于创建更快更好以及交互性更强的
WEB应用程序技术，该技术在98年前后得到了应用。
通过AJAX，你的JS可以通过JS的XMLHttpRequest对象在页面不重载的情况下
与服务器直接进行通信。这样可以在服务器请求到想要的数据，而不是整个页面。
AJAX的核心就是JS的XMLHttpRequest对象。xhr对象是在IE5中首次引入，它是一
种支持异步请求的对象。
（2）优势
无刷新更新数据。（局部刷新）
异步与服务器通信。（不让界面卡顿）
基于标准被广泛支持。
界面与应用分离。（前后端分离）
节省带宽
（3）使用
所有现代浏览器(IE7+，chrome，firefox，opera，safari)均内建XMLHttpRequest
对象。但是IE5、6使用ActiveXObject对象
1. 第一步创建XMLHttpRequest对象
1 var xhr = null;
2 xhr = new XMLHttpRequest();
2. 第二步打开服务器的连接
1 // url（接口）
2 var url = 'https://api.readhub.me/topic?lastCursor=40462&pageSize=20'
3 xhr.open('GET', url);
3. 第三步发送请求
1 //发送
2 xhr.send(null)
4. 第四步回调函数1 //xhr.onload 回调函数是在异步请求加载完成后所执行的函数,当JavaScript 监测到请
求的数据全部传输完成后就会触发该函数
2 //指定回调函数，请求成功（回调）调用这个函数
3 xhr.onload= function() {
4 if(xhr.status == 200) {
5 //请求成功
6 //console.log(xhr.responseText)
7 var obj = JSON.parse(xhr.responseText)
8 console.log(obj)
9 }
10 }
5. 综合代码
1 //发起 ajax
2 //1.创建xmlhttprequest 对象
3 var xhr = null;
4 if(window.ActiveXObject) {
5 xhr = new ActiveXObject(’Microsoft.XMLHTTP’);
6 } else if(window.XMLHttpRequest) {
7 xhr = new XMLHttpRequest();
8 }
9 //2. 打开链接 请求方式get
10 // url（接口）
11 var url = 'https://api.readhub.me/topic?lastCursor=40462&pageSize=20'
12 xhr.open('GET', url);
13 //3.发送
14 xhr.send(null);
15 //4.指定回调函数，请求成功（回调）调用这个函数
16 xhr.onload= function() {
17 if(xhr.status == 200) {
18 //请求成功
19 //console.log(xhr.responseText)
20 var obj = JSON.parse(xhr.responseText)
21 console.log(obj)
22 }
23 }
（4）封装
1 let zxios = {}
2 zxios.get = function(url){
3 let p = new Promise(function(resolve,reject){
4 let xhr = new XMLHttpRequest()5 xhr.open('get',url)
6 xhr.send(null)
7 xhr.onload = function(){
8 if(xhr.status==200){
9 let jsonStr= xhr.responseText
10 let obj = JSON.parse(jsonStr)
11 resolve(obj)
12 }else{
13 reject(xhr.status)
14 }
15 }
16 })
17 return p
18 }
19 //使用方法
20 // zxios
21 // .get(url)
22 // .then(function(){
23 // })
24 // .catch(function(){
25 // })
26
（4）依赖调用
Ajax请求需要顺序，如何设置呢？
1 //登录
2 ajax(loginAPi,function(obj){
3 console.log(obj)
4 //获取用户信息
5 ajax(getUserInfoAPi,function(obj1){
6 console.log(obj1)
7 })
8 });
2、Promise
（1）概念
异步编程的一种解决方案，比传统解决方案（回调函数和事件）更合理强大。它
由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了
Promise对象
ES6 规定，Promise对象是一个构造函数，用来生成Promise实例。（2）使用1
1 const promise = new Promise(function(resolve, reject) {
2 // ... some code 这里写异步操作代码
3 ajax(api1,function(res){
4 // 异步操作成功,请求数据成功
5 resolve(value);//将promise设置为resolved（完成状态）
6 },function(error){
7 // 异步操作失败,请求数据失败
8 reject(error);////将promise设置为rejected （失败状态）
9 })
10 });
11 //resolve函数的作用是 在异步操作成功时调用，并将异步操作的结果，作为参数传递出
去；
12 //reject函数的作用是 在异步操作失败时调用，并将异步操作报出的错误，作为参数传递
出去
13 //Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调
函数
（3）使用2
then方法可以接受两个回调函数作为参数。第一个回调函数是Promise对象的状
态变为resolved时调用，第二个回调函数是Promise对象的状态变为rejected时调
用。其中，第二个函数是可选的，不一定要提供。这两个函数都接受Promise对象传
出的值作为参数。
1 promise.then(function(value) {
2 // success
3 ajax(api2,function(res){
4
5 })
6 }).catch(function(error){
7 //error
8 })
9 //在success 里面我们可以发起第二个请求使ajax请求有顺序
10 //new Promise(ajax1).then(ajax2).catch() ，使用了链式调用代替了嵌套结构，这
样就避免了层层嵌套使的代码可读性太差！
3、跨域
（1）同源策略
1. 概念
同源策略是一种约定，只有在本网站的网页上才能使用本网站的接口。
所谓同源：是指协议、域名、端口都相同
（2）Jsonp跨域1. 由来
同源策略的限制，使得他们要想想方设法要跨域！即域名不同，别人也能使用你
们的接口！这个技术就是jsonp跨域，JSONP = JSON WITH PADDING，就是把
json数据装在内部。
2. 原理
我们发现凡是拥有src这个属性的标签都拥有跨域的能力，如img，script。那我
们就可以把数据装载到JS文件内，供客户端调用和进一步处理。
3. 使用
1 /定义回调函数
2 window.fn = function(res) {
3 }
4 //创建script标签
5 var sc = document.createElement('script')
6 sc.src = api;
7 document.body.appendChild(sc)；
（3）服务器端跨域
CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。
它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用
的限制。
CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能
低于IE10。整个CORS通信过程，都是浏览器自动完成，不需要用户参与!
4、前后端不分离
（1）get与post
方式名称 数据位置 数据大小 安全性
get 数据附在url之后，存放在HTTP
协议头中
传送数据量较小，最大
2kb，受浏览器限制 安全性较低
post 数据存放在HTTP包体中
传送数据量大，一般不
受限制，一般受浏览器
限制
安全性较高
（2）post请求
1 //发起 ajax
2 //1.创建xmlhttprequest 对象
3 var xhr = new XMLHttpRequest();
4 //2. 打开链接 请求方式 post
5 var url = 'http://127.0.0.1/bk/mysql‐api‐username.php'
6 xhr.open('POST', url);
7 //3.发送8 //post 模拟表单的 需要增加请求头
9 xhr.setRequestHeader('Content‐Type', 'application/x‐www‐form‐urlencoded')
10 //get 请求 参数在url中
11 //post 请求参数 body中
12 //post参数如下形式
13 //lastCursor=40462&pageSize=20
14 var pa = 'username=张三';
15 xhr.send(pa);//设置请求体的内容
16 //指定回调函数，请求成功（回调）调用这个函数
17 //请求耗时操作
18 xhr.onreadystatechange = function() {
19 console.log(111, xhr.readyState)
20 if(xhr.status == 200) {
21 //请求成功
22 //console.log(xhr.responseText)
23 var obj = JSON.parse(xhr.responseText)
24 console.log(obj)
25 }
26 }
（3）接口文件
1 接口文件如下
2 mysql‐api‐username.php
3 <?php
4 header('Access‐Control‐Allow‐Origin:*');
5 //只需要在服务器上设置一句话，就可让接口支持服务器跨域
6 $dbhost = 'localhost:3306'; // mysql服务器主机地址
7 $dbuser = 'root'; // mysql用户名
8 $dbpass = ''; // mysql用户名密码
9 $conn = mysqli_connect($dbhost, $dbuser, $dbpass);
10 if(! $conn )
11 {
12 die('连接失败: ' . mysqli_error($conn));
13 }
14 // 设置编码，防止中文乱码
15 mysqli_query($conn , "set names utf8");
16 $findUsername =$_REQUEST['username'];
17 //$findUsername = '张三22';
18 //编写sql语句
19 $sql = "SELECT * FROM student WHERE
student.username='$findUsername'";20 //选择要查询的数据库名称
21 mysqli_select_db( $conn, 'db1' );
22 //查询数据
23 $retval = mysqli_query( $conn, $sql );
24 if(! $retval )
25 {
26 die('无法读取数据: ' . mysqli_error($conn));
27 }
28 //echo json_encode(mysqli_fetch_all($retval,MYSQLI_ASSOC));
29 // 把 所有的查询结果转为数组
30 $res = mysqli_fetch_all($retval,MYSQLI_ASSOC);
31 if(count($res)){
32 $arr['isExist'] = true;
33 }else{
34 $arr['isExist'] = false;
35 }
36 //返回json数据
37 echo json_encode($arr);
38 mysqli_close($conn);
39 ?>
5、接口文档编写
（1）接口文档范例
1 接口地址：http://127.0.0.1/mysql‐api‐username.php
2 接口功能：检测用户名是否存在
3 接口类型：get请求
4 接口参数：
5 参数 是否必选 参数说明
6 username y 用户名
7 接口请求示例：http://127.0.0.1/mysql‐api‐username.php?username=张三
8 返回json数据：
9 {
10 "isExist":false//表示是否存在用户
11 }
（2）接口
php接口
1 <?php
2 $dbhost = 'localhost:3306'; // mysql服务器主机地址
3 $dbuser = 'root'; // mysql用户名
4 $dbpass = ''; // mysql用户名密码5 $conn = mysqli_connect($dbhost, $dbuser, $dbpass);
6 if(! $conn )
7 {
8 die('连接失败: ' . mysqli_error($conn));
9 }
10 // 设置编码，防止中文乱码
11 mysqli_query($conn , "set names utf8");
12 $findUsername =$_GET['username'];
13 //$findUsername = '张三22';
14 //编写sql语句
15 $sql = "SELECT * FROM student WHERE
student.username='$findUsername'";
16 //选择要查询的数据库名称
17 mysqli_select_db( $conn, 'db1' );
18 //查询数据
19 $retval = mysqli_query( $conn, $sql );
20 if(! $retval )
21 {
22 die('无法读取数据: ' . mysqli_error($conn));
23 }
24 //echo json_encode(mysqli_fetch_all($retval,MYSQLI_ASSOC));
25 // 把 所有的查询结果转为数组
26 $res = mysqli_fetch_all($retval,MYSQLI_ASSOC);
27 if(count($res)){
28 $arr['isExist'] = true;
29 }else{
30 $arr['isExist'] = false;
31 }
32 //返回json数据
33 echo json_encode($arr);
34 mysqli_close($conn);
35 ?>
第三部分继承
1、闭包
（1）概念
闭包就是能够读取其他函数内部变量的函数。在JS中，只有函数内部的子函数才
能读取局部变量，因此可以把闭包简单理解为”定义在一个函数内部的函数”。
（2）特点可以读取函数内部的变量。
变量的作用域无非就是两种：全局变量和局部变量。
JS语言的特殊之处，就在于函数内部可以直接读取全局变量。另一方面，函数外部自然
无法读取函数内的局部变量
让这些变量的值始终保存在内存中。
（3）闭包的应用场景
函数作为返回值。
1 function box() {
2
3 var n = 1; //
4 function cox() {
5 n++;
6 return n;
7 }
8 return cox;
9 }
10 //res 就是一个闭包 ，n像是一个全局变量
11 var res = box();
12
13 console.log(res()); //2
14 console.log(res()); //3
函数作为参数被传参----回调函数
2、继承
（1）构造函数继承
本质是在子类中调用父类的构造函数，从而让子类拥有父类的属性和方法
call/applay
原型
原型链继承
混合继承