概述
第一部分 web数据交互技术概述（上午客观题）
1、Web基本概念
WWW （World Wide Web )：万维网，创建人：蒂姆.伯纳斯-李(Tim Berners-Less)
HTML(HyperText Markup Language)：超文本标记语言，1990年，蒂姆.伯纳斯-李及团队创建
HTTP(HyperText Transfer Protocol)：超文本传输协议
URL（Uniform Resource Locators）：统一资源定位符号
2、与后台交互技术有
- AJAX(Asynchronous Javascript and XML):异步Javascript和XML技术。无需重新加载整个网页的情况下，根据需要更新部分网页的技术。
- iframe：嵌入式框架。不需要加载整个页面，只需要加载一个框架页面（iframe中载入的页面）即可。
- WebSocket:一种网络通信协议，使用全双工(客户端和服务端都可以向对方传递数据)的通信方式。
- .......
WebSocket通信的优点：允许服务端主动向客户端推送数据。
Ajax的缺点：获取数据需要客户端主动向服务端发出请求，过量请求会加重服务端的负载。
AJAX优点：页面局部更新(往往仅需要更新少量的数据)，减少了数据传输量，页面显示更快，用户体验更好。
第二部分 HTTP概述（上午客观题）
1、概念
HTTP(HyperText Transfer Protocol)：超文本传输协议。
哪些内容属性超文本呢？
- HTML
- CSS
- Javascript
- 图片
- 音频
- 视频
- 文件
- ......
HTTP基于：客户端/服务端的架构模型(包括C/S架构和B/S架构)
2、HTTP的消息结构(记住每个部分的结构，顺序不能乱)
【客户端的请求消息】
第一部分：请求行
| 请求方法 | 空格 | URL | 空格 | 协议版本 | 回车符 | 换行符 |
请求方法：最常用GET和POST(记住)，其他了解
| 序号 | 方法 | 描述 |
| 1 | GET | 请求指定的页面信息，并返回实体主体。 |
| 2 | HEAD | 类似于 GET 请求，只不过返回的响应中没有具体的内容，用于获取报头 |
| 3 | POST | 向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。数据被包含在请求体中。POST 请求可能会导致新的资源的建立和/或已有资源的修改。 |
| 4 | PUT | 从客户端向服务器传送的数据取代指定的文档的内容。 |
| 5 | DELETE | 请求服务器删除指定的页面。 |
| 6 | CONNECT | HTTP/1.1 协议中预留给能够将连接改为管道方式的代理服务器。 |
| 7 | OPTIONS | 允许客户端查看服务器的性能。 |
| 8 | TRACE | 回显服务器收到的请求，主要用于测试或诊断。 |
| 9 | PATCH | 是对 PUT 方法的补充，用来对已知资源进行局部更新 。 |
URL:请求的URL地址
协议版本：
第二部分：请求头部
| 头部字段名 | : | 值 | 回车符 | 换行符 |
| ........ | ||||
| 头部字段名 | : | 值 | 回车符 | 换行符 |
格式为：“属性名：属性值”，可以有若干个部分
第三部分：空行
| 回车符 | 换行符 |
第四部分：请求数据
客户端的一些请求参数及对应的值
【服务端的响应消息】
第一部分：状态行
HTTP/1.1 200 OK
HTTP为协议名称，1.1为版本号，200和OK表示服务器成功响应了此次请求
第二部分：消息报头
由若干个“属性名:属性值”组成，
第三部分：空行
第四部分：响应正文
3、HTTP的特点
- 由客户端发先发起请求，再由服务端回头响应
- 简单快速:HTTP服务器程序规模小，通信速度快
- 灵活：允许传送任意类型的数据
- 无连接：每次连接只处理一个请求，处理请求并收到客户端响应后即断开连接
- 无状态：每次HTTP请求之间都是互相独立的
4、请求[消息头]常见信息
Accept: 浏览器可接受的MIME类型
Accept-Charset：浏览器可接受的字符集
Accept-Encoding: 浏览器能够进行解码的数据编码方式
Accept-Language: 浏览器所希望的语言种类
Cache-Control:是否使用缓存
Connection: 表示是否需要持久连接
Cookie:向服务器发送的Cookie信息
Host: 初始URL中的主机和端口
Pragma：指定“no-cache”值表示服务器必须返回一个刷新后的文档
Referer：包含一个URL，用户从该URL代表的页面出发访问当前请求的页面
User-Agent：浏览器类型
标记黄色背景的内容为重要内容，请重点掌握
MIME（Multipurpose Internet Mail Extensions）: 多用途互联网邮件扩展类型。
常见的MIME类型(通用型)：
超文本标记语言文本html： text/html
xml文档 .xml ：text/xml
XHTML文档 .xhtml ：application/xhtml+xml
普通文本.txt： text/plain
RTF文本 .rtf： application/rtf
PDF文档 .pdf ：application/pdf
Microsoft Word文件 .word ：application/msword
PNG图像 .png： image/png
GIF图形 .gif： image/gif
JPEG图形 .jpeg,.jpg ：image/jpeg
au声音文件 .au ：audio/basic
MIDI音乐文件 mid,.midi ：audio/midi,audio/x-midi
RealAudio音乐文件 .ra, .ram ：audio/x-pn-realaudio
MPEG文件 .mpg,.mpeg ：video/mpeg
AVI文件 .avi： video/x-msvideo
GZIP文件 .gz ：application/x-gzip
TAR文件 .tar ：application/x-tar
任意的二进制数据 ：application/octet-stream
5、服务器【响应头】常见信息
Content-Length：表示响应消息正文的长度
Content-Type：表示响应消息的类型
keep-Alive:缓存时间
Server:服务器的相关信息
6、服务器响应的【状态码】
| 状态码 | 含义 |
| 200 | 服务器响应成功，服务器找到了客户端请求的内容，并返回给了客户端 |
| 301 | 临时跳转(重定向)， |
| 302 | 永久性重定向，客户端请求跳转，服务器返回302允许，客户端然后跳转 |
| 304 | 服务器返回304，表示客户端资源请求成功，但资源就在客户端本地浏览器缓存中，不用到服务去获取 |
| 403 | 客户端没有权限获取请求的资源(被封IP等) |
| 404 | 请求资源没有找到 |
| 500 | 服务器端程序出错，请求的网页程序本身出错 |
第三部分 AJAX和iframe（主客观题都可能出现）
1、AJAX工作原理（理解）
AJAX发送请求时，需要指定以下参数：
- 要请求的资源，即URL地址
- 请求的方式，常用的有GET和POST（GET可能从本地缓存获取数据，POST只从服务器获取数据）
- 需要发送给服务器的数据，使用格式"名字=值&名字=值"的方式书写
- 可以接收的数据类型，让服务器返回给定格式的数据（HTML、JavaScript、JSON、XML 等）。常用text和JSON
- 接收服务器回传结果，success:function(re){}
2、JQuery的Ajax（熟练掌握）
使用jquery的 ajax语法通用格式：
$.ajax({
url:''请求的资源地址",
type:"POST|GET"，
data:"name1=value1&name2=value2",
dataType:"txt|JSON|JSONP"，
success:function(re){
//处理接收到的数据
},
error:function(){
//出错处理
}
});
更多用法见：https://www.w3school.com.cn/jquery/jquery_ajax_load.asp
https://www.w3school.com.cn/jquery/jquery_ref_ajax.asp
方式一：
$(selector).load(URL,data,callback);
URL:请求的服务器资源地址(必须)
data为{name1:vale1,name2:value2,...}（可选）
callback:为回调函数，请求成功后执行此函数（可选）,回调函数中可包括三个参数
参数1：responseTxt , 包含调用成功时的结果内容
参数2：statusTXT , 包含调用的状态
参数3：xhr ，包含 XMLHttpRequest 对象
方式二：
$.get(URL,callback);
URL：必须
callback:可选，同load
方式三：
$.post(URL,data,callback);
参数解析同load
方式四:(最常用)：详细参数解释见https://www.w3school.com.cn/jquery/ajax_ajax.asp
jQuery.ajax([settings])
| 参数 | 描述 |
| settings | 可选。用于配置 Ajax 请求的键值对集合。 可以通过 $.ajaxSetup() 设置任何选项的默认值。 |
async：默认值: true。默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false
beforeSend(XHR)：发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头
cache：默认值: true，dataType 为 script 和 jsonp 时默认为 false。设置为 false 将不缓存此页面
complete(XHR, TS)：请求完成后回调函数 (请求成功或失败之后均调用)。
contentType：默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型
context：这个对象用于设置 Ajax 相关回调函数的上下文。也就是说，让回调函数内 this 指向这个对象（如果不设定这个参数，那么 this 就指向调用本次 AJAX 请求时传递的 options 参数）。比如指定一个 DOM 元素作为 context 参数，这样就设置了 success 回调函数的上下文为这个 DOM 元素。
就像这样：
$.ajax({ url: "test.html", context: document.body, success: function(){
$(this).addClass("done");
}});
data：必须为 Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。
dataFilter：给 Ajax 返回的原始数据的进行预处理的函数。提供 data 和 type 两个参数：data 是 Ajax 返回的原始数据，type 是调用 jQuery.ajax 时提供的 dataType 参数。函数返回的值将由 jQuery 进一步处理。
dataType：可用值:
- "xml": 返回 XML 文档，可用 jQuery 处理。
- "html": 返回纯文本 HTML 信息；包含的 script 标签会在插入 dom 时执行。
- "script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 "cache" 参数。注意：在远程请求时(不在同一个域下)，所有 POST 请求都将转为 GET 请求。（因为将使用 DOM 的 script标签来加载）
- "json": 返回 JSON 数据 。
- "jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
- "text": 返回纯文本字符串
error: 默认值: 自动判断 (xml 或 html)。请求失败时调用此函数。
有以下三个参数：XMLHttpRequest 对象、错误信息、（可选）捕获的异常对象。
如果发生了错误，错误信息（第二个参数）除了得到 null 之外，还可能是 "timeout", "error", "notmodified" 和 "parsererror"。
ifModified: 仅在服务器数据改变时获取新数据。默认值: false。使用 HTTP 包 Last-Modified 头信息判断。在 jQuery 1.4 中，它也会检查服务器指定的 'etag' 来确定数据没有被修改过。
jsonp: 在一个 jsonp 请求中重写回调函数的名字。这个值用来替代在 "callback=?" 这种 GET 或 POST 请求中 URL 参数里的 "callback" 部分，比如 {jsonp:'onJsonPLoad'} 会导致将 "onJsonPLoad=?" 传给服务器。
password: 用于响应 HTTP 访问认证请求的密码
username: 用于响应 HTTP 访问认证请求的用户名。
AJAX函数(重点掌握几人加背景颜色的方法)
| 函数 | 描述 |
| jQuery.ajax() | 执行异步 HTTP (Ajax) 请求。 |
| .ajaxComplete() | 当 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。 |
| .ajaxError() | 当 Ajax 请求完成且出现错误时注册要调用的处理程序。这是一个 Ajax 事件。 |
| .ajaxSend() | 在 Ajax 请求发送之前显示一条消息。 |
| jQuery.ajaxSetup() | 设置将来的 Ajax 请求的默认值。 |
| .ajaxStart() | 当首个 Ajax 请求完成开始时注册要调用的处理程序。这是一个 Ajax 事件。 |
| .ajaxStop() | 当所有 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。 |
| .ajaxSuccess() | 当 Ajax 请求成功完成时显示一条消息。 |
| jQuery.get() | 使用 HTTP GET 请求从服务器加载数据。 |
| jQuery.getJSON() | 使用 HTTP GET 请求从服务器加载 JSON 编码数据。 |
| jQuery.getScript() | 使用 HTTP GET 请求从服务器加载 JavaScript 文件，然后执行该文件。 |
| .load() | 从服务器加载数据，然后把返回到 HTML 放入匹配元素。 |
| jQuery.param() | 创建数组或对象的序列化表示，适合在 URL 查询字符串或 Ajax 请求中使用。 |
| jQuery.post() | 使用 HTTP POST 请求从服务器加载数据。 |
| .serialize() | 将表单内容序列化为字符串。 |
| .serializeArray() | 序列化表单元素，返回 JSON 数据结构数据。 |
3、JS原生AJAX（熟练掌握）
步骤1：建立xmlHttpRequest对象
所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均支持XMLHttpRequest 对象，而IE5 和 IE6 使用 的是ActiveXObject。
var xmlHttp=null;
if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
//针对某些特定版本的mozillar浏览器的BUG进行修正
if(xmlHttp.overrideMimeType){
xmlHttp.overrideMimeType("text/xml");
}
}else if(window.ActiveXobject){
var activeName =["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
for(var i=0; i<activeName.length; i++){
try{
xmlHttp = new ActiveXObject(activeName[i]);
break;
}catch(e){
}
}
}
if(!xmlHttp){
alert("创建xmlhttprequest对象失败");
}else{
}
步骤2：设置回调函数
xmlHttp.onreadystatechange= callback;
function callback(){}
步骤3：使用OPEN方法与服务器建立连接
xmlHttp.open("get", "ajax?name="+ name, true)
此步注意设置http的请求方式（post/get）,如果是POST方式，注意设置请求头信息xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
步骤4：向服务器端发送数据
xmlHttp.send(null);
如果是POST方式就不能为null
步骤5：在回调函数中针对不同的响应状态进行处理
if(xmlHttp.readyState == 4){
//判断交互是否成功
if(xmlHttp.status == 200){
//获取服务器返回的数据
//获取纯文本数据
var responseText =xmlHttp.responseText;
document.getElementById("info").innerHTML = responseText;
}
}
readyState属性：表示请求/响应过程的当前阶段
0：未初始化。尚未调用 open()方法。 1：启动。已经调用 open()方法，但尚未调用 send()方法。 2：发送。已经调用 send()方法，但尚未接收到响应。 3：接收。已经接收到部分响应数据。 4：完成。已经接收到全部响应数据，而且已经可以在客户端使用了。
status属性：响应的 HTTP 状态码 200：响应成功 301：永久重定向/永久转移 302：临时重定向/临时转移 304：本次获取内容是读取缓存中的数据 400：请求参数错误 401：无权限访问 404：访问的资源不存在
4、json字符串置换成js对象
- 方式一：JSON.parse()
- 方式二：eval()
语法格式：str为json格式字符串
eval('('+str+')');
通过 eval 来转化，如果返回的字符串内容是一个数组，可以直接转化，如果返回的字符串内容是一个对象，必须在字符串的前后加上()
- eval方法不会去检查给的字符串是否符合json的格式，而JSON.parse解析不满足json格式的字符串时，会报错
- 如果给的字符串中存在js代码eval也会一并执行，比如下面的代码段
故：推荐用JSON.parse()方式
5、使用js操作iframe
步骤1：
页面中使用iframe标签，可设置id(如ifr)
步骤2：
设置请求服务器的按钮或表单，并绑定事件处理函数(如：οnclick="sendMessage();")
步骤3：
编写事件处理函数
function sendMessage(){
//获取用户名
var username=document.getElementById("username").value;
//获取密码略
//拼接成合法的url请求路径,如
var url="do.php?username="+username+"&password="+password;
//do.php是请求的文件，使用相对路径，也可以是完整的带http://xxxx:xx/xxx/xx.php类似的路径
//?后面传递的是参数
document.getElementById("iframe的id").src=url;
}
这样，当点击按钮或表单时，执行sendMessage函数，向do.php发送请求(同时带上数据)，do.hph响应后，会把返回的数据写入iframe标签内部，不会更新页面的其他部分，从而达到异步刷新的效果。
do.php是处理请求的php文件，也可以是java的action或servelet映射的路径
do.php文件的内容一般如下：
<?php
//使用get方式获取前端传递来的数据
$name=$_GET['username'];
$password=$_GET['password'];
//向请求页面输出结果
var_dump($name,$password);
? >
6、使用query操作iframe
步骤1：同上
步骤2：同上
步骤3：
function sendMessage(){
//获取帐号, $("[name='username']")仅仅是获取到dom元素的方式之一，val()是取出输入框的值
var username=$("[name='username']").val();
//获取密码,略
var url="do.php?username="+username+"&password="+password;
//do.php是请求的文件，使用相对路径，也可以是完整的带http://xxxx:xx/xxx/xx.php类似的路径
//?后面传递的是参数 ，使用attr函数设置属性src的值
$("#ifr").attr("src",url);
}
php连接数据库并插入数据
<?php
//使用get方式获取前端传递来的数据
$name=$_GET['username'];
$content=$_GET['content'];
//连接数据库
$pdo=new PDO('mysql:host=localhost;dbname=php','root','123456');
//定义sql语句,点.是php中字符串的连接符号，不是用加+
$sql="insert into token(name,content,pubtime) value('".$name."','".$content."','".time()."')";
//执行插入 exec
$re=$pdo->exec($sql);
//向请求页面输出执行结果
var_dump($re);
? >
7、使用AJAX实例
前台通过点击按钮向后台请求类型typeid为1的新闻数据
数据库新闻表news中有若干条记录如下:
| Id | typeid | title | content | addtime | |
| 主健 | 类型id | 标题 | 内容 | 添加时间 |
前台ajax代码类似如下：
function func(){
$.ajax({
url:"getNews.php",
type:"get",
data:"typeid=1",
datatype:"json",
success:function(re){
for(var i in re){
//仅获取了title数据，其他数据获取类似
$("#showContent ul").append("<li>"+re[i].title+"</li>");
}
}
});
}
后台php代码类似如下：
<?php
$typeid=$_GET['typeid'];
$pdo=new PDO('mysql:host=localhost;dbname=php','root','123456');
//定义sql语句,limit 8仅获取前8条数据
$sql="select * from news where typeid={$typeid} limit 8";
//执行查询query,返回查询结果到$pdoS
$pdoS=$pdo->query($sql);
//把结果集$pdoS中的数据取出放到数组$arr中
// PDO::FETCH_ASSOC返回一个索引为结果集列名的数组
// fetchAll取出所有行
$arr=$pdoS->fetchAll(PDO::FETCH_ASSOC);
//使用echo输出到请求方法的回调函数success:function(re)中，
//通过re去获取数据
json_encode把数组转换成json字符串
echo json_encode($arr);
? >
第四部分 页面性能优化技术(上下午都可)
1、原生 js使用cookie技术
【创建cookie】
var Days = 30;
var exp = new Date();
exp.setTime(exp.getTime() + Days*24*60*60*1000);
//主要内容，名称=值;expires=过期时间
document.cookie = name + "="+ value+ ";expires=" + exp.toGMTString();
【查找cookie】
关键两次切分split，第一次找出;前面的内容，第二次找出=左右的内容
function getcookie(name){
var keys=document.cookie.split(";");
var temp=null;
for(var i=0;i<keys.length;i++){
var t=keys[i].split("=");
if (key[0]==name){
temp=t[1];
break;
}
}
return temp;
}
【删除cookie】
关键点，设置过期时间为过去的时间
function delcookie(name){
var exp = new Date();
exp.setTime(exp.getTime()-1);//设置时间为过去即删除
var cval=getcookie(name);//使用前一函数，先查找
if(cval!=null)
document.cookie= name + "="+cval+";expires="+exp.toGMTString();
}
2、php中使用cookie技术
【创建】
<?php
//参数分别为cookie的名字，值和过期时间，作用目录(/服务器的根目录)
$re=setcookie('name','value',time()+30*60,'/');
var_dump($re);
? >
本质是由服务端告诉客户端，让客户端进行创建的，并把数据保存在客户端
【使用】
<?php
//获取名字为name的cookie
$re=$_COOKIE(['name']);
var_dump($re);
? >
当客户端向服务器发送请求 时，如果发现本地有一个cookie信息，则会自动把cookie信息保存在请求头(前面有介绍)中一起发送给服务器.
【删除】
php
//本质设置过期时间为下一秒或当前时间之前的一个时间
$re=setcookie('name',null,time()+1,'/');
var_dump($re);
? >
3、页面性能优化
- 减少http请求次数
- 制作图片地图，页面中包括所有的背景图片，允许一个图片关联多个URL，即将多个图片合并为一个图片
- 使用雪碧图，使用CSS的background-position来定位图片的某个具体部分，这样可以把多个小图片合并为一个大图片
- 合并Javascript和CSS文件，直接减少请求次数
- 充分利用浏览器缓存
- 静态资源与动态资源分离，即通过不同的域名访问
静态资源是源代码永远不变的部分
动态资源是多次访问时，源代码可能会变化的部分
进行拆分后，可以对静态资源做缓存策略
第五部分 Socket通信（上下午都可）
1、概念
两个程序通过双向连接交换数据，一端被称为一个socket
socket是双向的长连接
双方至少一方主动断开连接，才会中断通信
socket可以使用TCP(传输控制协议)来实现，也可以使用UDP(数据报协议)来实现，一般使用TCP协议。
2、实例(原理及相关函数见图)：
详细完整聊天室代码，参见中级（下册教程p36-41）
最后
以上就是忧虑太阳为你收集整理的Bootstrap第一部分 web数据交互技术概述的全部内容，希望文章能够帮你解决Bootstrap第一部分 web数据交互技术概述所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复