Web基础知识

// HTTP/1.1 200 OK

// 响应头

// Date: Thu, 02 Nov 2017 06:22:27 GMT

// Server: Apache/2.4.23 (Win64) OpenSSL/1.0.2h PHP/5.6.28

// Accept-Ranges: bytes

// Content-Type: text/html

// 实体内容

//

// 响应状态行

HTTP版本：例如，HTTP/1.1。状态码：例如，200。描述信息：例如 OK 。 响应状态行用于告知客户端本次响应的状态。

状态码

含义

状态码

含义

200

正常

403

禁止

301

永久移动

404

找不到

302

临时移动

500

内部服务器错误

304

未修改

502

无效网关

401

未经授权

504

网关超时

状态码表示服务器对客户端请求的各种不同的处理结果和状态。

响应头用于告知客户端本次响应的基本信息，包括服务器程序名、内容的编码格式、缓存控制等。

请求头和响应头是浏览器和服务器之间交互的重要信息，由程序自动处理，通常不需要人为干预。

实体内容

网页 -> 图片服务器的响应实体内容有多种编码格式。服务器为了告知浏览器内容类型，会通过响应消息头中的Content-Type字段来描述。例如，网页的类型通常是“text/html”，这是一种MIME类型表示方式。MIME是目前大部分互联网应用程序通用的格式。MIME的表示方法为“大类别/具体类型”。

MIME

含义

MIME

含义

text/plain

普通文本（.txt）

image/gif

GIF图像（.gif）

text/xml

XML文本（.xml）

image/png

PNG图像（.png）

text/html

HTML文本（.html）

image/jpeg

JPEG图像（.jpeg）

text/css

CSS文本（.css）

application/javascript

JavaScript程序（.js）

浏览器会根据服务器响应的不同MIME类型采取不同的处理方式。

遇到普通文本时直接显示。遇到HTML时渲染成网页。遇到GIF、PNG、JPEG等类型时显示为图像。如果浏览器遇到无法识别的类型时，在默认情况下会执行下载文件的操作。

2 Web服务器搭建2.1 前后端交互Web开发分为前端和后端。前端是面向用户的一端，即浏览器程序开发。后端则为前端提供服务，即服务器端程序开发。在动态网站中，许多功能是由前后端交互实现的。例如，用户注册和登录、发表评论、查询积分、余额等。这些操作可分为两类，一类是向服务器提交数据（表单交互），一类是向服务器查询数据（ URL参数交互）。表单交互

表单交互是指在HTML中创建一个表单，用户填写表单后提交给服务器，服务器收到表单后返回处理结果。

URL参数交互

URL参数经常用于浏览器向服务器提交一些请求信息。

3 Ajax入门3.1 什么是AjaxAjax：Asynchronous JavaScript And XML，异步JavaScript和XML技术。

描述：不是一门新的语言或技术，是由JavaScript、XML、DOM、CSS等多种已有技术组合而成的一种浏览器端技术。

功能：用于实现与服务器进行异步交互的功能。

Ajax相对于传统的Web应用开发区别：

传统Web工作流程

Ajax工作流程

相较于传统网页，使用Ajax技术的优势具体有以下几个方面。

减轻服务器的负担节省带宽用户体验更好3.2 创建Ajax对象创建Ajax对象

W3C标准

代码语言：javascript复制var xhr = new XMLHttpRequest();早期IE浏览器

代码语言：javascript复制var xhr = new ActiveXObject('Microsoft.XMLHTTP');

var xhr = new ActiveXObject('Msxml2.XMLHTTP');

var xhr = new ActiveXObject('Msxml2.XMLHTTP.3.0');

var xhr = new ActiveXObject('Msxml2.XMLHTTP.5.0');

var xhr = new ActiveXObject('Msxml2.XMLHTTP.6.0');3.3 Ajax向服务器发送请求创建一个新的HTTP：open()方法

代码语言：javascript复制open('method', 'URL' [, asyncFlag [, 'userName' [, 'password']]])method：用于指定请求方式，如GET、POST，不区分大小写。

URL：表示请求的地址。

asyncFlag：可选参数，用于指定请求方式，同步请求为false，默认为异步请求true。

userName和password：可选参数，表示HTTP认证的用户名和密码。

设置HTTP请求头：setRequestHeader()方法

代码语言：javascript复制setRequestHeader('haeder', 'value')参数都为字符串类型。

