JAVASCRIPT高程笔记-------JSON与AJAX

json对象——语法

　　　　简单值：与JS相同语法，可以是字符串，数值，布尔值，null；但不支持undefined

　　　　对象：复杂数据类型，表示一组有序的键值对，键值对的值可以是简单数据，也可以是复杂数据

　　　　数组：也是复杂数据类型，数组的值也可以是简单或者复杂类型

　　json字符串必须要使用双引号

json对象方法

　　　　JSON.stringify(js对象)，此方法接收一个或者两个参数，第一个参数为js对象并将其解析返回一个json对象，在解析过程中，所有的函数及原型成员都会被有意忽略，此外值为undefined的任何属性也会被跳过，第二个参数为解析规则可以是数组也可以是函数，如果是数组那么只解析数组中包含的属性，如果为函数那么根据函数的定义返回需要的值

var book = {
    title : "mysql clksx",
    authors : ["zhangsan","lisi"],
    edition : 3,
    year :2011
};
var jsonText = JSON.stringify(book);
console.log(jsonText); //{"title":"mysql clksx","authors":["zhangsan","lisi"],"edition":3,"year":2011}

var jsonText = JSON.stringify(book,["title","year","name"]);
console.log(jsonText); //{"title":"mysql clksx","year":2011}

var jsonText = JSON.stringify(book,function(key,value){
    switch(key){
        case "authors":
            return value.join("-");
        case "year":
            return 2017;
        default:
            return value;
    }
});
console.log(jsonText); //{"title":"mysql clksx","authors":"zhangsan-lisi","edition":3,"year":2017}

如果一个js对象本身拥有toJSON方法那么序列化时就默认调用此方法

var book = {
    title : "mysql clksx",
    authors : ["zhangsan","lisi"],
    edition : 3,
    year :2011,
    toJSON : function(){
        return this.title;
    }
};
var jsonText = JSON.stringify(book);
console.log(jsonText);//"mysql clksx"

json.stringify()的序列化顺序为：第一步——查找被序列化的对象的toJSON方法，并且是能取到有效的值，则调用该方法！否则默认顺序执行序列化

　　　　　　　　　　　　　第二步——如果提供了第二个参数，应用这个函数过滤器，那么传入这个函数过滤器的值是第一步返回的值

　　　　　　　　　　　　　第三步——对第二步返回的值进行序列化

　　　　　　　　　　　　　第四步——如果提供了第三个参数，那么将第三步的值进行格式化

JSON.parse() 方法 ---将一个字符串解析成JSON对象第一个参数为字符串第二个参数为解析函数，如下示例

var book = {
    title : "mysql clksx",
    authors : ["zhangsan","lisi"],
    edition : 3,
    year : 2011
    
};
console.log(book.title);
var jsonText = JSON.stringify(book);
console.log(jsonText);

var bookCopy = JSON.parse(jsonText,function(key,value){
    if(key == "title"){
        return "mysql 从零开始学";
    }else{
        return value;
    }
});
console.log(bookCopy.title); //mysql 从零开始学

AJAX ——Asynchronous Javascript And XML

　　XMLHttpRequest对象的用法

　　　　　　IE7 以及其他的浏览器创建XHR 对象的方式 var xhr = new XMLHttpRequest()；

　　　　　　open()——此方法接收三个参数，第一个参数为请求的方法如（get，post等），第二个参数为请求的URL，第三个参数为是否异步发送请求的布尔值如下示例

　　　　　　　　xhr.open("get","xxx.jsp",false);

　　　　　　　　xhr.send(null);

　　　　　　注意的是open方法并不是直接发送请求，而是创建一个请求等待发送，send方法接收发送请求的参数若没有参数则必须传递null值，由于此处代码是同步的会等到服务器响应之后在继续执行！收到响应后会自动填充到XHR对象的属性中

　　　　　　　　responseText：作为响应主体被返回的文本

　　　　　　　　responseXML：如果响应的内容是“text/xml”或者“application/xml”，那么这个属性中保存的是响应回来的XML DOM文档

