1 HTTP协议
1.0 HTTP定义和版本
(HyperText TransferProtocol,超文本传输协议)是因特网上应用最为广泛的一种网络传输协议,所有的WWW文件都必须遵守这个标准。该协议是一个基于TCP/IP通信协议来传递数据(HTML 文件, 图片文件, 查询结果等)。HTTP教程
客户端->服务器www.163.com:GET/specials/saw-blade.gif HTTP/1.1;Host:www.163.com;
服务器www.163.com->客户端:HTTP/1.1 200 OK; Content-Type:text/html; charset=GBK; 'HTML片段'
1.1 HTTP版本:
- HTTP/0.9
- 1991年,HTTP的原型,有很多设计缺陷;
- HTTP/1.0
- 很快取代了HTTP/0.9,成为了第一广泛使用的版本;
- HTTP/1.0+
- 添加了持久的keep-alive连接,虚拟主机支持,以及代理连接支持,成为非官方的事实标准
- HTTP/1.1
- 矫正了结构性缺陷,明确语义,引入重要的性能优化措施,删除不好的特性,是当前使用的版本。
1.2 请求报文
---
GET music.163.com HTTP/1.1
---
Accept:text/html,application/xhtml+html,application/xml;q=0.9,image/webp,*/*;q=0.8
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8,zh-CN;q=0.6,zh;q=0.4
Cache-Control:no-cache
Connection:keep-alive
Cookie:visited=true;playlist=65117392DNT:1
Host:music.163.com
Pragma:no-cache
User-Agent:Mozilla(windows NT 6.1;WOW64)AppleWebKit/537.26(KHTML,like Gecho)Chrome/41.0.2272.118 safari/537.36
---
...
---
1.3 响应报文
---
HTTP/1.1 200 OK
---
Cache-Control:no-cache
Cache-Control:no-store
Connection:keep-alive
Content-Encoding:gzip
Content-Language:en-US
Content-Type:text/html;charset=utf8
Date:Fri,17 Apr 2015 01:48:12 GMT
Expires:Thu,01 Jan 1970 00:00:00 GMT
Pragrma:no-cache
Server:nginx
Transfer-Encoding:chunked
Vary:Accept-Encoding
---
<!DOCTYPE html><html><head>...</head><body>...</body></html>
---
1.4 常用的HTTP方法
方法 | 描述 | 是否包含主体 |
---|---|---|
GET | 从服务器获取一份文档 | 否 |
POST | 向服务器发送需要处理的数据 | 是 |
PUT | 将请求的主体部分存储在服务器上 | 是 |
DELETE | 从服务器上删除一份文档 | 否 |
HEAD | 只从服务器获取文档的首部 | 否 |
TRACE | 对可能经过代理服务器传送到服务器上去的报文进行追踪 | 否 |
OPTIONS | 决定可以在服务器上执行哪些方法 | 否 |
1.5 URL的构成
http://www.163.com:8080/index.html?r=admin&lang=zh-CN#news
- 上面的URL可以分解如下:
- protocol:
http:
- host:
www.163.com:8080
- hostname:
www.163.com
- port:
:8080
- hostname:
- pathname:
/index.html
- search:
r=admin&lang=zh-CN
- hash:
#news
- protocol:
1.6 常见的HTTP状态码
状态码 | 描述 | 原因短语 |
---|---|---|
200 | 请求成功。一般用于GET和POST方法 | OK |
301 | 资源移动。所请求资源自动到新的URL,浏览器自动跳转到新的URL | Moved Permanently |
304 | 未修改。所请求资源未修改,浏览器读取缓存数据 | Not Modified |
400 | 请求语法错误,服务器无法理解 | Bad Request |
404 | 未找到资源,可以设置个性“404页面” | Not Found |
500 | 服务器内部错误 | Internal Server Error |
2 Ajax
2-0 Ajax的概念
Ajax(Asynchronous JavaScript and XML)是由Jesse James Garrett编写出来的,是web交互中进行异步的数据交换的工具。
2-A Ajax通信流程
- 初始
- readyState: 0
- status:
- responseText:
- OPEN()-->开启一个请求
- readyState: 1
- status:
- responseText:
- Send()-->发送一个请求
- readyState: 2
- status:
- responseText:
- 开始返回数据
- readyState: 3
- status:
- responseText:
- 请求结束
- readyState: 4
- status: 200
- responseText:
2-B Ajax方法解析
/* Ajax使用方法 */
//创建XHR对象
var xhr = new XMLHttpRequest();
//返回数据处理函数
xhr.onreadystatechange = function(callback){
if(xhr.readyState ==4){
if((xhr.status >=200 && xhr.status <300)||xhr.status ==304){
callback(xhr.responseText);
}else{
alert('Request was unsuccessful:' + xhr.status);
}
}
}
//发送请求
xhr.open('get','example.json',true);
xhr.setRequestHeader('myHeader','myValue');
xhr.send(null);
/* open() 详解 */
xhr.open(method,url[source|./source][,async = true]);
//其中method可以是[GET|post|DELEte|HEADj|OPTIONS|PUT],但是不能为[CONNECT|TRACE|TRACK]
//其中url可以是[source|./source|../source]
/* setRequestHeader() 详解 */
xhr.setRequestHeader(header,value);
//其中header--->Content-Type
//其中value--->application/x-www-form-unlencoded,multipart/form-data
/* send() 详解 */
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
//由于是get请求,所以这里send为空
xhr.send([data = null]);
//如果是put或者POST请求,则send为FormData的字符串
xhr.send('FormData')//FormData='application/x-www-form-urlencoded'
2-C Ajax调用实例
虽然不明白为什么本地调用Ajax一定要搭一个运行环境。还是得搭呀!!
安装了Appsever,把ajax文件放到C:AppServwww
中再调用,就可以了。
/* 获取example.json文件 */
// html
<input type="button" value='ajax' onclick='clickHandler("data.txt","dataDiv")'>
<div id="dataDiv">
<p>here show ajax data!</p>
</div>
// js
function clickHandler(url,obj) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if((xhr.status >=200 && xhr.status <300)||xhr.status == 304){
show(xhr.responseText);
}else{
alert('Request was unsuccessful:'+ xhr.status);
}
}
}
function show (xhrr) {
var xhrT = document.createElement('div');
xhrT.innerHTML = xhrr;
document.getElementById(obj).appendChild(xhrT);
}
xhr.open('get',url,true);
xhr.send(null);
}
一般过程
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(callback){
if(xhr.readyState == 4){
if((xhr.status >=200 && xhr.status <300)||xhr.status == 304){
callback(xhr.responseText);
}else{
alert('Request was unsuccessful:'+ xhr.status);
}
}
}
xhr.open('get','example.json',true);
xhr.setRequestHeader('myHeader','myValue');
xhr.send(null);
/* 请求参数序列化 */
xhr.open('get','example.json?'+'name1=value1&name2=value2',true);
//'name1=value1&name2=value2'为序列化(serialize)的formdata
//serialize函数
function serialize(data){
if(!data){return '';}
var pairs = [];
for(var name in data){
if(!data.hasOwnProperty(name)){continue;}
if(typeof data[name] === 'function'){continue;}
var value = data[name].toString();
name = encodeURLComponent(name);
value = encodeURLComponent(value);
pairs.push(name+'='+value);
}
return pairs.join('&');
}
/* GET请求 */
var url = 'example.json?'+serialize(formdata);
xhr.open('get',url,true);
xhr.send(null);
/* POST请求 */
xhr.open('post','example.json',true);
xhr.send(serialize(formdata));
3 跨域
3.0 同源策略
两个页面拥有相同的协议(protocol),端口(port),和主机(host),那么这两个页面就属于同一个源(origin)
3.1 跨域访问
不满足同源策略的资源访问,叫跨域资源访问。W3C定义了CORS
来实现跨域的资源访问,现代浏览器已经实现了对CORS
的支持。
CORS
除了W3C定义的CORS
外,其他实现跨域资源访问的方法有:Frame代理
,JSONP
,Comet
,Web Sockets
Frame代理
JSONP
JSONP
的含义为JSON with padding
(填充式JSON),利用<script>
可以跨域的特性实现不同源资源的访问。
//json.js
handleResponse({
name:'yahoo'
})
//script
function handleResponse(response){
alert('My name is '+ response.name);
}
var script = document.createElement('script');
script.src = 'json.js?callback=handleResponse';
document.body.insertBefore(script,document.body.firstChild);
//效果还好!