header表示请求头字段。

value为该字段的值。

此方法必须在open()方法后调用。

向Web服务器发送请求并接收响应：send()方法

代码语言：javascript复制send(content)content：用于指定要发送的数据，其值可为DOM对象的实例、输入流或字符串，一般与POST请求类型配合使用。

注意：如果请求声明为同步，该方法将会等待请求完成或者超时才会返回，否则此方法将立即返回。

在进行Ajax开发时，经常使用GET方式或POST方式发送请求。

GET方式适合从服务器获取数据。POST方式适合向服务器发送数据。需要设置内容的编码格式，告知服务器用什么样的格式来解析数据。Ajax对象发送请求的方法。

代码语言：javascript复制// GET

var xhr = new XMLHttpRequest(); // 创建Ajax对象

xhr.open('GET', 'test?a=1&b=2'); // 建立HTTP请求

xhr.send();

// POST

var xhr = new XMLHttpRequest();

xhr.open('POST', 'test?a=1&b=2');

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

xhr.send('c=3&d=4');同步请求与异步请求

Ajax对象open()方法的第3个参数用于设置同步请求和异步请求。两种方式的区别在于，是否阻塞代码的执行。

异步方式（默认）：是非阻塞的，浏览器端的JavaScript程序不用等待Web服务器响应，可以继续处理其他事情。当服务器响应后，再来处理Ajax对象获取到的响应结果。

同步方式：是阻塞的，当Ajax对象向Web服务器发送请求后，会等待Web服务器响应的数据接收完成，再继续执行后面的代码。

由于同步请求的Ajax导致程序阻塞，会对用户体验造成不利影响，因此通常情况下不推荐使用同步请求。

3.4 处理服务器返回的信息获取Ajax的当前状态：readyState属性

readyState属性用于获取Ajax的当前状态，状态值有5种形式。

状态值

说明

解释

未发送

对象已创建，尚未调用open()方法

1

已打开

open()方法已调用，此时可以调用send()方法发起请求

2

收到响应头

send()方法已调用，响应头也已经被接收

3

数据接收中

响应体部分正在被接收。responseText将会在载入的过程中拥有部分响应数据

4

完成

数据接收完毕。此时可以通过responseText获取完整的响应

另外，Ajax状态的还可以通过“XMLHttpRequest.属性名”的方式获取。

代码语言：javascript复制XMLHttpRequest.UNSENT; // 对应状态值0

XMLHttpRequest.OPENED; // 对应状态值1

XMLHttpRequest.HEADERS_RECEIVED; // 对应状态值2

XMLHttpRequest.LOADING; // 对应状态值3

XMLHttpRequest.DONE; // 对应状态值4感知Ajax状态的改变：onreadystatechange事件属性

onreadystatechange事件属性用于感知readyState属性状态的改变，每当readyState的值发生改变时，就会调用此事件。

代码语言：javascript复制var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function() {

console.log(xhr.readyState);

};

console.log(xhr.readyState);

xhr.open('GET', 'test.php');

xhr.send();返回当前请求的HTTP状态码：status属性

status属性用于返回当前请求的HTTP状态码，值为数值类型。例如，当请求成功时，状态码为200。另外还有一个类似的属性statusText，值为字符型数据，包含了描述短语，如“200 OK”。获取响应信息：responseText属性、responseXML属性等

当请求服务器成功且数据接收完成时，可以使用Ajax对象提供的相关属性获取服务器的响应信息。

属性名

说明

responseText

将响应信息作为字符串返回

responseXML

将响应信息格式化为XML Document对象并返回（只读）

responseXML属性在请求失败或相应内容无法解析时的值为null。

需要注意的是，服务器在返回XML时应设置响应头Content-Type的值为text/xml或application/xml，否则会解析失败。

Ajax如何处理服务器返回的信息。

代码语言：javascript复制var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function() {

if (xhr.readyState === XMLHttpRequest.DONE) {

if (xhr.status < 200 || xhr.status >= 300 && xhr.status !== 304) {

alert('服务器异常');

return;

}

console.log(xhr.responseText);

}

};

xhr.open('GET', 'hello.php');

xhr.send();URL参数编码转换

在通过URL参数传递数据时，如果参数中包含特殊字符可能会出现问题。

例如 “?” “=” “&”，这些字符已经被赋予了特定的含义。