　　　　　　　　status ：响应的HTTP状态码

　　　　　　　　statusText ： HTTP状态的说明

　　　　异步发送的检测《xhr的readState属性》　，在异步发送的果过程中，这个属性反映了请求和响应过程的状态变化，此属性的值有如下

　　　　　　0：未初始化，尚未调用open方法

　　　　　　1：启动，调用了open方法，但为调用send方法

　　　　　　2：发送，已经调用了send方法，但未收到回应，

　　　　　　3：正在接收响应，已经接收了部分响应内容

　　　　　　4：响应接收完毕，可以使用响应的数据

　　此属性每次发生变化都会触发readystatechange事件，不过要在xhr对象调用open方法前指定事件处理函数，一个完整的例子

var  xhr = new XMLHttpRequest();
xhr.readystatechange  = function(){
    if(xhr.readyState == 4){  
        if((xhr.status >= 200 && xhr.status < 300 ) || xhr.status == 304 ){
            alert(xhr.responseText);
        }else{
            alert("error");
        }
    }
}
xhr.open("get","xxx.jsp",true);
xhr.send(null);

HTTP头部信息

　　　　Accep：浏览器能处理的内容类型

　　　　Accep-charset ：浏览器能显示的字符集

　　　　Accep-Encoding ：浏览器能够处理的压缩编码

　　　　Accep-Language：浏览器能当前设置的语言

　　　　Connection：浏览器与服务器之间连接的类型

　　　　Cookie：当前页面设置的任何Cookie

　　　　Host：发出请求的页面所在的域

　　　　Referer：发出请求的页面URI

　　　　User-agent ：浏览器的用户代理字符串

在调用open方法之后并且在调用send方法之前可以设置HTTP头部信息，建议使用自定义头部信息，以便服务器进行解析！

xhr.getResponseHeader()方法指定头部名称可以获取相应的服务器响应信息

xhr.getAllResponseHeaders() 可以获取所有的HTTP头部服务器响应信息

get请求----将请求参数名称和值直接添加在url末尾的一个请求方式

由于gei请求经常会因为字符串格式发生意外，建议使用如下函数进行url编码

function addURLParam(url,name,value){
    url += (url.indexOf("?")) == -1 ? "?" : "&";
    url += encodeURIComponet(name) + "=" + encodeURIComponet(value);
    return url;
}

post请求 - 在send方法中传入参数字符串或者是xml文档，一个post请求的示例

xhr.open("post","xxx.jsp",true);
xhr.send("name=zhangsan&age=18");

post 与get请求的区别

　　Get是向服务器发索取数据的一种请求，而Post是向服务器提交数据的一种请求

　　长度问题--受限于浏览器以及服务器大多数对get请求有长度限制，而post则没有

　　安全问题--get请求是明文请求，其参数直接反映在浏览器的地址栏上，并且get请求可以被缓存，而post无法缓存以及参数被隐藏在http请求中

formData对象用于简化xhr进行操作的一个类型，创建一个formData对象然后调用其append方法就可以很方便的添加参数内容，在send方法中之间传入这个formData对象实例，使用formData的好处是不必明确的设置请求头部信息，XHR对象能正确识别formData对象并配置合适的头部信息

超时设定 timeout属性可以设置请求的超时时间默认单位毫秒

overrideMimeType()方法此方法用于重写XHR响应的MIME类型，此方法也必须在send方法之前进行调用，如下所示，就是告知XHR对象将响应的内容当作XML文档进行处理，支持的浏览器有谷歌，火狐，opera，safari4+

var  xhr = new XMLHttpRequest();
xhr.open("post","xxx.jsp",true);
xhr.overrideMimeType("text/xml");
xhr.send("name=zhangsan&age=18");

跨资源共享 CORS　　定义了在必须访问跨源资源时，浏览器与服务器如何沟通！就是通过自定义的HTTP头部信息让浏览器和服务器进行决定是否请求成功或是响应成功

