客户端JavaScript Ajax

创建: 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