如果需要传递这些特殊字符，可以使用encodeURIComponent()进行URL编码。

代码语言：javascript复制var str = encodeURIComponent('A&B C');

var url = 'http://xxx/test?name=' + str;

// 输出结果：http://xxx/test?name=A%26B%20C

console.log(url); “&”被转换为“%26”。

空格被转换为“%20”。

当服务器收到已编码的内容之后，会对其进行解码，从而正确识别这些特殊字符。

对于已经编码的字符串，可以使用decodeURIComponent()进行解码。

代码语言：javascript复制var str = 'A%26B%20C';

// 输出结果：A&B C

console.log(decodeURIComponent(str));4 数据交换格式前后端应用程序在进行数据交换时，如何确保它们都能识别？

约定一种格式，确保通信双方都能够正确识别对方发送的信息。

4.1 XML数据格式XML：eXtensible Markup Language，可扩展标记语言。

与HTML都是标签语言，XML主要用于描述和存储数据，可以自定义标签。

代码语言：javascript复制

三国演义

罗贯中

水浒传

施耐庵

当服务器返回的是一个XML格式的数据时，利用Ajax对象的responseXML属性即可对XML数据进行处理。

代码语言：javascript复制var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function() {

if (xhr.readyState === XMLHttpRequest.DONE) {

var data = xhr.responseXML;

var booklist = data.getElementsByTagName('booklist')[0];

console.log(booklist.childNodes);

var book = booklist.children[0];

console.log(book.children[0].innerHTML); // 方式1

console.log(book.children[0].firstChild); // 方式2（会加上引号）

console.log(book.children[0].firstChild.wholeText); // 方式3

}

};

xhr.open('GET', 'xml.php');

xhr.send();4.2 JSON数据格式JSON：是一种轻量级的数据交换格式。

特点：采用完全独立于语言的文本格式，这使得JSON更易于程序的解析和处理。

与XML对比：使用JSON对象访问属性的方式获取数据更加方便，在JavaScript中可以轻松地在JSON字符串与对象之间转换。

JSON格式的数据交互实现。

代码语言：javascript复制var obj = {name: 'Tom', age: 24}; // 准备要发送的数据

var json = JSON.stringify(obj); // 将对象转换为JSON字符串

var xhr = new XMLHttpRequest();

xhr.open('POST', 'json.php');

xhr.onreadystatechange = function() {

if (xhr.readyState === XMLHttpRequest.DONE) {

var obj = JSON.parse(xhr.responseText); // 将JSON字符串转换为对象

console.log(obj);

/*

console.log(typeof xhr.responseText); // 查看服务器返回数据的类型：string

eval（'var obj = ' + xhr.responseText); // 用eval（)函数将字符型转成对象

console.log(obj.name); // 输出结果：Tom

console.log(obj.age); // 输出结果：24

*/

}

};

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

xhr.send('json=' + encodeURIComponent(json));eval（)函数

JavaScript中的eval（)函数可将传入的字符串当做JavaScript代码执行。

代码语言：javascript复制console.log(typeof xhr.responseText); // 查看服务器返回数据的类型：string

eval（'var obj = ' + xhr.responseText); // 用eval（)函数将字符型转成对象

console.log(obj.name); // 输出结果：Tom

console.log(obj.age); // 输出结果：24 eval（)在设置参数时，如果传入的字符串不合法，会导致后面的代码也不执行，所以一般情况下不推荐使用它。

5 跨域请求5.1 Ajax跨域问题域（Domain）是指网络中独立运行的单位。从网络安全角度来看，域是安全的边界，每个域都有自己的安全策略，不同域之间是隔离的，除非建立信任关系，否则无法互相访问。代码语言：javascript复制A网站 -> 利用Ajax读取用户在B网站中的余额 -> B网站

A网站 <- 通过Ajax向A网站发送修改密码的请求 <- B网站跨域请求会导致网页失去安全性，因此浏览器阻止跨域请求。

浏览器如何解决跨域问题带来的危害。

遵循同源策略，同源是指请求URL地址中的协议、域名和端口都相同。

非同源的URL地址

问题

URL-1

URL-2

域名不同

http://www.example.com/1.html

http://api.example.com/1.html

协议不同

http://www.example.com/1.html

https://www.example.com/1.html

端口不同

http://www.example.com/1.html

http://www.example.com:8080/1.html

浏览器遵循“同源策略”带来的问题：给网站正常的跨域需求带来了难题。

