HTTP服务&AJAX编程

一、HTTP服务

1.1 C/S和B/S

B/S架构：即Broswer、Server，将所有的服务都可以通过浏览器来完成，比如各种网站。
C/S架构：即Client、Server，不同的服务需要安装不同的客户端软件，比如QQ、迅雷等。
两者的区别：
1. B/S架构：
  - 免安装，所有服务都通过浏览器来完成，节省系统资源，开发效率高，只需要开发一个基于html5的网页。
  - 安全性要差一些，所有的内容都需要从服务端加载，性能也要差一些。
2. C/S架构：
  - 安全性要好一些，性能要好一些，安装包中可能集成一些大型的图片，运行更流畅。
  - 必须下载客户端软件才能使用服务。

1.2 客户端&服务端

1.2.1 客户端

具有向服务器索取服务能力的终端，比如手机、电脑等，通过安装不同的客户端软件，可以获取不同的服务，比如通过QQ获得即时通讯服务、通过迅雷获得下载服务等。

1.2.2 服务端

对外提供服务器的，一般的客户端都对应有服务端，能够提供某种服务的机器（计算机）称为服务器。

服务器类型：

按照不同的划分标准，服务可划分为以下类型：
1. 按服务类型可分为：
  - 文件服务器
  - 数据库服务器
2. 按操作系统可分为：
  - Linux服务器体
  - Windows服务器等
3. 按应用软件可分为：
  - Apache服务器
  - Nginx 服务器
  - IIS服务器
  - Tomcat服务器
  - Node服务器等
服务器软件：

使计算机具备提供某种服务能力的应用软件，称为服务器软件，通过安装相应的服务软件，然后进行配置后就可以使计算具备了提供某种服务的能力。

常见的服务器软件有：
1. 文件服务器：Server-U、FileZilla、VsFTP等；
2. 数据库服务器：Oracle、MySQL、PostgreSQL、MSSQL等；
3. 邮件服务器：Postfix、Sendmail等；
4. web服务器：Apache、Nginx、IIS、Tomcat、NodeJS等。
Web(http)服务器：

即网站服务器，主要提供文档(文本、图片、视频、音频)浏览服务，一般安装Apache、Nginx服务器软件。

HTTP服务器可以结合某一编程语言处理业务逻辑，由此进行的开发，通常称之为服务端开发。

常见的运行在服务端的编程语言包括 PHP、Jsp、Asp、Python、Ruby、Perl等。

1.3 网络基础

1.3.1 IP地址

局域网IP：是由交换机或者路由器去分配的一个32位地址。

局域网：是指在某一区域内由多台计算机互联成的计算机组。
公网IP：一般需要去电信部门申请。
查看本机IP地址：ping、ipconfig、ifconfig

如百度的IP地址：http://119.75.217.109

1.3.2 域名

由于IP地址基于数字，不方便记忆，于是便用域名来代替IP地址，域名是一个IP地址的“面具”。

一个域名下面可以配置多个二级域名。

域名可以去阿里云等网站申请，购买使用。

查看域名对应的IP地址 ping、tracert

1.3.3 端口

端口号是计算机与外界通讯交流的出口，每个端口对应不同的服务。一台计算机大概有6w多个端口，假设我的计算机要对外提供服务，我就必须占用一个端口对外提供服务。一台计算机可以对外提供多个服务，只要占用的端口不一样即可。web的端口是默认80，mysql对外提供数据库服务，默认端口是3306。

查看端口占用情况 netstat -an
常见端口号 80、8080、3306、21、22

1.3.4 DNS服务

DNS（Domain Name System）域名系统，作用是进行域名管理。它记录了IP 地址和域名的映射关系。

查找优先级：本机hosts文件 --> DNS服务器。

1.4 搭建Web服务器

1.4.1 安装WampServer

如果只安装apache，解析不了php，所以要安装wamp（windows apache mysql php）集成环境。

1.4.2 访问本机

http://192.168.136.80:80
http://127.0.0.1:80
http://localhost:80

