浅谈初级前端攻城狮应该知道的后端知识3：-原创手记-慕课网

浅谈初级前端攻城狮应该知道的后端知识3：

1.使用XHR发起两种请求之一——GET

//1 var xhr = new XMLHttpRequest();
//2 xhr.onreadystatechange = function(){}
//3 xhr.open('GET', 'x.php?k=v&k=v', true)
//4 xhr.send(null);

2.使用XHR发起两种请求之二——POST

//1 var xhr = new XMLHttpRequest();
//2 xhr.onreadystatechange = function(){}
//3 xhr.open('POST', 'x.php', true)
//3.5 xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
//4 xhr.send('k=v&k=v')

3.使用XHR接收五种响应(1)——text/plain

  服务器端：
    header('Content-Type: text/plain');
    echo 'succ'; 
  客户端：
    if( xhr.responseText==='succ'){ ... }

4.使用XHR接收五种响应(2)——text/html

注意：AJAX应用中服务器返回的不是完整的HTML文档，而只是HTMP标签组成的片段

  服务器端：
    header(' Content-Type: text/html;charset=UTF-8  ');
    echo '<li>xx</li><li>yy</li>';
  客户端：
    ul.innerHTML = xhr.responseText;

扩展SQL语句——如何进行模糊查询
SELECT * FROM book WHERE bname='指南'; //精准匹配
SELECT * FROM book WHERE bname LIKE '指南'; //精准匹配
SELECT * FROM book WHERE bname LIKE '%指南%'; //%匹配任意多个任意字符——模糊匹配

5.使用XHR接收五种响应(3)——application/javascript

  注意：JavaScript代码在PHP解释器看来就是普通的字符串而已；
  服务器端：
    header(' Content-Type: application/javascript');
    echo 'alert(123);document.body.appendChild(...)';
  客户端：
    eval( xhr.responseText ) //客户端必须使用eval来执行JS字符串

服务器如何返回批量的复合数据给客户端？
复合数据：一个数据有多个属性
批量复合数据：有多个复合数据 —— 二维数组

**方式11：用text/plain格式**
101#三星#35.5#1.jpg@102#闪迪#34.5#2.jpg@金士顿#...
好处：简单
不足：不易读取、很容易出错
**方式12：用text/html格式**
<tr><td>101</td><td>三星</td><td>35.5</td></tr>
<tr><td>102</td><td>闪迪</td><td>35.5</td></tr>
<tr><td>103</td><td>金士顿</td><td>35.5</td></tr>
好处：情形，方便使用   tbody.innerHTML = xhr.responseText
不足：把数据和格式混在一起，限制了数据的应用场合
**方式21：用application/xml格式**
<productList>
  <product pid="101">
     <pname>三星</pname>
     <price>35.5</price>
     <pic>1.jpg</pic>
  </product>
  <product pid="102">
     <pname>闪迪</pname>
     <price>34.5</price>
     <pic>2.jpg</pic>
  </product>
</ productList>
好处：是纯数据，不附带任何的显示格式限制
不足：太复杂了，阅读和解析都太麻烦
**方式22：用application/json格式** 
[
  { 
     "pid":"101",
     "pname":"三星",
     "price":35.5,
     "pic":"1.jpg"
  },
  { 
     "pid":"102",
     "pname":"闪迪",
     "price":34.5,
     "pic":"2.jpg"
  }
]
有点：简单、易于阅读，处理速度快！

6.XML语法学习

eXtensible Markup Language，可扩展的标签语言，本身是一种字符串格式，用于描述批量复合数据，语法：
(1)所有的数据放在标签中：
<名>数据</名>
<名 />
(2)整个XML字符串有且只能有一个根标签
(3)所有的标签名都可以自定义，但严格区分大小写，且开始和结束标记必须完全一样
(4)每个标签都可以自定义属性，属性必须有值，值必须用单引号/双引号括起来
(5)每个标签都可以定义任意的子标签，标签可以嵌套，但不能交叉

