[Head First Html5 Programming notes] Chapter 6 Web

Chapter 6 Web

---

1 Python Flask搭建服务器——解决跨域访问问题

# response为返回的json格式数据
response = app.response_class(response = json.dumps(
        {filter: vital_information.get(filter) for filter in filters}), status=200)
# 设置headers中的相关属性使其满足跨域访问要求
response.headers['Access-Control-Allow-Origin'] = '*'
response.headers['Access-Control-Allow-Methods'] = 'POST'
response.headers['Access-Control-Allow-Headers'] = 'x-requested-with,content-type'
return response

2 Web应用框架（糖果公司）

3 XMLHttpRequest

var request = new XMLHttpRequest();	//创建request对象
request.open("GET",url);			//指定request的URL和方式
request.onload = function() {		//请求响应处理程序
    console.log(request.responseText);
};									//request的responseText属性包含返回的JSON数据
request.send(null);					//发送请求

4 JSON

var movie = JSON.parse(request.responseText); //JSON.parse方法将Javascript对象转为JSON
var movieJson = JSON.stringfy(movie);		  //JSON.stringfy方法将JSON转为Javascript对象

5 浏览器安全策略

1. JavaScript不接受请求数据的页面与所请求的数据位于不同的域内

2. 解决方法

   (1) 服务端允许跨域访问

   (2) 使用JSONP代替XMLHttpRequest获取跨域数据

6 JSONP

1. 一种使用script元素获得JSON对象的方法

2. 原理

   (1) 浏览器向服务器请求Javascript，并传入callback函数

   (2) 服务器的JavaScript程序将JSON数据通过callback函数打包，可直接返回对象或对客户端页面DOM操作，从而实现跨域访问

   (3) 通过查阅Web服务器的API文档，可获取Web服务器的JSONP支持信息及JSON数据

7 window.setInterval方法

var intervalId = setInterval(handler, time);	//配置定时器，每隔time时间调用一次handler
clearInterval(intervalId);						//清除对应定时器

8 浏览器缓存问题

1. 若反复获取同一URL，浏览器可能将其缓存，从而无法更新数据

2. solution：在URL末尾加入随机数，如

   url = url + "&random=" + (new Date()).getTime();