1.4.3 apache的配置

进入到这个目录下面去配置：C:\wamp\bin\apache\Apache2.2.21\conf\httpd.conf

配置所有的用户都可以访问我的服务器：在235行添加Allow from all。
修改默认访问路径：文件的178行DocumentRoot "f:/webwokspace"，文件的205 行 <Directory "f:/webwokspace/">。
修改默认端口号：修改文件第46行Listen后边的数值即可。

1.4.4 配置虚拟主机

在一台Web服务器上，我们可以通过配置虚拟主机，然后分别设定根目录，实现对多个网站的管理。

开启虚拟主机辅配置：
1. 在C:\wamp\bin\apache\Apache2.2.21\conf\httpd.conf467行找到Include conf/extra/httpd-vhosts.conf，打开前边的注释。
2. 配置虚拟主机，打开conf/extra/httpd-vhosts.conf，分别修改以下三项：
  - DocumentRoot "文件路径"
  - ServerName "example.com"
  - ServerAlias "www.example.com"
3. 修改DNS（hosts）文件：
  
  打开C:\Windows\System32\drivers\etc\hosts，目录是固定的。
```
127.0.0.1  example.com
127.0.0.1  www.example.com
```

1.4.5 资源

我们把服务器上面的这些文件都统称为资源。

静态资源：可以通过浏览器直接打开，直接解析的我们成为静态资源。html、js、css、image我们可以理解成静态资源。
动态资源：php、jsp、asp我们可以理解为动态资源。
浏览器只认识静态资源。如果我的客户端浏览器访问的服务器上面的动态资源，服务器会把动态资源转换成静态资源，然后再丢给客户端浏览器。
动态资源是在服务端运行的，静态资源是在客户端运行的。

1.5 PHP基础

1.5.1 语法

php代码必须放在：
```
<?php
  /** 这里是代码 **/ 
?>
```

1.5.2 变量

变量以$开头字母/数字/下划线不能以数字开头
大小写敏感（区分大小写）

1.5.3 数据类型

字符串
整型
浮点型
布尔型
数组

1.5.4 内容输出

echo：输出简单数据类型，如字符串、数值。
print_r()：输出复杂数据类型，如数组。
var_dump()：输出详细信息，如对象、数组。

1.5.5 运算符

基本与Javascript语法一致。
.号表示字符串拼接符，Javascript中为+号。

1.5.6 函数

与Javascript基本一致。
函数名对大小写不敏感。
PHP中函数的参数可以设置一个默认值。
几个常用的函数：
1. in_array()：是否在数组中。
2. count()：计算数组长度。
3. array_key_exists()：检测数组中是否存在key。
4. file_get_contents：读取文件。
5. move_upload_file()：移动上传的文件。

1.5.7 表单处理

表单name属性的是用来提供给服务端接收所传递数据而设置的。
表单action属性设置接收数据的处理程序。
表单method属性设置发送数据的方式。
当上传文件是需要设置 enctype="multipart/form-data"，且只能post方式。
$_GET接收 get 传值。
$_POST接收 post 传值。
$_FILES接收文件上传。

1.6 客户端与服务端交互

1.6.1 客户端

提交途径：
1. 地址栏输入
2. 超链接（href，src）
3. 表单提交
提交方式：
1. get：地址栏输入、超链接（href，src），表单提交默认是get。
2. post：表单提交可以设置成post。

1.6.2 服务端

接受请求：$_GET $_POST 这两个变量得到的值都是一个关联数组，客户端的数据放在关联数组里面，我们要取数据，根据key去获取。
处理请求：连接数据库，增删改查。
响应数据：根据处理请求的逻辑，给客户端不同的响应结果。

1.6.3 文件上传

客户端：
1. 表单提交
2. post方式提交
3. 必须有一个input type=file
4. 必须给form 设置一个属性enctype="multipart/form-data"
服务端：
1. 接收数据
2. $_FILES接收到的数据也是一个关联数组

1.7 网络传输协议

