网站建设管理考核办法,手机英语学习网站触屏版手机wap用户登陆注册网站模板115,天津塘沽爆炸电影,怎样黑网站1 Web基础知识
1.1 Web服务器
Web服务器又称为网站服务器#xff0c;主要用于提供网上信息浏览服务。常见的Web服务器软件有Apache HTTP Server#xff08;简称Apache#xff09;、Nginx等。
浏览器与服务器交互
在Web服务器中#xff0c;请求资源又分为静态资源和动态…1 Web基础知识
1.1 Web服务器
Web服务器又称为网站服务器主要用于提供网上信息浏览服务。常见的Web服务器软件有Apache HTTP Server简称Apache、Nginx等。
浏览器与服务器交互
在Web服务器中请求资源又分为静态资源和动态资源。静态资源的特点只要服务器没有修改这些文件客户端每次请求到的都是同样的内容。动态资源的特点是内容可以动态发生变化每次请求都需要计算处理。 服务器端Web开发常用的技术有哪些PHP、Java、ASP.NET、node.js 1.2 HTTP协议
HTTPHyperText Transfer Protocol全称为超文本传输协议。用于规范客户端和服务器之间以指定的格式进行数据交互。
HTTP是一种基于“请求”和“响应”的协议。
当客户端与服务器建立连接后
客户端浏览器向服务器端发送一个请求这个请求称为HTTP请求。服务器接收到请求后做出响应称为HTTP响应。
如何查看HTTP消息借助浏览器的开发者工具。操作步骤
① 打开开发者工具。② 切换到Network选项。③ 刷新网页。
HTTP协议
General表示基本信息。Response Headers表示响应头。Request Headers表示请求头。单击Response Headers或Request Headers右边的view source可以查看消息头的源格式。
1.2.1 请求消息
请求行请求头实体内容
// 请求行
// GET / HTTP/1.1
// 请求头
// Host: www.itheima.com
// Connection: keep-alive
// User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML,…
// Upgrade-Insecure-Requests: 1
// Accept: text/html,application/xhtmlxml,application/xml;q0.9,image/webp,image/ …
// Accept-Encoding: gzip, deflate
// Accept-Language: zh-CN,zh;q0.9// 请求行
// POST /form.php HTTP/1.1
// 请求头
// Host: localhost
// Content-Type: application/x-www-form-urlencoded
// Content-Length: 20
// 请求实体
// userJimpass123456请求行的组成
请求方式有许多种如GET是浏览器打开网页默认使用的方式其他常用的还有POST方式。请求资源路径是指URL地址中域名右边包括参数的部分例如“/admin/save.php?id1”。HTTP版本如HTTP/1.1、HTTP/1.0 注请求行各组成部分之间使用空格隔开。 请求头
请求头的作用请求头位于请求行之后主要用于向服务器传递附加消息。请求头的组成都是由头字段名称和对应的值构成中间用冒号“:”和空格分隔。举例浏览器可接受的数据类型、压缩方式、语言以及系统环境。
实体内容
内容编码利用请求头Content-Type描述。编码格式按照form标签的enctype属性来设定。默认值为application/x-www-form-urlencoded。文件上传为multipart/form-data。内存长度利用请求头Content-Length描述。
1.2.2 响应消息
响应状态行响应头实体内容
// 响应状态行
// 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// 实体内容
// !DOCTYPE html
// htmlbody/body/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普通文本.txtimage/gifGIF图像.giftext/xmlXML文本.xmlimage/pngPNG图像.pngtext/htmlHTML文本.htmlimage/jpegJPEG图像.jpegtext/cssCSS文本.cssapplication/javascriptJavaScript程序.js
浏览器会根据服务器响应的不同MIME类型采取不同的处理方式。
遇到普通文本时直接显示。遇到HTML时渲染成网页。遇到GIF、PNG、JPEG等类型时显示为图像。
如果浏览器遇到无法识别的类型时在默认情况下会执行下载文件的操作。
2 Web服务器搭建
2.1 前后端交互
Web开发分为前端和后端。前端是面向用户的一端即浏览器程序开发。后端则为前端提供服务即服务器端程序开发。在动态网站中许多功能是由前后端交互实现的。例如用户注册和登录、发表评论、查询积分、余额等。这些操作可分为两类一类是向服务器提交数据表单交互一类是向服务器查询数据 URL参数交互。
表单交互
表单交互是指在HTML中创建一个表单用户填写表单后提交给服务器服务器收到表单后返回处理结果。
URL参数交互
URL参数经常用于浏览器向服务器提交一些请求信息。
3 Ajax入门
3.1 什么是Ajax
AjaxAsynchronous JavaScript And XML异步JavaScript和XML技术。
描述不是一门新的语言或技术是由JavaScript、XML、DOM、CSS等多种已有技术组合而成的一种浏览器端技术。
功能用于实现与服务器进行异步交互的功能。
Ajax相对于传统的Web应用开发区别 传统Web工作流程 Ajax工作流程
相较于传统网页使用Ajax技术的优势具体有以下几个方面。
减轻服务器的负担节省带宽用户体验更好
3.2 创建Ajax对象
创建Ajax对象 W3C标准 var xhr new XMLHttpRequest();早期IE浏览器 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向服务器发送请求 创建一个新的HTTPopen()方法 open(method, URL [, asyncFlag [, userName [, password]]])method用于指定请求方式如GET、POST不区分大小写。 URL表示请求的地址。 asyncFlag可选参数用于指定请求方式同步请求为false默认为异步请求true。 userName和password可选参数表示HTTP认证的用户名和密码。 设置HTTP请求头setRequestHeader()方法 setRequestHeader(haeder, value)参数都为字符串类型。 header表示请求头字段。 value为该字段的值。 此方法必须在open()方法后调用。 向Web服务器发送请求并接收响应send()方法 send(content)content用于指定要发送的数据其值可为DOM对象的实例、输入流或字符串一般与POST请求类型配合使用。 注意如果请求声明为同步该方法将会等待请求完成或者超时才会返回否则此方法将立即返回。
在进行Ajax开发时经常使用GET方式或POST方式发送请求。
GET方式适合从服务器获取数据。POST方式适合向服务器发送数据。需要设置内容的编码格式告知服务器用什么样的格式来解析数据。
Ajax对象发送请求的方法。
// GET
var xhr new XMLHttpRequest(); // 创建Ajax对象
xhr.open(GET, test?a1b2); // 建立HTTP请求
xhr.send();// POST
var xhr new XMLHttpRequest();
xhr.open(POST, test?a1b2);
xhr.setRequestHeader(Content-Type, application/x-www-form-urlencoded);
xhr.send(c3d4);同步请求与异步请求
Ajax对象open()方法的第3个参数用于设置同步请求和异步请求。两种方式的区别在于是否阻塞代码的执行。 异步方式默认是非阻塞的浏览器端的JavaScript程序不用等待Web服务器响应可以继续处理其他事情。当服务器响应后再来处理Ajax对象获取到的响应结果。 同步方式是阻塞的当Ajax对象向Web服务器发送请求后会等待Web服务器响应的数据接收完成再继续执行后面的代码。 由于同步请求的Ajax导致程序阻塞会对用户体验造成不利影响因此通常情况下不推荐使用同步请求。 3.4 处理服务器返回的信息 获取Ajax的当前状态readyState属性 readyState属性用于获取Ajax的当前状态状态值有5种形式。 状态值说明解释0未发送对象已创建尚未调用open()方法1已打开open()方法已调用此时可以调用send()方法发起请求2收到响应头send()方法已调用响应头也已经被接收3数据接收中响应体部分正在被接收。responseText将会在载入的过程中拥有部分响应数据4完成数据接收完毕。此时可以通过responseText获取完整的响应 另外Ajax状态的还可以通过“XMLHttpRequest.属性名”的方式获取。 XMLHttpRequest.UNSENT; // 对应状态值0
XMLHttpRequest.OPENED; // 对应状态值1
XMLHttpRequest.HEADERS_RECEIVED; // 对应状态值2
XMLHttpRequest.LOADING; // 对应状态值3
XMLHttpRequest.DONE; // 对应状态值4感知Ajax状态的改变onreadystatechange事件属性 onreadystatechange事件属性用于感知readyState属性状态的改变每当readyState的值发生改变时就会调用此事件。 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如何处理服务器返回的信息。 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编码。 var str encodeURIComponent(AB C);
var url http://xxx/test?name str;
// 输出结果http://xxx/test?nameA%26B%20C
console.log(url); “”被转换为“%26”。 空格被转换为“%20”。 当服务器收到已编码的内容之后会对其进行解码从而正确识别这些特殊字符。 对于已经编码的字符串可以使用decodeURIComponent()进行解码。 var str A%26B%20C;
// 输出结果AB C
console.log(decodeURIComponent(str));4 数据交换格式
前后端应用程序在进行数据交换时如何确保它们都能识别
约定一种格式确保通信双方都能够正确识别对方发送的信息。
4.1 XML数据格式
XMLeXtensible Markup Language可扩展标记语言。
与HTML都是标签语言XML主要用于描述和存储数据可以自定义标签。
!-- XML的声明 --
!-- version表示XML的版本是声明中必不可少的属性且必须放在第1位 --
!-- encoding用于指定编码 --
?xml version1.0 encodingutf-8 ?
!-- 开始标签 --
booklistbookname三国演义/nameauthor罗贯中/author/bookbookname水浒传/nameauthor施耐庵/author/book
!-- 结束标签 --
/booklist当服务器返回的是一个XML格式的数据时利用Ajax对象的responseXML属性即可对XML数据进行处理。
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); // 方式1console.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格式的数据交互实现。
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); // 查看服务器返回数据的类型stringeval(var obj xhr.responseText); // 用eval()函数将字符型转成对象console.log(obj.name); // 输出结果Tomconsole.log(obj.age); // 输出结果24*/}
};
xhr.setRequestHeader(Content-Type, application/x-www-form-urlencoded);
xhr.send(json encodeURIComponent(json));eval()函数
JavaScript中的eval()函数可将传入的字符串当做JavaScript代码执行。
console.log(typeof xhr.responseText); // 查看服务器返回数据的类型string
eval(var obj xhr.responseText); // 用eval()函数将字符型转成对象
console.log(obj.name); // 输出结果Tom
console.log(obj.age); // 输出结果24eval()在设置参数时如果传入的字符串不合法会导致后面的代码也不执行所以一般情况下不推荐使用它。 5 跨域请求
5.1 Ajax跨域问题
域Domain是指网络中独立运行的单位。从网络安全角度来看域是安全的边界每个域都有自己的安全策略不同域之间是隔离的除非建立信任关系否则无法互相访问。
A网站 - 利用Ajax读取用户在B网站中的余额 - B网站
A网站 - 通过Ajax向A网站发送修改密码的请求 - B网站跨域请求会导致网页失去安全性因此浏览器阻止跨域请求。
浏览器如何解决跨域问题带来的危害。
遵循同源策略同源是指请求URL地址中的协议、域名和端口都相同。
非同源的URL地址
问题URL-1URL-2域名不同http://www.example.com/1.htmlhttp://api.example.com/1.html协议不同http://www.example.com/1.htmlhttps://www.example.com/1.html端口不同http://www.example.com/1.htmlhttp://www.example.com:8080/1.html
浏览器遵循“同源策略”带来的问题给网站正常的跨域需求带来了难题。
解决办法之一为使受信任的网站之间能够跨域访问HTML5提供了一个新的策略就是Access-Control-Allow-Origin响应头。目标服务器通过该响应头可以指定允许来自特定URL的跨域请求其值可以设置为任意URL或特定URL等。
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无关是利用 script 标签的src属性实现了跨域请求。
在浏览器中 哪些标签可以加载跨域资源script、img、iframe、link 等标签。 JSONP之所以采用 script 标签是因为该标签加载的资源可以直接当做JavaScript代码执行只要通过服务器端的配合就可以传送数据。 JSONP跨域请求。 JSONP本质上是加载了其他网站的脚本这种方式存在安全风险因为其他网站可以利用JavaScript窃取用户信息或更改页面内容。因此在加载脚本前一定确保对方是受信任的网站。 自动生成JSONP回调函数名
实际开发使用以上的方式实现JSONP跨域请求还存在以下两点不足。
回调函数的函数名test()会污染全局作用域。当需要发送多个JSONP请求时无法区分每个回调函数。
为了解决这两个问题我们可以编写代码实现自动生成一个随机的回调函数名并在请求时将函数名传递给服务器服务器在返回结果中调用指定的函数。
function jsonp(url, callback) {var name jsonp Math.random().toString().replace(/\D/g, );window[name] callback;var script document.createElement(script);var attr document.createAttribute(src);attr.value url ?callback name;script.setAttributeNode(attr);document.body.appendChild(script);
};
jsonp(http://localhost:8082/test, function(data) {console.log(data);
});6 扩展技术
6.1 Cookie
Cookie或称为Cookies指某些网站为了辨别用户身份、进行会话Session跟踪而储存在客户端上的数据。
相关的响应头Set-Cookie字段
特点下次请求该网站时浏览器会将Cookie数据放入请求头中的Cookie字段服务器收到这段数据即可辨认用户状态。 Cookie是根据域名、路径等参数存储的不同网站的Cookie相互隔离从而保证数据的安全性。 6.2 FormData
Ajax向服务器发送数据时如何收集表单中的数据
以前的方法通过DOM操作手动获取用户在表单中填写的值。
缺点表单中的数据非常多时使用此方式将会给开发和维护带来许多麻烦。
HTML5提供的方法FormData表单数据对象。
使用方式new FormData()实例化并传入 form 表单对象即可。
在创建FormData对象后可在调用Ajax对象的send()方法时作为参数传入从而将表单数据发送给服务器。
form idform姓名input typetext namenamebr密码input typepassword namepasswordbr邮箱input typetext nameemailbrinput typesubmit value提交
/form
scriptdocument.getElementById(form).onsubmit function() {var fd new FormData(this);var xhr new XMLHttpRequest();xhr.open(POST, test.php);xhr.send(fd);return false; // 阻止表单默认的提交操作};/*var fd new FormData();fd.append(name, value);*/
/script6.3 Promise
Promise是ES6新增的对象用来传递异步操作的消息。
在代码层面Promise解决了异步操作的“回调地狱”问题。
“回调地狱”是指在一个异步操作执行完成后执行下一个异步操作时出现回调函数嵌套回调函数的情况。如果嵌套的层级过多会导致代码可读性变差。
Setup.prototype.run function() {this.step1(function() {this.step2(function() {this.step3(function() {// ……});});});
};Ajax的onreadystatechange()就是一个异步操作若需要在一个Ajax请求完成后再发出另一个Ajax请求就会出现回调函数嵌套情况。 利用Promise对象提供的语法对Ajax操作进行优化。 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目前是一个实验中的功能浏览器支持并不全面因此不推荐在上线项目中使用。
fetch(test.php, {method: POST, headers: new Headers({Content-Type: text/plain})
}).then(function(response) {// 处理响应结果
}).catch(function(err) {// 处理错误
});6.4 WebSocket
WebSocket是HTML5新增的一个客户端与服务器异步通信的API。
作用用于使浏览器支持WebSocket网络协议。
解决的问题 HTTP轮询。
HTTP轮询客户端需要不断向服务器发送HTTP请求询问服务器是否有新的消息这种方式称为HTTP轮询。特点是其通信效率非常低。
解决办法WebSocket实现了全双工通信在建立连接后服务器可以将新消息主动推送给客户端这种方式实时性更强效率更高。
// 创建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);
};r) { // 处理错误 });
### 6.4 WebSocketWebSocket是HTML5新增的一个客户端与服务器异步通信的API。作用用于使浏览器支持WebSocket网络协议。解决的问题 HTTP轮询。HTTP轮询客户端需要不断向服务器发送HTTP请求询问服务器是否有新的消息这种方式称为HTTP轮询。特点是其通信效率非常低。解决办法WebSocket实现了全双工通信在建立连接后服务器可以将新消息主动推送给客户端这种方式实时性更强效率更高。js
// 创建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);
};