扩展知识：HTML和XML的区别
HTML语法随意；XML语法严格；
HTML标签预定义好了；XML标签都是自定义的；
HTML用于描述网页的结构；XML标签用于描述数据；

7.使用XHR接收五种响应(4)——application/xml

  服务器端：
    header('Content-Type: application/xml');
    echo '<?xml ?><productList>....</productList>';
  客户端：
    //xhr.responseText   //把字符串解析为DOM对象很麻烦
    xhr.responseXML  //DOM树的根对象

W3C DOM标准分为三部分：
核心DOM：可以操作任意的DOM树，如getElementById()、querySelector()、getAttribute()....
HTML DOM
XML DOM

8.JSON字符串格式的语法

JSON(JavaScript Object Notation) 是一种轻量级的字符串数据格式。易于人阅读和编写；同时也易于机器解析和生成；在Web编程领域可以取代XML字符串格式！
(1)数据分为两种： [ ] { }
(2)整个字符串要么是一个数组、要么是一个对象
(3)数组中可以包含各种：数字、boolean、字符串、null、[]、 {}
(4)对象中可以包含多个键值对，键必须用双引号，值若是字符串也必须用双引号

9.使用XHR接收五种响应(5)——application/json

  服务器端：
    header('Content-Type: application/json;charset=UTF-8');
    $arr = ....;
    $str = json_encode($arr);  //把PHP数组转换为JSON字符串
    echo $str;
  客户端：
    JSON.parse( xhr.responseText ); //把JSON字符串解析为JS对象

10.ES6中新的字符串拼接

  var str = `
    phone=${p}&pwd=${w}
  `;
  反引号字符串可以换行；可以包含${}的变量或表单式。

11.使用jQuery的AJAX封装函数之一——load()

使用方法：
$('选择器').load(URL, [请求数据], [成功后的回调函数])
$('ul').load('search_suggest.php');
含义说明：
向指定的URL发起异步请求；若有请求数据，就是POST请求，否则就是GET请求；获取服务器端返回HTML片段响应，设置为当前选定元素的innerHTML。
使用限制：
(1)服务器返回的必需是HTML片段；
(2)服务器端返回的数据会替换已有数据！

12.使用jQuery的AJAX封装函数之二——$.get()

使用方法：
$.get(URL, [请求数据], 响应成功后的回调函数)
$.get('delete.php', 'sid=8', function(txt){ if(txt==='succ'){} })
$.get('delete.php', {sid:8}, function(txt, msg, xhr){ if(txt==='succ'){} })
含义作用：
向指定的URL发起异步的GET请求，把请求数据追加在URL的后面；服务器给出了成功的响应会自动调用第三个参数——doResponse。
提示：$.get会根据服务器端返回的响应消息内容类型自动决定如何处理，如applicatoin/json，会自动调用JSON.parse(xhr.responseText)进行解析！

13.使用jQuery的AJAX封装函数之三——$.post()

使用方法：
$.post(URL, 请求数据, 响应成功后的回调函数)
含义作用：
向指定的URL发起异步的POST请求，把请求数据放置在请求主体——无需手写3.5步；服务器给出了成功的响应会自动调用第三个参数——doResponse。
提示：$.post会根据服务器端返回的响应消息内容类型自动决定如何处理，如applicatoin/json，会自动调用JSON.parse(xhr.responseText)进行解析！

14.使用jQuery的AJAX封装函数之四——$.getScript()

使用方法：
$.getScript(URL, [请求数据], [响应成功后的回调函数])
$.getScript('x.php')
含义作用：
向指定的URL发起异步的GET请求，把请求数据放置在url后面；服务器给出了成功的响应会自动执行eval( xhr.responseText )。
使用限制：
要求服务器必须返回application/javascript！即使不是，也会强制调用eval(xhr.responseText)进行执行！而$.get()可以实现同样的功能，却可以根据服务器端的响应头来决定是否调用eval()

15.使用jQuery的AJAX封装函数之五——$.getJSON()——了解