指服务器和客户端间进行通信时的约束和规范，客户端与服务端的数据交互并不是杂乱无章的，需要遵照（基于）一定的规范进行。

常见协议：
1. HTTP、HTTPS 超文本传输协议。
2. FTP 文件传输协议。
3. SMTP 简单邮件传输协议。
HTTP协议：

即超文本传输协议，网站是基于HTTP协议的，例如网站的图片、CSS、JS等都是基于HTTP协议进行传输的。

HTTP协议是由从客户机到服务器的请求(Request)和从服务器到客户机的响应(Response)进行了约束和规范。

即HTTP协议主要由请求和响应构成。

常用请求方法 POST、GET、PUT、DELETE。
- 请求/请求报文：请求由客户端发起，其规范格式为：请求首行、请求头、请求空行、请求体。
  1. 请求首行：由请求方式、请求URL和协议版本构成。
```
GET /work/code/01http/01get.html HTTP/1.1
```
  2. 请求头：
    - Host：localhost请求的主机。
    - Cache-Control：max-age=0控制缓存。
    - Accept：/ 接受的文档MIME类型。
    - User-Agent：告诉服务器客户端浏览器的版本，操作系统的版本。
```
Referer的头：告诉服务器请求来自于那个页面，广告流量统计，防盗链。
```
    - Referer：从哪个URL跳转过来的。
    - Accept-Encoding：可接受的压缩格式。
  3. 请求空行：分隔请求头和请求体。
  4. 请求体：即传递给服务端的数据。
  注：当以post形式提交表单的时候，请求头里会设置Content-Type: application/x-www-form-urlencoded，以get形式提交不需要。
- 响应/响应报文：响应由服务器发出，其规范格式为：状态行、响应头、响应空行、响应主体。
  1. 状态行：由协议版本号、状态码和状态信息构成。
```
HTTP/1.1 200 OK
```
    - 状态码：200（代表成功），403（代表没有权限），404（代表请求的资源没有找到），405（代表请求的方式不支持），302（请求重定向），304（文档未修改），500（代表服务器内部错误）。
  2. 响应头：
    - Date：响应时间。
    - Server：服务器信息。
    - Last-Modified：文件的最后修改时间。
    - Content-Length：响应主体长度。
    - Content-Type：响应资源的MIME类型。（MIME是标识文件类型的，文件后缀并不能正确无误的标识文件的类型。）
    客户端与服务器在进行数据传输的时候都是以字节形式进行的，咱们可以理解成是以“文本形式”传输，这时浏览器就需要明确知道该怎么样来解析这些文本形式的数据，MIME就是明确告知浏览器该如何来处理。
  3. 响应空行：分隔响应头和响应体。
  4. 响应体：即服务端返回给客户端的内容。
调试工具：
1. 利用HTTP抓包工具在开发中可以帮我们进行调试，常用抓包工具：HttpWatch、Fiddler、Charles、FireBug等。
2. 浏览器插件：Firebug、HttpWatch、chrome dev tools。
3. 代理软件：Charles、Fiddler。

二、AJAX编程

即 Asynchronous Javascript And XML，AJAX 不是一门的新的语言，而是对现有持术的综合利用。

本质是在HTTP协议的基础上以异步的方式与服务器进行通信。

2.1 同步&异步

异步：指某段程序执行时不会阻塞其它程序执行，其表现形式为程序的执行顺序不依赖程序本身的书写顺序，其优势在于不阻塞程序的执行，从而提升整体执行效率。反之则为同步。
异步交互：客户端请求服务器，服务器接收到请求并处理请求，然后给客户端一个响应，响应的数据不会把原来的页面给覆盖，我们把这种交互成为异步交互。如果响应的数据把原来的页面给覆盖，则为同步交互。

2.2 XMLHttpRequest

浏览器内建对象，用于在后台与服务器通信(交换数据) ，由此我们便可实现对网页的部分更新，而不是刷新整个页面。

2.2.1 请求

请求首行：
```
xhr.open('get','index.php');
```

