创建: 2017/10/21
完成: 2017/10/23
【TODO】
对Ajax收发各类型数据制作模板
补充跨域通信(cross origin) p457
| HTTP通信 |
| HTTP |
超文本传输协议（HTTP，HyperText Transfer Protocol) |
| HTTP通信 |
客户端发送: 请求信息
服务器端发送: 响应信息 |
| 请求信息 |
请求行: GET
http://www.sample.sample HTTP/1.1
head: Host: sample.sample这样【域名:内容】
信息主体: 请求信息
| 请求行 |
GET http://www.sample.sample HTTP/1.1 |
| GET |
方法
GET，POST |
| http://www.sample.sample |
URL |
| HTTP/1.1 |
HTTP的版本 |
| |
|
|
| 响应信息 |
head和响应主体和上面一样
响应行: HTTP/1.1 200 OK
| 响应行 |
HTTP/1.1 200 OK |
| HTTP/1.1 |
HTTP版本 |
| 200 |
状态码 |
| OK |
附加信息 |
| |
| 成功 |
200 |
OK |
| 客户端错误 |
401 |
没有认证 |
| 403 |
接入被禁止 |
| 404 |
找不到请求的资源 |
| 408 |
请求超时 |
| 服务器端 |
500 |
服务器内部错误 |
| 503 |
服务暂时不可用 |
| |
|
|
| |
|
|
| |
|
|
|
|
| Ajax |
| 优点 |
.处理高速，通信量少
.异步处理
.不跳转页面，渲染快 |
| |
AJAX即“Asynchronous
JavaScript + XML |
| XMLHttpRequest |
| |
Ajax通过XMLHttpRequest Obejct来进行数据通信 |
| 处理流程 |
| |
生成XMLHttpRequest Obeject |
| |
登陆请求的方法(method) |
| |
发送请求，开始通信 |
| |
|
| |
|
|
生成XMLHttpRequest
对象 |
var req = new
XMLHttpRequest();
XMLHttpRequest自带对象
readyState
只可读 |
HTTP通信的状态
| 0 |
为初始化: 没有呼出open |
| 1 |
读取中: 呼出了open, 还没呼出send |
| 2 |
读取完成: 呼出send, 还没收到响应 |
| 3 |
接收响应中:
以获取response和head
还没接收信息主体 |
| 4 |
接收完成: 已获取所有响应信息 |
|
response
只可读 |
获取响应内容 |
responseText
只可读 |
以文本形式获取响应内容 |
responseType
可读写 |
获取/设定响应的类型
| DOMString |
"string"
默认值 |
| JSON Object |
"json" |
| ArrayBuffer |
"arraybuffer"
带类型的数组 |
| Blob |
"blob" |
| Document |
"document"
HTML的Document 对象 |
| |
|
| |
|
| |
|
| |
|
| |
|
|
responseXML
只可读 |
以XML对象形式获取响应内容 |
status
只可读 |
获取对于请求的HTTP状态码
| 成功 |
200 |
OK |
| 客户端错误 |
401 |
没有认证 |
| 403 |
接入被禁止 |
| 404 |
找不到请求的资源 |
| 408 |
请求超时 |
| 服务器端 |
500 |
服务器内部错误 |
| 503 |
服务暂时不可用 |
| |
|
|
| |
|
|
| |
|
|
|
statusText
只可读 |
获取对于HTTP状态码的补充信息 |
timeout
可读写 |
获取/设定请求的上线时间(到时间自动终止请求)
单位: 毫秒ms |
withCredentials
可读写 |
对于cross origin 通信是否使用认证
true/false |
onreadystatechange
可读写 |
readState的值改变时回调的事件句柄 |
ontimeout
可读写 |
请求超时时候回调的事件句柄 |
| |
|
XMLHttpRequest自带方法
| abort() |
终止现在进行的异步通信(非同期通信) |
| open(...) |
初始化HTTP请求 |
| send(data) |
发送HTTP请求 |
| setRequestHeader(header, value) |
增加header |
getAllResponseHeader()
send(...)成功才有效 |
获取收到的所有响应的response |
getResponseHeader(header)
send(...)成功才有效 |
获取指定响应header |
| |
|
| |
|
| |
|
| |
|
XMLHttpRequest事件句柄
| readystatechange |
状态变化时 |
| abort |
处理被取消时 |
| error |
请求失败时 |
| loadend |
不管处理有没有异常，处理完成时 |
| load |
请求成功，接收到响应时 |
| loadstart |
发送请求后 |
| progress |
发送/接收数据时 |
| timeout |
超时自动终止时 |
| |
|
| |
|
|
| 定义和服务器通信的处理 |
两种
| |
req.onreadystatechange = function ()
{...}; |
| |
req.addEventListener("readystatechange",
function() {...}); |
| |
|
| |
|
|
| 初始化请求 |
req.open(method, url [,async
[,user [,password]]]);
| method |
HTTP方法
"GET" "POST" |
| url |
请求的url |
| async |
可以省略, 默认true
是否异步通信 |
| user |
认证时候的用户名
可以省略(需要的时候指定) |
| password |
认证时候的密码
可省略 |
|
| 发送请求 |
发送GET
| send不带参数 |
req.send(null); |
| 如果要发送请求参数 |
url的末尾添加请求字符串
| |
末尾加上"?" |
| |
变量形式 名称=值 |
| |
多个变量 "&"连接 |
| |
用encodeURIComponent方法转换字符 |
| |
req.open("GET",
"example.com?a=1&b=2"); |
|
| |
|
发送POST
| 可发送内容 |
| url请求字符串 |
需要设定
req.setRequestHeader("content-type",
"application/x-www-form-urlencoded") |
| 表单数据 |
FormData |
| 字符串 |
DOMString |
| 二进制数据 |
ArrayBufferView |
BlobObject
File Object |
Blob |
| Document |
|
| |
|
| |
|
| |
|
| |
|
|
| |
|
| |
|
|
| |
|
| |
|
| |
|
| |
|
| |
|
| 读取响应信息 |
| 准备 |
发送send前设定
req.requestType = "json";
# TODO 对Ajax收发各类型数据制作模板
|
| 发送请求，等待响应成功 |
|
读取JSON
使用responseText |
req.addEventListener("load", function() {
jsonObj = JSON.parse(req.responseText);
});
req.send(null);
这种不用设定requestType |
读取JSON
使用response |
req.addEventListener("load", function() {
jsonObj = req.response;
});
req.responseType="json";
req.send(null);
这种要设定requestType="json"; |
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| cross origin
通信 |
| |
# TODO 补充跨域通信(cross origin) p457 |
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
