View on GitHub

learning

学习笔记

1. JSON

注意要点

  1. JSON(JavaScript object notation, JavaScript对象表示法)是一个数据格式,不是一个编程语言
  2. JSON包含简单值、对象、数组
  3. JSON引用必为双引号, 没有声明的概念
  4. JavaScript对象序列化为JSON字符串: stringify(); JSON字符串解析为原生JavaScript值:parse()

序列化 JSON.stringify()

JavaScript对象 -> JSON字符串

第二个参数可为数组, 用于过滤结果;

第二个参数可为函数, 接收 属性名、属性值(key, value) 并需要返回一个值

第三个参数为缩进格式

若需要精确控制如何序列化, 可给被序列化的对象定义toJSON()方法, 并返回JSON应该返回的数据

解析 JSON.parse()

第二个参数可为函数, 接收 属性名、属性值(key, value) 并需要返回一个值

2. AJAX

异步的JavaScript和XML 无须刷新页面即可从服务器取得数据

同步和异步

同步: 提交请求->等待服务器处理->返回(期间客户端不能操作)

异步: 请求 ->服务器处理(此时能继续操作) -> 返回

XMLHttpRequest对象

var xhr = new XMLHttpRequest();  //IE7+
xhr.open("get", "test.php", true);
xhr.send(null);

低版本IE(IE5/IE6): ActiveXObject

open()

参数一:发送请求的类型(post/get)
参数二:请求的URL
参数三:异步(true, 默认)/同步(false)

send()

参数:请求主体发送的数据/null

HTTP请求

步骤

  1. 建立TCP连接
  2. 浏览器向服务器发送请求命令
  3. 浏览器发送请求头信息
  4. 服务器应答
  5. 服务器发送应答头信息
  6. 服务器向浏览器发送数据
  7. 关闭TCP连接

请求

img

GET: 信息获取,发送信息数量有限制
POST: 修改服务器上的资源,发送信息数量无限制

响应

状态码、响应头、响应正文

状态码 说明
100
Continue
继续,一般在发送post请求时,已发送了http header之后服务端将返回此信息,表示确认,之后发送具体参数信息
200
OK
正常返回信息
201
Created
请求成功并且服务器创建了新的资源
202
Accepted
服务器已接受请求,但尚未处理
301
Moved Permanently
请求的网页已永久移动到新位置。
302
Found
临时性重定向。
303
See Other
临时性重定向,且总是使用 GET 请求新的 URI。
304
Not Modified
自从上次请求后,请求的网页未修改过。
400
Bad Request
服务器无法理解请求的格式,客户端不应当尝试再次使用相同的内容发起请求。
401
Unauthorized
请求未授权。
403
Forbidden
禁止访问。
404
Not Found
找不到如何与 URI 相匹配的资源。
500
Internal Server Error
最常见的服务器端错误。
503
Service Unavailable
服务器端暂时无法处理请求(可能是过载或维护)。

1XX:信息类; 2XX:成功; 3XX:重定向; 4XX:客户端错误; 5XX:服务端错误

完整版

完整代码

var xhr = new XMLHttpRequest();
xhr.addEventListener("readystatechange", function(){
	if (xhr.readyState == 4) {  //已完全接受相应数据
		if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
			console.log(xhr.requestText);
		}
		else {
			console.log(xhr.status);  //失败
		}
	}
}, false)
xhr.open("get", "text.php", true);
xhr.send(null);

ps: xhr.abort(): 终止请求

头部信息处理

设置请求头部

在 open() 和 send() 中间使用:
setRequestHeader(key, value)

取得相应头部

getResposeHeader(key): 获取某个相应头部信息
getAllResponseHeaders(): 获取所有头部信息的长字符串

注意点

  1. GET请求, 每个参数名和值都用encodeURLComponent()编码
  2. POST消耗资源更多, GET请求速度是POST请求的两倍

请求成功后

请求获得的数据自动填充到XHR对象属性中:

跨域问题

域名要相同、协议要相同、端口号要相同

解决

通过flash插件发送HTTP请求(现在用得少了)

在同源域名下架设一个代理服务器来转发

利用后端去请求

JSONP(只能用GET)

利用可以跨域访问JavaScript资源。
JSONP请求
将这段代码插入script标签中, 即可使用

//需要跨域访问的地址
var url = "http://api.money.126.net/data/feed/0000001,1399001?callback=refreshPrice";
var script = document.createElement("script");
script.src = url;  //添加src属性
document.body.insertBefore(script, document.body.firstChild);  //在body的第一个子节点前添加script

//完善回调函数
function refreshPrice() {
	//处理JSON
}

CORS

对方服务器添加Access-Control-Allow-Origin IE10以下不支持