请求头：get请求可以不设置

xhr.setRequestHeader("Content-Type","text/html");

请求主体：
```
xhr.send(null);
```

2.2.2 响应

HTTP响应是由服务端发出的，作为客户端更应关心的是响应的结果。

由于服务器做出响应需要时间（比如网速慢等原因），所以我们需要监听服务器响应的状态，然后才能进行处理。

onreadystatechange是Javascript的事件的一种，其意义在于监听XMLHttpRequest的状态。

获取状态行（包括状态码&状态信息）：

xhr.status            //状态码
xhr.statusText        //状态信息

获取响应头：

xhr.getResponseHeader('Content-Type');        //获取指定头信息
xhr.getAllResponseHeaders();              //获取所有响应头信息

响应主体：

xhr.responseText;
xhr.responseXML;

我们需要检测并判断响应头的MIME类型后确定使用request.responseText或者request.responseXML

2.2.3 API

xhr.open() 发起请求，可以是get、post方式。
xhr.setRequestHeader() 设置请求头。
xhr.send() 发送请求主体get方式使用xhr.send(null)。
xhr.onreadystatechange = function () {} 监听响应状态。
xhr.status表示响应码，如200�。
xhr.statusText表示响应信息，如OK��。
xhr.getAllResponseHeaders() 获取全部响应头信息。
xhr.getResponseHeader('key') 获取指定头信息。
xhr.responseText、xhr.responseXML都表示响应主体。

2.3 GET与POST的区别（面试中经常问到）

GET没有请求主体，使用xhr.send(null)。
GET可以通过在请求URL上添加请求参数。
POST可以通过xhr.send('name=itcast&age=10')。
POST需要设置：xhr.setRequestHeader("Content-Type","application/x-www-form-ullencoded");
GET效率更好（应用多）。
GET大小限制约4K，POST则没有限制。

2.4 XML

XML是一种可扩展的标记语言，很类似HTML，其宗旨是用来传输数据，具有自我描述性（它里面的标签是自定义的）。

2.4.1 语法

必须有且仅有一个根元素。

第一行必须是文档申明：

<?xml version="1.0" encoding="utf-8" ?>

不可有空格、不可以数字或.开头、大小写敏感。
不可交叉嵌套。
属性双引号（浏览器自动修正成双引号了）。
特殊符号要使用实体。
注释和HTML一样。

虽然可以描述和传输复杂数据，但是其解析过于复杂并且体积较大，所以实现开发已经很少使用了。

2.4.2 示例

2.5 JSON

即 JavaScript Object Notation，另一种轻量级的文本数据交换格式，独立于语言。

2.5.1 语法

数据在名称/值对中。
数据由逗号分隔(最后一个健/值对不能带逗号)。
花括号保存对象方括号保存数组。
使用双引号。

2.5.2 json解析

JSON数据在不同语言进行传输时，类型为字符串，不同的语言各自也都对应有解析方法，需要解析完成后才能读取。

Javascript 解析方法：eavl()、JSON对象 JSON.parse()、JSON.stringify()；�
PHP解析方法：json_encode()、json_decode()。

总结：JSON体积小、解析方便且高效，在实际开发成为首选。

2.6 jQuery中的ajax

jQuery ajax介绍

jQuery为我们提供了更强大的Ajax封装：

$.ajax({}) 可配置方式发起Ajax请求
$.get() 以GET方式发起Ajax请求
$.post() 以POST方式发起Ajax请求
$('form').serialize() 序列化表单（即格式化key=val&key=val）
url 接口地址
type 请求方式
timeout 请求超时
dataType 服务器返回格式
data 发送请求数据
beforeSend: function () {} 请求发起前调用
success 成功响应后调用
error 错误响应时调用
complete 响应完成时调用（包括成功和失败）

6个方法：ajax get post getScript getJSON load

2.7 模板引擎

2.7.1 原理剖析

其本质是利用正则表达式，替换模板当中预先定义好的标签。

2.7.2 流行模板引擎

