《JavaScript高级程序设计 第三版》学习笔记 （十二）Ajax详解_javascript 高级程序设计 第四版ajax

一、JSON

1.使用XML在服务器和浏览器之间进行数据交换太浪费带宽，因而出现了新的数据结构JSON。JSON是包含了简单值、对象、数组的严格的JS子集，不支持变量、函数或对象实例。很多语言也有各自的JSON解析器和序列化器。
2.不能将JSON写成简单的js字面量，否则只能在js中使用，而其他语言会解析不了。JSON要求严格的地方主要有：字符串值必须用双引号；对象属性必须用双引号；同一个对象中绝不应该出现两个同名属性。

3.解析和序列化

（1）JSON.stringify可以把JSON对象转换成字符串（序列化），可以再带两个参数。如果第二个参数是字符串数组，则不在数组中的属性全部丢弃。如果第二个参数是函数，则把键和值回传给参数，经过函数处理，返回值作为键值；返回undefined，相应属性会被忽略。第三个参数是为转换完的字符串自动加入换行符和缩进符，参数表示缩进的空格数，最大10。

//小实验
var json={
	"name":"brain",
	"sex":"male",
	"age":15	
}
var jsonText=JSON.stringify(json);
var jsonText2=JSON.stringify(json,["name"]);
var jsonText3=JSON.stringify(json,function(key,value){
	if(key=="sex"){
		if(value=="male"){
			return 0;	
		}else{
			return 1;	
		}
	}else if(key=="age"){
		return;
	}else{
		return value;	
	}
});
var jsonText4=JSON.stringify(json,null,4);
 
console.log(jsonText);//{"name":"brain","sex":"male","age":15} 
console.log(jsonText2);//{"name":"brain"} 
console.log(jsonText3);//{"name":"brain","sex":0} 
console.log(jsonText4);
/*
{
    "name": "brain",
    "sex": "male",
    "age": 15
} 
*/

（2）使用eval会存在安全隐患，因为json中可能存在恶意代码。JSON.parse可以把字符串转换成json对象。parse可以再带一个参数。第二个参数是一个还原函数，传入key和value，返回值作为键的值放入结果对象。

//小实验
var jsonText='{"name":"brain","sex":"0","age":15}';
var json1=JSON.parse(jsonText);
var json2=JSON.parse(jsonText,function(key,value){
	if(key=="sex"){
		if(value=="0"){
			return "male";	
		}else{
			return "female";	
		}
	}else{
		return value;
	}
});
console.log(json1.sex);//0
console.log(json2.sex);//male

二、Ajax

1.Ajax是Asynchronous JavaScript And XML的缩写。可以理解为异步基于js的服务器通讯机制。但现在基本上没人把XML用作Ajax的数据结构，转而多使用JSON。
2.IE8+和标准浏览器，目前都支持XMLHttpRequest对象，简称XHR，用于完成Ajax整个过程。
（1）XHR.open()方法，做请求准备。可待三个参数：第一个表示请求类型，GET或POST；第二个请求地址，可以是具体的初级脚本文件，也可以是MVC中的路由地址；第三个表示是否异步发送请求（默认为true）。
（2）XHR.send()方法，发送数据。可带一个参数，即实际发送的数据体，一般为字符串。
（3）XHR.responseText属性，作为接收主体，从服务器得到的字符串。
（4）XHR.responseXML属性，从服务器得到的XML文档，前提是内容类型为“text/xml”或“application/xml”。
（5）XHR.status属性，响应的http状态，为数值。
（6）XHR.statusText属性，http状态的说明。
（7）XHR.onreadystatechange事件，只要status状态发生改变，就会触发这个事件，根据XHR.status的值确定通信是否完成。此事件必须在open前绑定，因为未调用open会改变status。
（8）XHR.abort方法，取消异步的通信。默认的XHR都是异步通讯，在通讯过程不会发生js阻塞，所以，同步通信很少使用。
（9）XHR.setRequestHeader(header,value)方法，设置http头部信息，不太常用，但必要时候很好用。
3.完整实例

var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
	console.log(xhr.status+":"+xhr.statusText);	
}
xhr.open("post","http://www.hostname.com");
xhr.send("?123");

4.load事件
（1）多数浏览器支持load事件：loadstart、progress、error、abort、load。这些事件加在一起，可以完全替代onreadystatechange。
（2）有些人使用这些load事件来异步加载js，而且用户体验更好。

三、跨域

1.跨域永远是资源共享不可回避的问题，但由于安全限制，Ajax默认是不支持跨域的。
2.IE的解决方法，提供了XDomainRequest类型实现跨域通信。用法和XHR差不多，但限制更严格，比如不能发送cookies、只能设置header的Content-Type、不能访问响应头信息、只支持get和post、只支持异步。
3.标准浏览器做法，在open的url中写入绝对地址。实验证明，现在已经不行了。
4.其他跨域技术
（1）图像ping，利用一些可以跨域的html标签的src属性，可以完成跨域。图像是动态创建img，使用这种方法，浏览器得不到任何数据，但能在URL中写入信息通过GET形式发送给服务器。通过监听load事件和error事件能知道响应是什么时候接收到的。

//小实验
var img=new Image();
img.οnlοad=function(){
	console.log("loaded");	
}
img.οnerrοr=function(){
	console.log("error");	
}
img.src="http://www.hostname.com";

（2）JSONP，JSONP是JSON的一种新方法，JSON with padding。
　　JSONP由两部分数据组成：回调函数和数据。典型的JSONP请求如http://hostname/json/?callback=handleResponse。而服务器回传的数据是这样的handleResponse({"name":"tom",age:25})。由于JSONP是有效的js代码，因此要利用script标签传动。

//小实验
function handleResponse(obj){
	console.log(obj.name);	
}
var script=document.createElement("script");
script.src="http://hostname/json/?callback=handleResponse";
document.body.insertBefore(script,document.body.firstChild);

JSONP非常流行，能够直接访问响应文本，支持浏览器与服务器之间跨域双向通信。但不足是明显的：从其他域加载代码不安全；确定JSONP请求是否失败不太容易，不是所有浏览器都支持<script>标签的onerror事件。
（3）Comet，ajax是向服务器发请求，处理返回数据，通信是单向的。而Comet更加先进，能够让服务器推动信息给浏览器，实现了双向通信。
　　实现双向通信，一种方法是长短轮询，来伪造一个连接。第二种方式是http流，在页面整个声明周期内，使用一个http连接，服务器始终保持连接打开，周期性地向浏览器发送数据。目前的实现方法，是在服务器中写一个轮询（感觉换汤不换药，不可能像socket一样保持连接，那没有意义，也相当耗费资源）。Comet技术是通过XHR实现的，只要status变为3，就会接收状态就会改变，然后比较responseText的前后变化以获得新数据。
//服务器写法

<?php
	$i=0;
	while(true){
		echo "$i;";
		flush();//将cache中的数据发给浏览器
		sleep(10);
		$i++
	}
?>

（4）WebSockets，目标是在一个单独的持久连接上提供全双工、双向通信。WebSocket使用ws和wss(安全环境)做协议头。API和其他语言的socket没什么大区别。