原生js学习笔记(七)
2018-03-01 09:51
274 查看
JSON是一种数据格式
JSON语法可以表示三种类型的值
简单值:可以表示字符串、布尔值、数值和null,但不支持undefined
对象:要求给属性加引号,没有声明变量,没有末尾分号
数组:也没有变量和分号
JSON解析与序列化
JSON对象有两种方法:JSON.stringify()和JSON.parse();分别用于把JavaScript对象序列化为JSON字符串和把JSON字符串解析为原生JavaScript值
JSON.stringify()除了要序列化的JavaScript对象外,还可以接收两个参数。第一个是过滤器,可以是一个数组也可以是一个函数;第二个参数是一个选项,表示是否在JSON字符串中保留缩进。如果这个参数是一个数值,则表示每个级别缩进的空格数;如果缩进参数是一个字符串,则这个字符串将在JSON字符串中被用作缩进字符。
Ajax核心是XMLHttpRequest对象
XHR的open()方法,接受3个参数:要发送请求的类型、请求的URL、表示是否异步发送请求的布尔值
例如xhr.open("get","example.php",false); //表示启动一个针对example.php的GET请求,且是同步请求。
然后要发送特定请求,需要调用send()方法,send()必须接受一个参数作为请求主体发送的数据,如果不需要发送数据则传入null;
对于发送异步请求,可以检测XHR对象的readyState属性(表示请求/响应过程的当前活动阶段,其中4表示完成)var Ajax={
get: function(url, fn) {
var xhr = new XMLHttpRequest(); // XMLHttpRequest对象用于在后台与服务器交换数据
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200 || xhr.status == 304) { // readyState == 4说明请求已完成
fn.call(this, xhr.responseText); //从服务器获得数据
}
};
xhr.open('GET', url, true); //必须在调用open()之前指定onreadystatechange事件处理程序才能确保跨浏览器兼容性
xhr.send();
},
post: function (url, data, fn) { // datat应为'a=a1&b=b1'这种字符串格式,在jq里如果data为对象会自动将对象转成这种字符串格式
var xhr = new XMLHttpRequest();
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); // 添加http头,发送信息至服务器时内容编码类型
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) { // 304未修改
fn.call(this, xhr.responseText);
}
};
xhr.open("POST", url, true);
xhr.send(data);
}
}
JSON语法可以表示三种类型的值
简单值:可以表示字符串、布尔值、数值和null,但不支持undefined
对象:要求给属性加引号,没有声明变量,没有末尾分号
数组:也没有变量和分号
JSON解析与序列化
JSON对象有两种方法:JSON.stringify()和JSON.parse();分别用于把JavaScript对象序列化为JSON字符串和把JSON字符串解析为原生JavaScript值
JSON.stringify()除了要序列化的JavaScript对象外,还可以接收两个参数。第一个是过滤器,可以是一个数组也可以是一个函数;第二个参数是一个选项,表示是否在JSON字符串中保留缩进。如果这个参数是一个数值,则表示每个级别缩进的空格数;如果缩进参数是一个字符串,则这个字符串将在JSON字符串中被用作缩进字符。
Ajax核心是XMLHttpRequest对象
XHR的open()方法,接受3个参数:要发送请求的类型、请求的URL、表示是否异步发送请求的布尔值
例如xhr.open("get","example.php",false); //表示启动一个针对example.php的GET请求,且是同步请求。
然后要发送特定请求,需要调用send()方法,send()必须接受一个参数作为请求主体发送的数据,如果不需要发送数据则传入null;
对于发送异步请求,可以检测XHR对象的readyState属性(表示请求/响应过程的当前活动阶段,其中4表示完成)var Ajax={
get: function(url, fn) {
var xhr = new XMLHttpRequest(); // XMLHttpRequest对象用于在后台与服务器交换数据
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200 || xhr.status == 304) { // readyState == 4说明请求已完成
fn.call(this, xhr.responseText); //从服务器获得数据
}
};
xhr.open('GET', url, true); //必须在调用open()之前指定onreadystatechange事件处理程序才能确保跨浏览器兼容性
xhr.send();
},
post: function (url, data, fn) { // datat应为'a=a1&b=b1'这种字符串格式,在jq里如果data为对象会自动将对象转成这种字符串格式
var xhr = new XMLHttpRequest();
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); // 添加http头,发送信息至服务器时内容编码类型
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) { // 304未修改
fn.call(this, xhr.responseText);
}
};
xhr.open("POST", url, true);
xhr.send(data);
}
}
相关文章推荐
- JS学习笔记 —— 原生Ajax总结
- 原生js学习笔记(六)
- 【JavaEE】javaEE学习笔记之Js原生Ajax和jQuery 的Ajax
- AJAX学习笔记之原生JS使用方法
- AJAX学习笔记之XML对象原生JS使用方法
- HTML5独家分享:原生JS学习笔记2——程序流程控制
- 原生JS学习笔记2——程序流程控制
- 【学习】原生js学习笔记1:添加class和使input为不可用
- Jquery学习笔记(10)--ajax删除用户,使用了js原生ajax
- 关于原生js中ajax部分的学习笔记
- jQuery学习笔记(一) 原生js写法
- 原生JS学习笔记3——数组
- 原生JS学习笔记4——DOM操作
- js原生JSON学习笔记
- javascript学习笔记--js对html对象的原生操作
- node.js学习笔记--官方原生模块-queryString,url,Buffer
- JS原生-----学习笔记1
- 原生js学习笔记——Ajax基础
- JS-学习笔记:原生JS实现轮播图
- 原生JS实例练习——控制div属性—— JS学习笔记2015-8-4(第93天)