JavaScript高级程序设计(第三版)学习笔记20、21、23章
第20章,JSON
对象
{
"name":"Nicholas",
"age":20
}
{
"name":"Nicholas",
"age":19,
"school":{
"name":"school",
"location":"location"
}
}
数组
[
{
"title":"array",
"author":"author"
},
[
"title":"book",
"author":{
"nameOne",
"nameTwo"
}
]
]
JSON对象
var book = {
title:"title",
author:[
"Nicholas C. Zakas"
],
edition:3,
year:2011
};
var jsonText = JSON.stringify(book);
alert(jsonText); //{"title":"title","author":["Nicholas C. Zakas"],"edition":3,"year":2011}
序列化选项
1、过滤结果
var book = {
title:"title",
author:[
"Nicholas C. Zakas"
],
edition:3,
year:2011
};
var jsonText = JSON.stringify(book,["title","edition"]); //{"title":"title","edition":3}
如果是函数,则又有不同
var jsonText = JSON.stringify(book,function(key,value){
switch(key){
case "author":
return value.join(","); case "year":
return 5000; case "edition":
return undefined;
default:
return value;
}
}); //{"title":"title","author":"Nicholas C. Zakas","year":5000}
2、字符串缩进
var jsonText = JSON.stringify(book,null,4);
//结果:
{
"title": "title",
"author": [
"Nicholas C. Zakas"
],
"edition": 3,
"year": 2011
}
{
- -"title": "title",
- -"author": [
- - - -"Nicholas C. Zakas"
- -],
- -"edition": 3,
- -"year": 2011
}
3、toJSON方法
解析选项
var book = {
title:"title",
author:[
"Nicholas C. Zakas"
],
edition:3,
year:2011,
releaseDate:new Date(2011,11,1)
}; var jsonText = JSON.stringify(book);
var bookCopy = JSON.parse(jsonText,function(key,value){
if(key == "releaseDate"){
return new Date(value);
}else{
return value;
}
}); alert(bookCopy.releaseDate.getFullYear()); //
第21章,Ajax和Comet
XMLHttpRequest
function createXHR(){
if(typeof XMLHttpRequest != "undefined"){
return new XMLHttpRequest;
}else if(typeof ActiveXObject != "undefined"){
if(typeof arguments.callee.activeXString != "string"){
var versions = ["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"],i,len;
for(i=0,len=versions.length;i < len;i++){
try{
new ActiveXObject(versions[i]);
arguments.callee.activeXString = versions[i];
break;
}catch(ex){
//跳过
}
}
}
return new ActiveXObject(arguments.callee.activeXString);
}else{
throw new Error("No XHR Object available");
}
}
//使用示例
var xhr = createXHR();
XHR用法
xhr.open("get","example.php",false);
xhr.send(null);
xhr.open("get","example.php",false); //同步请求
xhr.send(null); if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
alert(xhr.resopnseText);
}else{
alert("Request was unsuccessful: "+xhr.status);
}
var xhr = createXHR();
xhr.onreadystatechange = function(){ //DOM0级方法,不是所有浏览器都支持DOM2级方法
if(xhr.readyState == 4){
if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
alert(xhr.resopnseText);
}else{
alert("Request was unsuccessful: "+xhr.status);
}
}
};
xhr.open("get","example.php",true); //异步请求
xhr.send(null);
在接收到响应之前还可以调用abort方法来取消异步请求:
xhr.abort();
HTTP头部信息
Accept:浏览器能够处理的内容类型
var xhr = createXHR();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
alert(xhr.resopnseText);
}else{
alert("Request was unsuccessful: "+xhr.status);
}
}
};
xhr.open("get","example.php",true);
xhr.setRequestHeader("MyHeader","MyValue");
xhr.send(null);
GET请求
POST请求
function submitData(){
var xhr = createXHR();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
alert(xhr.resopnseText);
}else{
alert("Request was unsuccessful: "+xhr.status);
}
}
}; xhr.open("post","postExample.php",true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
var form = document.getElementById("user-info");
xhr.send(serialize(form));
}
示例php文件:
<?php
header("Content-Type:text/plain");
echo <<<EOF
Name:{$_POST['user-name']}
Email:{$_POST['user-email']}
EOF;
?>
var data = new FormData();
data.append("name","Nicholas"); //接收两个参数:键,值
方法2、
var data = new FormData(document.forms[0]); //直接使用表单元素
方法3、
var form = document.getElementById("user-info");
xhr.send(new FormData(form));
超时设定
overrideMimeType方法
进度事件
跨源资源共享
IE对CORS的支持
其他浏览器对CORS的支持
其他跨域技术
图像ping
JSONP
Comet
服务器发送事件
Web Socket
1、Web Socket API
var socket = new WebSocket("ws://www.example.com/server.php");
socket.close();
2、发送和接收数据
socket.send("hello world"); //任意字符串
3、其他事件
第23章,离线应用与客户端存储
离线检测
应用缓存
数据存储
1、限制
2、cookie的构成
3、js中的cookie
var socket = new WebSocket("ws://www.example.com/server.php");
var CookieUtil = {
get:function(name){
var cookieName = encodeURIComponent(name) + "=" ,
cookieStart = document.cookie.indexOf(cookieName),
cookieValue = null; if(cookieStart > -1){
var cookieEnd = document.cookie.indexOf(";",cookieStart);
if(cookieEnd == -1){
cookieEnd = document.cookie.length;
}
cookieValue = decodeURIComponent(document.cookie.substring(cookieStart+cookieName.length,cookieEnd));
} return cookieValue;
},
set:function(name,value,expires,path,domain,secure){
var cookieText = encodeURIComponent(name) + "=" + encodeURIComponent(value); if(expires instanceof Date){
cookieText += "; expires=" + expires.toGMTString();
}
if(path){
cookieText += "; path=" + path;
}
if(domain){
cookieText =+ "; domain=" + domain;
}
if(secure){
cookieText += "; secure=" + secure;
}
document.cookie = cookieText;
},
unset:function(name,path,domain,secure){
this.set(name,"",new Date(0),path,domain,secure);
}
};
使用示例:
//设置cookie
CookieUtil.set("name","Nicholas");
CookieUtil.set("book","Professional JavaScript"); //读取
alert(CookieUtil.get("name")); //"Nicholas"
alert(CookieUtil.get("book")); //Professional JavaScript //删除
CookieUtil.unset("name");
CookieUtil.unset("book"); //设置cookie,包括它的路径、域、失效日期
CookieUtil.set("name","Nicholas","/books/projs","www.wrox.com",new Date("January 1,2010")); //删除刚设置的cookie
CookieUtil.unset("name","/books/projs","www.wrox.com"); //设置安全cookie
CookieUtil.set("name","Nicholas",null,null,null,true);
4、子cookie
5、关于cookie的思考
Web存储机制
1、Storage类型
2、sessionStorage对象
3、globalStorage对象
4、localStorage对象
5、storage事件
IndexedDB
JavaScript高级程序设计(第三版)学习笔记20、21、23章的更多相关文章
- JavaScript高级程序设计第三版学习笔记(一)之数据类型区分详谈
null.NaN.undefined三者的区别是什么? 在初次接触到JavaScript的时候,傻傻的分不清null.NaN.undefined三者到底区别何在,在实际的项目开发中也因为这个问题而困惑 ...
- JavaScript高级程序设计第三版-读书笔记(1-3章)
这是我第一次用markdown,也是我第一次在网上记录我自己的学习过程. 第一章 JavaScript主要由以下三个不同的部分构成 ECMAScript 提供核心语言功能 DOM 提供访问 ...
- JavaScript高级程序设计第三版.CHM【带实例】
从驱动全球商业.贸易及管理领域不计其数的复杂应用程序的角度来看,说 JavaScript 已经成为当今世界上最流行的编程语言一点儿都不为过. JavaScript 是一种非常松散的面向对象语言,也是 ...
- javascript高级程序设计第三版书摘
在HTML 中使用JavaScript <script>元素 在使用<script>元素嵌入 JavaScript 代码时,只须为<script>指定 type 属 ...
- DOM 操作技术【JavaScript高级程序设计第三版】
很多时候,DOM 操作都比较简明,因此用JavaScript 生成那些通常原本是用HTML 代码生成的内容并不麻烦.不过,也有一些时候,操作DOM 并不像表面上看起来那么简单.由于浏览器中充斥着隐藏的 ...
- Javascript高级程序设计第三版-笔记
1.JS数值最大值最小值: >Number.MIN_VALUE <5e-324 >Number.MAX_VALUE <1.7976931348623157e+308 判断数值是 ...
- 22.1 高级函数【JavaScript高级程序设计第三版】
函数是JavaScript 中最有趣的部分之一.它们本质上是十分简单和过程化的,但也可以是非常复杂和动态的.一些额外的功能可以通过使用闭包来实现.此外,由于所有的函数都是对象,所以使用函数指针非常简单 ...
- 21.1 XMLHttpRequest 对象【JavaScript高级程序设计第三版】
IE5 是第一款引入XHR 对象的浏览器.在IE5 中,XHR 对象是通过MSXML 库中的一个ActiveX对象实现的.因此,在IE 中可能会遇到三种不同版本的XHR 对象,即MSXML2.XMLH ...
- 2.1 <script>元素【JavaScript高级程序设计第三版】
向 HTML 页面中插入 JavaScript 的主要方法,就是使用<script>元素.这个元素由 Netscape 创造并在 Netscape Navigator 2 中首先实现.后来 ...
- 14.5 富文本编辑【JavaScript高级程序设计第三版】
富文本编辑,又称为WYSIWYG(What You See Is What You Get,所见即所得).在网页中编辑富文本内容,是人们对Web 应用程序最大的期待之一.虽然也没有规范,但在IE 最早 ...
随机推荐
- 大规模Hadoop集群实践:腾讯分布式数据仓库(TDW)
TDW 是腾讯最大的离线数据处理平台.本文主要从需求.挑战.方案和未来计划等方面,介绍了TDW在建设单个大规模集群中采取的 JobTracker 分散化和 NameNode 高可用两个优化方案. TD ...
- 笔记:1.css样式,最前边加 @charset "utf-8";是为什么2.js判断各种浏览器的方法
表明CSS文件的页面编码为UTF-8..如果这个CSS的文件编码也是UTF-8的话..那么在浏览器中看到的CSS文件的页面中中文的注释或者中文字体就可以正确显示为中文,如果CSS的文件编码和页面不一致 ...
- Visual Studio 2015 编译错误【错误 C4996 'vsprintf': This function or variable may be unsafe. Consider using vsprintf_s instead. 】的解决方案
错误提示信息: 错误 C4996 'vsprintf': This function or variable may be unsafe. Consider using vsprintf_s inst ...
- hdoj 2083 简易版之最短距离
简易版之最短距离 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Su ...
- 转载 GUID介绍
转载 http://www.cnblogs.com/illele/archive/2008/02/25/1080554.html GUID(Global unique identifier)全局唯一标 ...
- UI进阶 数据库 SQLite
1.数据库管理系统 SQL:SQL是Structured Query Language(结构化查询语言)的缩写. SQL是专为数据库而建立的操作命令集,是一种功能齐全的数据库语言. 常见的数据库管理系 ...
- CSS链接、光标、DHTML、缩放
个属性 18.2 CSS中光标的使用(更详细可看文档) 属性名称 属性值 说明 cursor auto ...
- SQLite使用教程7 删除表
http://www.runoob.com/sqlite/sqlite-drop-table.html SQLite 删除表 SQLite 的 DROP TABLE 语句用来删除表定义及其所有相关数据 ...
- ant中调用外部ant任务的两种方法
国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...
- 【55】让自己熟悉Boost
1.网址:http://boost.org 2.有很多C++组织和网站,但是Boost库有两个优势:a.和标准委员会关系密切:b.加入C++标准的各种功能的测试场.