使用方法：
$.getJSON(URL, [请求数据], 响应成功后的回调函数)
$.getJSON('x.php', function(obj){})
含义作用：
向指定的URL发起异步的GET请求，把请求数据放置在url后面；服务器给出了成功的响应会自动执行JSON.parse( xhr.responseText )。
使用限制：
要求服务器必须返回application/json！即使不是，也会强制调用JSON.parse(xhr.responseText)进行执行！而$.get()可以实现同样的功能，却可以根据服务器端的响应头来决定是否调用JSON.parse()

扩展知识:上述五个函数的通病：只能处理成功的响应消息！如果服务器端返回了错误的响应消息（如404）上述五个函数不会有任何的提示——没有相关的回调函数！

16.使用jQuery的AJAX封装函数之六——$.ajax()——重点

使用方法：

$.ajax( {
        type: 'GET',   //POST/PUT/DELETE...
        url: 'x.php',
        data: 'k=v&k=v',  //{k:v, k:v}
        beforeSend: fn, //在请求发送前的回调
        success: fn,        //响应成功后的回调
        error: fn,          //响应失败后的回调
        complete: fn        //响应完成后(不论成败)的回调
    } )

成功的调用： beforeSend() => success() => complete()
失败的调用： beforeSend() => error() => complete()

对应于原生AJAX：

//1 var xhr = new XMLHttpRequest();
//2 xhr.onreadystatechange = function(){
    if(xhr.readyState===4){
        if(xhr.status===200){
            success();
        }else {
            error();
        }
        complete()
    }
}
//3 xhr.open()
beforeSend();
//4 xhr.send()

17.JS中如何处理JSON字符串

把JSON格式的字符串解析为JS对象：
var str = '{"ename":"Tom", "age":20}';
var obj = JSON.parse(str); //方法1
var obj = eval( '('+str+')' ); //方法2，不推荐使用
把JS对象编码为JSON字符串：
var obj = {ename:'Tom', age: 20};
var str = JSON.stringify(obj);

PHP中把数组编码为JSON字符串：
$list = [{},{},{}];
$str = json_encode( $list );
PHP中JSON字符串解析为PHP数组/对象：
$str = '{"ename":"Tom", "age":20}';
$obj = json_decode( $str );

18：跨域请求和JSONP

图片描述
Cross Domain Request：从一个资源请求另一个资源，二者所在的请求地址不同，域名不同、端口号不同、请求协议不同。

提示：localhost和127.0.0.1也算跨域！
浏览器允许跨域请求的情形：
IMG、LINK、SCRIPT、IFRAME ...
浏览器禁止跨域请求的情形：
XHR —— 浏览器处于安全考虑，禁用了XHR的跨域请求（其实服务器给出了响应消息，但浏览器不让使用）

如何解决浏览器的XHR跨域请求限制 —— 八种方案：
(1)代理
(2)xhr2
(3)postMessage
(4)window.name
(5)document.domain
(6)CORS
(7) 修改响应消息头部，添加Access-Control-Allow-Origin头部
(8) 使用JSONP——非常巧妙

JSON: JavaScript Object Notation，是一种字符串数据格式。
JSONP：JSON with Padding，填充式JSON，与JSON完全两码事，是一种使用JSON数据的方式。意思是在JSON字符串左右添加函数名： doResponse( {"ename":"Tom", "age":20} );
JSONP是专用于解决XHR跨域限制一种手段。基本原理：使用动态创建的一个SCRIPT标签代替XHR发起异步请求，要求服务器必须返回application/javascript，立即在客户端执行——要执行的函数本体在客户端浏览器中声明。
<script src="x.php" async></script>

19：jQuery中如何使用JSONP发起异步请求：

(1) $.getJSON()
用途1：使用XHR发起异步请求(不能跨域)
$.getJSON('x.php', doResponse)
用途2：使用JSONP发起跨域异步请求
$.getJSON('http://跨域地址/x.php?callback=?', doResponse)

