本文共 4021 字,大约阅读时间需要 13 分钟。
一、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);
- console.log(jsonText2);
- console.log(jsonText3);
- console.log(jsonText4);
-
-
-
-
-
-
-
(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);
- console.log(json2.sex);
二、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();
- sleep(10);
- $i++
- }
- ?>
(4)WebSockets,目标是在一个单独的持久连接上提供全双工、双向通信。WebSocket使用ws和wss(安全环境)做协议头。API和其他语言的socket没什么大区别。 转载地址:http://mwkxi.baihongyu.com/