　　　　IE对CORS的支持，IE8中引入了XDR对象*（XDomainRequest）类型，XDR与XHR的不同之处 XDR请求：cookie 不会随请求发送，也不会随响应返回，只能设置请求头的content-type字段，不能访问响应头部信息，只支持get和post请求

　　　　　　xdr.open() 只接收两个参数：请求类型和URL，所有的XDR请求都是异步的，不能创建同步请求，请求返回后，会触发load事件，响应的数据也会保存在responseText属性中

　　　其他浏览器的支持，都是通过XHR对象进行跨域访问，只要传入绝对地址的URL即可；其他浏览器可以访问status和statusText属性，并且支持同步请求，也同样存在一些限制

　　　　　　不能使用setRequestHeader设置自定义头部，不能接收和发送cookie，调用getAllResponseHeaders()方法会返回空字符串

其他跨域技术

　　图片img 利用img的src属性进行页面与服务器的单向通讯，如下代码所示，只要请求完成就能得到通知！图片Ping最常用于跟踪用户点击页面或者动态广告曝光次数，缺点：第一只能get请求所有的src都是get请求，第二点无法访问服务器响应文本

var  img = new Image();
img.onload = img.onerror = function(){
    alert("done")
}
img.src = "https://www.zhihu.com/question/19618769";

　　jsonp——由两部分组成：回调函数和数据。回调函数是当响应回到页面时要调用的函数（一般在请求中指定），而数据则是传入回调函数中的json数据,　　简单来说就是预定义函数体和参数内容，当并不立即执行，由跨域请求后返回的js代码和参数进行调用

优点：能够直接访问响应文本，支持浏览器服务器的双向通讯，而缺点则是如果其他域返回恶意代码，没有办法进行追究，其次要确定jsonp的请求是否失败并不确定，不过HTML5中增加了script标签的onerror事件处理程序用于处理script标签的是否加载

function handleResponse(response){
    alert(response);
}     //handleResponse回调函数
var script  = document.createElement("script");
script.src = "xxx.jsp?callback=handleResponse";
document.body.insertBefore(script,document.body.firstChild);

comet ——一种服务器向页面推送数据的技术，长轮询和流

　　长轮询：页面发起一个到服务器的请求，然后服务器一直保持连接打开，直到有数据发送，发送完毕后浏览器关闭连接，随即又发起一个新的请求

　　HTTP流： 浏览器向服务器发送一个请求，而服务器保持连接打开，然后周期性的向浏览器发送数据。

web sockets ——在一个单独的持久连接上提供双全工，双向通讯！在js中创建了web sockets 之后会有一个http请求发送到浏览器以发起连接，在获得服务器响应后，建立的连接会将http协议交换为web socket协议该协议以wss://开头

//创建web socket 
 var socket = new WebSocket("xxx.jsp");
 socket.send("hello world");  //发送简单数据
 var  message = {
     time : new Date(),
     text : "helo world !",
     id : 1
 };
 socket.send(JSON.stringify(message)); //发送复杂数据
 
 socket.onmessage = function(event){   //接收处理服务器返回的数据
     var data = event.data;
     //coding.....处理数据
 }

web socket 对象的状态

　　　　　　WebSocket.opening（0）：正在建立连接

　　　　　　WebSocket.open（1）：连接建立完成

　　　　　　WebSocket.closeing（2）：正在关闭连接

　　　　　　WebSocket.close（3）：已经关闭连接

WebSocket的其他事件

　　　　WebSocket.open : 在成功建立连接时触发

　　　　WebSocket.error：在发生错误时触发，连接不能持续

　　　　WebSocket.close：在连接关闭时触发（并且此事件附带三个额外属性）

 socket.close = function(event){
     console.log(event.wasClean);    //布尔值，表示连接是否已经明确关闭
     console.log(event.code);        //服务器返回的数值码状态，
     console.log(event.reason);        //字符串，包含服务器返回的消息
 }

posted @ 2017-12-14 20:21 迷~途阅读(244) 评论(0) 编辑收藏举报

刷新页面返回顶部

迷~途

JAVASCRIPT高程笔记-------JSON与AJAX

公告