当前位置:   article > 正文

《JavaScript高级程序设计 第三版》学习笔记 (十二)Ajax详解_javascript高级编程 ajax

javascript高级编程 ajax

一、JSON

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

3.解析和序列化

(1)JSON.stringify可以把JSON对象转换成字符串(序列化),可以再带两个参数。如果第二个参数是字符串数组,则不在数组中的属性全部丢弃。如果第二个参数是函数,则把键和值回传给参数,经过函数处理,返回值作为键值;返回undefined,相应属性会被忽略。第三个参数是为转换完的字符串自动加入换行符和缩进符,参数表示缩进的空格数,最大10。
[javascript]  view plain  copy
  1. //小实验  
  2. var json={  
  3.     "name":"brain",  
  4.     "sex":"male",  
  5.     "age":15      
  6. }  
  7. var jsonText=JSON.stringify(json);  
  8. var jsonText2=JSON.stringify(json,["name"]);  
  9. var jsonText3=JSON.stringify(json,function(key,value){  
  10.     if(key=="sex"){  
  11.         if(value=="male"){  
  12.             return 0;     
  13.         }else{  
  14.             return 1;     
  15.         }  
  16.     }else if(key=="age"){  
  17.         return;  
  18.     }else{  
  19.         return value;     
  20.     }  
  21. });  
  22. var jsonText4=JSON.stringify(json,null,4);  
  23.   
  24. console.log(jsonText);//{"name":"brain","sex":"male","age":15}   
  25. console.log(jsonText2);//{"name":"brain"}   
  26. console.log(jsonText3);//{"name":"brain","sex":0}   
  27. console.log(jsonText4);  
  28. /* 
  29. { 
  30.     "name": "brain", 
  31.     "sex": "male", 
  32.     "age": 15 
  33.  
  34. */  

(2)使用eval会存在安全隐患,因为json中可能存在恶意代码。JSON.parse可以把字符串转换成json对象。parse可以再带一个参数。第二个参数是一个还原函数,传入key和value,返回值作为键的值放入结果对象。
[javascript]  view plain  copy
  1. //小实验  
  2. var jsonText='{"name":"brain","sex":"0","age":15}';  
  3. var json1=JSON.parse(jsonText);  
  4. var json2=JSON.parse(jsonText,function(key,value){  
  5.     if(key=="sex"){  
  6.         if(value=="0"){  
  7.             return "male";    
  8.         }else{  
  9.             return "female";      
  10.         }  
  11.     }else{  
  12.         return value;  
  13.     }  
  14. });  
  15. console.log(json1.sex);//0  
  16. 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.完整实例
[javascript]  view plain  copy
  1. var xhr=new XMLHttpRequest();  
  2. xhr.onreadystatechange=function(){  
  3.     console.log(xhr.status+":"+xhr.statusText);   
  4. }  
  5. xhr.open("post","http://www.hostname.com");  
  6. 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事件能知道响应是什么时候接收到的。
[javascript]  view plain  copy
  1. //小实验  
  2. var img=new Image();  
  3. img.οnlοad=function(){  
  4.     console.log("loaded");    
  5. }  
  6. img.οnerrοr=function(){  
  7.     console.log("error");     
  8. }  
  9. 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标签传动。
[javascript]  view plain  copy
  1. //小实验  
  2. function handleResponse(obj){  
  3.     console.log(obj.name);    
  4. }  
  5. var script=document.createElement("script");  
  6. script.src="http://hostname/json/?callback=handleResponse";  
  7. document.body.insertBefore(script,document.body.firstChild);  
JSONP非常流行,能够直接访问响应文本,支持浏览器与服务器之间跨域双向通信。但不足是明显的:从其他域加载代码不安全;确定JSONP请求是否失败不太容易,不是所有浏览器都支持<script>标签的onerror事件。
(3)Comet,ajax是向服务器发请求,处理返回数据,通信是单向的。而Comet更加先进,能够让服务器推动信息给浏览器,实现了双向通信。
  实现双向通信,一种方法是长短轮询,来伪造一个连接。第二种方式是http流,在页面整个声明周期内,使用一个http连接,服务器始终保持连接打开,周期性地向浏览器发送数据。目前的实现方法,是在服务器中写一个轮询(感觉换汤不换药,不可能像socket一样保持连接,那没有意义,也相当耗费资源)。Comet技术是通过XHR实现的,只要status变为3,就会接收状态就会改变,然后比较responseText的前后变化以获得新数据。
//服务器写法
[php]  view plain  copy
  1. <?php  
  2.     $i=0;  
  3.     while(true){  
  4.         echo "$i;";  
  5.         flush();//将cache中的数据发给浏览器  
  6.         sleep(10);  
  7.         $i++  
  8.     }  
  9. ?>  

(4)WebSockets,目标是在一个单独的持久连接上提供全双工、双向通信。WebSocket使用ws和wss(安全环境)做协议头。API和其他语言的socket没什么大区别。
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/你好赵伟/article/detail/871184
推荐阅读
相关标签
  

闽ICP备14008679号