解决办法之一：为使受信任的网站之间能够跨域访问，HTML5提供了一个新的策略，就是Access-Control-Allow-Origin响应头。目标服务器通过该响应头可以指定允许来自特定URL的跨域请求，其值可以设置为任意URL或特定URL等。

代码语言：javascript复制header('Access-Control-Allow-Origin: http://localhost:8081');

var xhr = new XMLHttpRequest();

xhr.open('GET', 'http://localhost:8082/8082');

xhr.send();5.2 JSONP实现跨域请求JSONP：遵循浏览器的同源策略基础上实现跨域请求的一种方式。

原理：与XMLHttpRequest无关，是利用 6.3 PromisePromise是ES6新增的对象，用来传递异步操作的消息。

在代码层面，Promise解决了异步操作的“回调地狱”问题。

“回调地狱”是指，在一个异步操作执行完成后，执行下一个异步操作时，出现回调函数嵌套回调函数的情况。如果嵌套的层级过多，会导致代码可读性变差。

代码语言：javascript复制Setup.prototype.run = function() {

this.step1(function() {

this.step2(function() {

this.step3(function() {

// ……

});

});

});

};Ajax的onreadystatechange()就是一个异步操作，若需要在一个Ajax请求完成后，再发出另一个Ajax请求，就会出现回调函数嵌套情况。

利用Promise对象提供的语法对Ajax操作进行优化。

代码语言：javascript复制function xhr(options) {

return new Promise(function(resolve, reject) {

var xhr = new XMLHttpRequest();

xhr.open(options.type || 'GET', options.url);

xhr.onreadystatechange = function() {

if (xhr.readyState === XMLHttpRequest.DONE) {

if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {

resolve(xhr.responseText); // 成功时执行的函数

} else {

reject('服务器发生错误。'); // 失败时执行的函数

}

}

};

xhr.send(options.data);

});

}

var fd = new FormData();

fd.append('num', 100);

xhr({url: 'test.php', type: 'POST', data: fd})

.then(function(data) {

console.log('请求成功：' + data);

}, function(err) {

console.log('请求失败：' + err);

});

xhr({url: '1.txt', type: 'POST', data: fd})

.then(function(data) {

console.log('请求成功：' + data);

})

.catch(function(err) {

console.log('发生异常：' + err);

});

xhr({url: 'test.php', type: 'POST', data: fd})

.then(function(data) {

console.log('第1次请求结果：' + data);

return xhr({url: 'test.php', type: 'POST', data: fd});

})

.then(function(data) {

console.log('第2次请求结果：' + data);

})

.catch(function(err) {

console.log('发生异常：' + err);

});Fetch API

提出的原因：XMLHttpRequest对象的语法比较复杂。

作用：新版本的浏览器提出Fetch API，基于Promise语法，提高代码的可读性。

提示：由于Fetch API目前是一个实验中的功能，浏览器支持并不全面，因此不推荐在上线项目中使用。

代码语言：javascript复制fetch('test.php', {

method: 'POST',

headers: new Headers({

'Content-Type': 'text/plain'

})

}).then(function(response) {

// 处理响应结果

}).catch(function(err) {

// 处理错误

});6.4 WebSocketWebSocket：是HTML5新增的一个客户端与服务器异步通信的API。

作用：用于使浏览器支持WebSocket网络协议。

解决的问题： HTTP轮询。

HTTP轮询：客户端需要不断向服务器发送HTTP请求，询问服务器是否有新的消息，这种方式称为HTTP轮询。特点是其通信效率非常低。

解决办法：WebSocket实现了全双工通信，在建立连接后，服务器可以将新消息主动推送给客户端，这种方式实时性更强，效率更高。

代码语言：javascript复制// 创建WebSocket对象，连接服务器

var ws = new WebSocket('ws://127.0.0.1:2000');

// 当连接成功时执行的回调函数

ws.onopen = function() {

console.log('连接成功');

ws.send('Tom');

console.log('向服务端发送一个字符串：Tom');

};

// 当收到服务器消息时执行的回调函数，event是事件对象

ws.onmessage = function(event) {

console.log('收到服务器消息：' + event.data);

};

var ws = new WebSocket('ws://127.0.0.1:2000');

ws.onopen = function() {

console.log('连接成功');

};

ws.onmessage = function(e) {

console.log('收到服务器消息：' + e.data);

};