(2) $.ajax()
用途1：使用XHR发起异步请求(不能跨域)
$.ajax({ })
用途2：使用JSONP发起跨域异步请求
$.ajax({ dataType: 'jsonp' })

扩展知识.JS和CSS加载外部资源的路径问题
JS是运行于HTML网页中，JS中请求的资源的路径使用相对于HTML文件的路径；
CSS是独立被浏览器解释，CSS中使用外部资源(如图片)路径使用相对于CSS文件的路径；

20.表单序列化

$('#formId').serialize( );
jQuery中提供的表单序列化函数，可以把选定的表单中所有带name属性的输入域连同值转换为k=v形式，全部使用&符号拼接在一起，组成一个大的字符串，用于异步请求数据提交。

21.Web项目中的分页查询

当一个页面需要呈现的数据很多时，不可能一次性全部显示，必须使用分页显示：
初始时显示第1页，用户点击某个页号，异步请求对应页中的内容。
分页查询客户端提交的请求消息形如：
GET /select.php?pageNum=3 HTTP/1.1
分页查询服务器返回的响应消息形如：
{
recordCount: 36, //满足条件的记录的总数
pageSize: 8, //页面大小，每页最多显示的记录数
pageCount: 5, //总的页数
pageNum: 3, //当前显示的页号
data: [ {},{}...{} ] //当前页中的数据
}
(1)MySQL如何查询出符合条件的总的记录数量
SELECT COUNT() FROM jd_product WHERE...;
查询结果集中有一行一列的数据
(2)PHP如何计算页面的总数量：
ceil( recordCount / pageSize ) //上取整函数
(3)MySQL如何实现查询指定页面中的记录
提示：不同的数据库实现分页查询的SQL各不相同！
SELECT FROM jd_product WHERE ... LIMIT start, count;
LIMIT: 限制，结果集中从哪一行开始获取数据(从0开始)，最多要多少行。
第1页： LIMIT 0, 8 01234567
第2页： LIMIT 8, 8 89101112131415
第3页： LIMIT 16, 8
第4页： LIMIT 24, 8
第5页： LIMIT 32, 8
第pageNum页：
LIMIT (pageNum-1)*pageSize, pageSize

22.关系型数据库中两个表间的关系——数据设计理论

图片描述

(1)一对一关系
可以在任一表中添加引用对方表的外键列

(2)一对多关系
部门vs员工、板块vs帖子、商品vs留言、分类vs商品
只能在多方表中添加外键列，引用一方的主键

(3)多对多关系
商品vs购物车、学生vs课程、工人vs车间、员工vs项目
只能再创建一个中间表，有两个外键列，分别指向每个表的主键

23.如何访问异步加载的页头和页尾中的元素：

事件绑定：可以委托给DOM树上已有的父元素
HTML内容操作：
$(...).load('x.php', function(){
//异步请求完成后，再处理后加载的DOM元素
})

222.SQL中的多表查询

CREATE TABLE dept( did INT, dname VARCHAR(32) );
INSERT INTO dept VALUES
(10, '研发部'),
(20,'市场部');

CREATE TABLE emp( eid INT, ename VARCHAR(32), deptId INT );
INSERT INTO emp VALUES
(1, 'Tom', 10),
(2,'Mary', 10),
(3,'John', 20);
请查询出每个员工姓名及其所在部门名称：
SELECT ename, dname FROM emp, dept; //该语句会得到一个笛卡尔积：从每个表中任取一行记录，与另一表中的每一行记录匹配，配对总可能数：m n
SELECT ename, dname FROM emp, dept WHERE deptId = did;
跨表查询：查询得到的结果集来自于多个表！为了避免产生笛卡尔积，必须有两个表的相等条件！*

水平有限,总结的东一榔头西一棒子,看懂说明你基本掌握了基本后端知识,长路漫漫,但是还要一步一步,与君共勉!
12,12 小健

浅谈初级前端攻城狮应该知道的后端知识3：原创