BaiduTemplate：http://tangram.baidu.com/BaiduTemplate/
ArtTemplate：https://github.com/aui/artTemplate
velocity.js：https://github.com/shepherdwind/velocity.js/
Handlebars：http://handlebarsjs.com/
参考资料：http://blog.jobbole.com/56689/

2.7.3 artTemplate

引入template-native.js
<% 与%>符号包裹起来的语句则为模板的逻辑表达式
<%=content%>为输出表达式

<script type="text/template" id="tempalteId">
    <% for(var i=0;i<rows.length;i++){%>
        <tr>
            <td><%=rows[i].username %></td>
            <td><%=rows[i].age %></td>
        </tr>
    <%}%>
</script>

$(function () {
    $("input").on("click", function () {
        $.ajax({
            url: "01template.php",
            type: "get",
            success: function (data) {
                //解析数据，将数据放到页面上面.
                //之前：data 转成JavaScript 对象
                //创建标签，然后将标签跟数据组装到一起
                //现在:使用template 来解析
                //js/template-native.js 文件里面提供.
                //alert(data);
                //1:模板id
                //2：数据，这里要求的数据一定要是一个对象.{}
                //[] 改成这个格式 {}
                var obj = {
                    rows: data
                }
                var html = template("tempalteId", obj);
                console.log(html);
                $("table").append(html);
            }
        })
    });
})

2.8 同源&跨域

2.8.1 同源

同源策略是浏览器的一种安全策略，所谓同源是指，域名，协议，端口完全相同。

2.8.2 跨域

不同源则跨域。

例如http://www.example.com/

网址	是否同源	解释
http://api.example.com/detail.html	不同源	域名不同
https://www.example.com/deail.html	不同源	协议不同
http://www.example.com:8080/detatil.html	不同源	端口不同
http://api.example.com:8080/detail.html	不同源	域名、端口不同
https://api.example.com/detail.html	不同源	协议、域名不同
https://www.example.com:8080/detail.html	不同源	端口、协议不同
http://www.example.com/detail/index.html	同源	只是目录不同

2.8.3 跨域方案

顶级域名相同的可以通过domain.name来解决，即同时设置 domain.name = 顶级域名（如example.com）
document.domain + iframe
window.name + iframe
location.hash + iframe
window.postMessage()

2.8.4 JSONP

JSONwith Padding

原理剖析

其本质是利用了<script src=""></script>标签具有可跨域的特性，由服务端返回一个预先定义好的Javascript函数的调用，并且将服务器数据以该函数参数的形式传递过来，此方法需要前后端配合完成。
- 文件后缀并不能代表什么，关建我们要看服务器返回的内容，比如css.php
  
  这时返回的内容为 echo 'body {background:color}'我们可以通过content-type:text/css来指定浏览器该如何解析，返回的内容
- 同样我们也可以js文件以.php结尾，比如js.php 这时我们可以指定Content-Type: text/javascript可告知浏览器要以javascript来执行我们返回的内容，如果返回的是一个javascript的一个函数调用，那么在这个函数调用过程中可以将跨域请求来的数据以“实参”的传递过来，并且这个实参一般是JSON格式的
- 只能以GET方式请求

2.8.5 jQuery中的JSONP

jQuery 的$.ajax() 方法当中集成了JSONP的实现，可以非常方便的实现跨域数据的访问。�

dataType: 'jsonp' 设置dataType值为jsonp即开启跨域访问
jsonp 可以指定服务端接收的参数的“key”值，默认为callback
jsonpCallback 可以指定相应的回调函数，默认自动生成

最后编辑于：2017.12.06 07:55:00

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 203,324评论 5赞 476
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,303评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 150,192评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,555评论 1赞 273
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,569评论 5赞 365
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,566评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,927评论 3赞 395
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,583评论 0赞 257
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,827评论 1赞 297
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,590评论 2赞 320
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,669评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,365评论 4赞 318
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,941评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,928评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,159评论 1赞 259
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 42,880评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,399评论 2赞 342