客户端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