一、同步交互与异步交互
-
客户端想服务器端发送请求，直到服务器端进行响应，这个过程中，用户是不能做任何其他事情的(等)
-
客户端想服务端发送请求，直到服务端进行响应，这个过程中，用户是可以做其他事情的(不用等)
二、AJAX
-
asynchronous javascript and xml,直译中文-javascript和xml的异步
-
AJAX是一种用来改善用户体验的技术，其实质是，使用XMLHttpRequest对象异步地向服务器发请求
-
服务器返回部分数据，而不是一个完整的页面，以页面无刷新的效果更改页面中的局部内容
-
Ajax的核心对象
XMLHttpRequerst对象
-
获取XMLHttpRequest对象
function getXhr(){
var xhr = null; if(window.XMLHttpRequest){ //除IE外的其他浏览器 xhr = new XMLHttpRequest(); }else{ xhr = new ActiveXObject("Microsoft.XMLHttp"); } return xhr;}
-
属性
-
readyState 请求状态
0 尚未初始化
1正在发送请求
2请求完成
3请求成功，正在接受数据
4数据接收成功 -
status 请求响应值
200 表示请求成功
202 请求被接受但处理未完成
400 错误的请求
404 资源未找到
500 内部服务器错误，如asp代码错误等 -
responseText 服务器返回的文本
-
responseXML 服务器返回的xml，可以当做DOM处理
-
-
方法
open(method,url) - 与服务端建立连接
send() - 向服务器端发送请求
abort() - 取消请求
getAllResponseHeaders()
得到响应的所有http头getResponseHeader()
获取指定的http头setRequestHeader()
指定请求的Http头 -
事件
onreadystatechange事件
作用 - 监听服务端的通信状态改变当Ajax对象的readyState的值发生了改变，比如，从0变成了1，就会产生readystatechange事件
三、实现ajax的异步交互步骤
-
创建XMLHttpRequest核心对象
固定写法-独立编写 -
与服务区建立连接
使用XMLHttpRequest对象的open(method,url) -
向服务器发送请求
使用XMLRequest对象的send()方法
请求参数的格式 - key=value -
接受服务器响应的数据
使用XMLHttpRequest对象的readystatechange事件监听服务器端的通信状态 使用XMLHttpRequest对象的readyState属性，判断服务器端当前状态(0-4) 使用XMLHttpRequest对象的statue属性，判断服务器端的状态码(200) 使用XMLHttp对象的responseText属性，接受服务器端的响应数据
注意：get与post方式
get请求方式
send()方法不起作用，但是不能被省略
xhr.send(null) 请求参数，添加到url?key=value
post请求方式
必须要在send()方法调用之前，使用setRequestHeader()方法设置请求头，参数为key-value
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
application/x-www-form-urlencoded： 窗体数据被编码为名称/值对。这是标准的编码格式。
multipart/form-data： 数据被编码为二进制数据放到请求体中
四、课堂案例
1. ajax异步交互
2. post方式的ajax
3. 表单中使用ajax
4. 二级联动
5. ajax实现二级联动
五、URL
1. URL与URI
URL - 统一资源定位符
URI - 统一资源标识符
URL与URI的区别
所有的URL都是URI，但URI不一定是URL
2、完整的URL
1) 完整的url具有哪些元素
网络协议://IP地址：端口号/路径;参数?查询数据#锚点
网络协议 -
IP地址 - 每个电脑都有0.0.0.0每个
端口号 - 电脑开放给外部电脑访问接口
路径 - 相对路径和绝对路径
参数 - 某些方案会使用参数来指定输入参数
查询地址 -
key=value&key=value
锚点 -
2) 一般使用时：
http://www.baidu.com/news
http://137.0.0.1:8080?key=value
http://localhost:80#mylink
六、Http协议
1. 网络协议
客户端与服务端之间的协议
2. 主流协议
http、socket、ftp、pop3
3. http协议
1）多用与b/s架构
2）问题
短连接：每次客户端与服务端交互时，先建立连接，交互完毕后，关闭连接
无状态：服务端只能记得住当次请求状态
3）http:1.0 - 目前主流版本
http:1.1 - 较新版本(向下兼容)
http:2.0 - 最新版本
七、http请求协议
1. 客户端发送一个请求，应该有如下三个部分：
请求行: 请求方法、请求url 状态码、（http协议版本）
请求头部: 说明服务器要使用的附加信息
请求主体: 提交给服务器的请求数据
2. HTTP客户端请求内容详解
1）请求行 - 请求的信息
请求类型 - get、post
请求地址
如果是get请求，参数应该拼到url的后面url?key=value，但请求体为空
如果是post请求，url后面不拼参数，参数放在请求体中
状态码 - 服务器端的状态
2）请求头 - 反映给服务端的信息
格式为 key:value，key:value,...
accept - 表示浏览器可接受的MIME类型
accept-Encoding - 浏览器能够进行解码的数据编码方式
accept-language - 表示服务端接受的语言
zh-cn:简体中文
zh-tw:繁体中文
zh - 中文
us -英文
connection - 表示当前链接状态
keep-alive - 保持连接
host - 请求的服务器网址；
referer - 表示当前的请求来源
实现防盗链接
user-agent 获取到用户浏览器信息
cache-control -缓存控制
max-age 设置最大活动周期,设置缓存保存的最大时间的单位为秒，为0代表不缓存
cookie - 将cookie自动携带到请求头
content-type：互联网媒体类型；使用post请求必须设置这个属性
也叫做MIME类型，在Http协议消息头中，使用Content-Type来表示具体请求中的媒体类型信息。
<form>元素提交时默认的类型
一般文件上传时默认为application/x-www.form-urlencoded
Content-Length：请求内容的长度
对于POST请求来说Content-Length必须出现
3）请求体 - 存放请求参数
如果为post请求，有值，如果为get请求为空
八、http响应协议
1. 服务端给客户端响应信息，应该有如下三部分
响应行：协议版本 状态码 原因短语
响应头部：
响应主体： 返回给客户端的响应数据，可能是字符数据，也可能是字节数据
2. HTTP服务端响应内容详解
1）响应行
状态码
协议版本
2）响应头
Allow:服务器支持哪些请求方法
GET、POST
Content-Encoding 文档的编码(Encode)
Cache-Control: 告诉客户端，服务端的缓存配置
Connection - 表示当前的连接状态
keep-alive 表示保持连接
content-length 响应数据的长度（大小）
content-type - 响应数据的mime类型
一般情况下：text/html
Date - 当前响应的日期时间
keep-alive 设置保持连接的超时和最大存活时间
timeout=5 max=99
server - 服务器端的信息
3）响应体
服务器返回给客户端的数据主体
九、扩展内容
1. 请求类型
get/post/head/put/delete/options/trace
2. 标准API - 标准的请求方式
get - 获取数据
post - 修改数据
put - 新增数据
delete - 删除数据
3. 状态码
1XX - 服务器的信息
2XX - 表示请求成功
200：请求成功
201：成功创建连接
202：接受请求
3XX - 表示重定向
302：表示重定向
304：表示服务端资源没有变化，访问缓存
问题 - 这次请求没有真正低访问服务器端
305：使用代理
4XX - 客户端错误
400：错误的请求
404：网页找不到
403：拒绝访问
405：请求类型不允许
5XX - 服务端错误
500：服务端错误
502：路径错误
504：请求超时
505：http版本不支持
4. MIME类型 - 文件类型
MIME类型是如何定义的
//定义MIME类型
<mime-mapping>
//文件的扩展名
<extension>jpg</extension>
//对应的MIME类型
<mime-type>image/jpeg</mime-type>
</mime-mapping>
常见的MIME类型
html - text/html
htm - text/html
css - text/css
js - text/javascript
json - application/json
jpg - image/jpeg
text - text/plain
5. 请求参数
1）get请求类型
将请求数据 - url?key=value(浏览器地址)
安全性低
请求地址的长度是有限制的
请求数据中包含中文的话，需要转码
2）post请求类型
浏览器地址栏url，不包含请求类型
安全性相对比较高
对请求数据的长度没有要求
请求数据中包含中文的话，可以不转码，对中文的处理相对比较好
6. 控制HTTP头部方法
可以配置每个HTML文件的HTTP-EQUIV标签控制缓存
<meta http-equiv="Cache-Control" content="no-cache">
在PHP页面中控制响应头
header("Content-Type: image/jpeg");
十、缓存工作原理
-
客户端可以自动保存已经访问过的文档的副本，这些副本就成为“文档缓存”
-
当客户端再次发送针对同一个URL的请求时，如果本地有“已缓存的副本”，就可以直接从本地存储设备而不是远程服务器提取该文档了
-
数据缓存有下列优点
减少了冗余的数据传输，节省客户端流量费用
缓解服务器带宽瓶颈的问题，服务器可以节省出更多的带宽
降低了对服务器的资源消耗和运行要求
降低了由于远距离而造成的加载延时
缓存逻辑：
发送请求
判断是否有缓存
有缓存，判断是否过期，
如果不过期，跟服务器进行进行验证，判断是否最新的数据，如果不是，需要更新缓存，更新过以后从缓存获取
十一、http基本优化
网站性能优化最主要的就是要减少HTTP请求及每次响应中内容的长度。可以从连接过程中的下列方面加以考虑：
1、域名解析
尽可能减少域名解析次数——减少跨站外部资源的引用
2、创建连接
努力减少连接创建次数——使用Keep-Alive避免重复连接
3、发送请求
尽力减少请求次数——合理设置Expires时间、资源合并
4、等待响应
提高服务器端运行速度——提高数据运算及查询速度
5、接收响应
尽可能减小响应数据长度——启用压缩
十二、安全的HTTP协议
-
HTTP协议本质上属于“明文传输”，可能被窃听和篡改，政府、银行等机密应用需要需要“安全版本的HTTP”：http协议默认端口80
-
HTTPS协议将消息发送给TCP层之前，先交给了一个安全层(由SSL或TLS协议实现)，安全层负责对消息进行加密和解密操作。https协议默认端口443
一、接收服务器端的响应数据 -
使用XMLHttpRequest核心对象的responseText属性
该属性只能接受文本(HTML)格式
问题：
解析过程比较复杂，而且在拼串或拆串过程容易出错 -
XML格式的数据
-
json格式的数据
十三、XML
1. HTML/XHTML/DHTML/XML
HTML: 网页文档
XHTML:更严格的网页文档
DHTML:DOM|DOM
XML: 可扩展的标记语言，可用于配置文件|数据格式
2. XML的文件为.xml
3. XML的定义方式与HTML非常相似
HTML的元素都是预定义好的
XML允许自定义元素
4. XML版本
1.0版本 1.1版本，几乎没人使用
5. XML作用
作为数据格式-存储数据的地方
6. XML语法
1）声明
<?xml version="1.0" encoding="utf-8" ?>
version-设置XML文件的版本
encoding-设置XML文件的编码
声明必须出现在0行0列上
2）定义元素
根元素，必须是双标签，只能定义一个
定义元素，元素名可以自定义，既可以双标签也可以是单标签
练习：使用XML定义省份和城市信息
十四、DOM解析XML字符串
1. 创建DOM解析XML的解析器，解析器解析XML字符串
IE浏览器
var parser = new ActiveXObject("Microsoft.XMLDOM");
parser.async = false;
xmlDoc = parser.loadXML(xmlFile);
其他游览器
var parser = new DOMParser();
var xmlDoc = parser.parseFromString(xmlFile,"application/xml");
2. 解析XML元素与解析HTML元素一致
获取元素最常用的是getElementsByTagName很少使用ById和ByName
PS：
浏览器不允许读取外部的XML文件
浏览器解析符合XML格式的字符串
十五、Ajax的XML
1.请求的数据格式-XML
1）客户端如何构建XML格式的数据
构建的数据类型 - 字符串类型
字符串的内容要符合XML格式的语法要求
2）服务器端如何接受符合XML格式的数据
接收到的客户端的请求数据 - 字符串类型，php集成了DOM的相关内容
DOMDocument
DOMElement
DOMNode
2.响应的数据格式-XML
1）服务器端如何构建符合XML格式的数据
设置服务器端的响应头Content-Type值为text/xml
header("Content-Type:text/xml");
构建符合XML格式的数据内容
手动方式构建字符串内容
DOMDocument对象的方法
loadXML(符合XML格式的字符串)
saveXML()方式进行响应
2）客户端如何接受XML格式的数据
使用XMLHttpRequest对象的responseXML属性接收
接收到的就是XML DOM对象(不需要进行解析)
练习：二级联动(服务器端响应的格式为xml)
十六、json
1. JSON - javascript object notation(JS原生支持)
2. json数据格式源于js
3. 特点：
易于程序员阅读和编写
易于计算机解析和生成
json是目前网络上使用最广泛的数据格式之一
4. JSON的结构
Array和Object
支持的数据类型
字符串、数值、布尔值、对象、数组、null
十七、ajax中的json格式
1. 请求格式为json
客户端向服务器端发送请求为json格式的数据
构建符合JSON格式的字符串
定义字符串时，保证里面使用双引号，外面使用单引号
服务器端接受json格式的数据
使用json_decode()函数进行解析
json_decode($json,true);ture代表是否转换为数组
2. 响应格式为json
服务器端向客户发送响应为json格式的数据
手工方式构建json格式的字符串
使用json_encode()函数将php变量(数组)，转换成复合json格式的字符串
客户端接受json格式的数据
使用XMLHttpRequest对象的responseText属性接受
然后使用eval函数进行转换,如果使用()包裹，eval函数强制转换为js代码，
var json = eval("("+data+")");
十八、 HTML(文本)、XML格式、JSON格式的优缺点
HTML: 简单，但解析复杂
XML: 构建、解析复杂
JSON: 轻量级
网友评论