一:JSON基础
1. 什么是JSON ?
JSON(JavaScript Object Noataion)是js语言的一个子集,它是一种数据格式,使用JSON可以很容易的将js对象的属性序列化为一个字符串或者将JSON字符串反序列化为js对象。与传统的XML数据传输格式相比,JSON更加容易阅读和理解,同时解析JSON字符串也更加容易(一行代码),相比于XML而言,传输相同的信息,JSON字符串体积更小。
// 一个JSON字符串例子
{
"firstName": "Cruise",
"lastName": "Tom",
"age": 56,
"address": null
}
2. JSON中的数据格式
JSON可以表示三种数据:简单值,对象和数组
2.1 简单值包括:字符串、数值、布尔值和null,与js字符串不同,JSON中的字符串必须使用双引号
2.2 对象:
// JSON表示的对象中只有属性,没有变量、函数和方法,属性名称必须使用双引号!
{
"firstName": "Cruise",
"lastName": "Tom",
"age": 56,
"address": {
"street": "123 someplace",
"city": "Los Angeles",
"state": "California"
}
}
2.3 数组(多个对象):
[
{
"firstName": "Sheldon",
"lastName": "Cooper",
"age": 37,
"address": {
"street": "321 someplace",
"city": "Pasadena",
"state": "California"
}
},
{
"firstName": "Cruise",
"lastName": "Tom",
"age": 56,
"address": {
"street": "123 someplace",
"city": "Los Angeles",
"state": "California"
}
}
]
3. JSON字符串的序列化与反序列化
// 创建一个js对象
var person = {
"firstName": "Sheldon",
"lastName": "Cooper",
"age": 37,
"address": {
"street": "321 someplace",
"city": "Pasadena",
"state": "California"
}
};
// 将js对象序列化一个JSON字符串
var json = JSON.stringify(person);
// 将JSON字符串反序列化为js对象
var actor = JSON.parse(json);
二 :Ajax基础
1. Ajax的概念
Ajax允许浏览器通过javascript向服务器发送请求和接收数据,而无需刷新整个Web页面。
2. XMLHttpRequest对象
XMLHttpRequest对象是浏览器的内置对象,使用该对象可以向服务器发送请求,获取数据。
2.1 创建XMLHttpRequest对象,用于连接服务器,发送请求和接收数据
var request = new XMLHttpRequest();
2.2 初始化XMLHttpRequest对象
// 初始化XMLHttpRequest对象
// requestType: 请求类型,POST/GET
// url: 请求发送的目标
// async: 指定请求是同步还是异步模式,默认是异步的(默认值true),一般省略该参数
request.open(requestType, url, async);
2.3 异步调用,绑定事件处理函数
XMLHttpRequest对象包含一个readyState属性,该属性值是一个数字,用于表示请求的状态:
0---对象已创定,未调用open()方法
1--已调用open()初始化对象,未发送请求
2--请求已发送
3--开始接收来自服务器的数据
4--服务器响应完毕(200/404/500...)
readyState属性值变化的时候都会触发readystatechange事件,调用onreadystatechange事件处理函数
// 定义事件处理函数,XMLHttpRequest请求完毕的调用
function reqReadyStateChange(){
if(request.readyState == 4){ // 服务器响应完毕
if(request.status == 200){ // http状态码200,请求处理成功
// responseText表示服务器响应的数据
alert(request.responseText);
} else {
alert("The server retutn a status code of " + request.status);
}
}
}
// 将函数绑定到事件上
request.onreadystatechange = reqReadyStateChange;
// 发送请求,接收一个字符串类型的参数,参数为发送给服务器的请求体,如果不包含请求体,则将null作为值传入(必须)
request.send(null);
2. 封装简易的Ajax模块
封装Ajax模块,提高代码的复用性
// 封装XMLHttpRequest对象的函数,GET类型的异步Ajax请求
function HttpRequest(url, callback){
// 创建并初始化XMLHttpRequest对象
this.reqeust = new XMLHttpRequest();
this.reqeust.open("GET", url, true);
var temRequest = this.reqeust;
// 定义事件处理函数
function reqReadyStateChange(){
if(temRequest.readyState == 4){ // 服务器请求响应完毕
if(temRequest.status == 200){ // 请求处理成功
// responseText属性为服务器返回的数据
callback(temRequest.responseText);
}
}
}
// 为readystatechange事件绑定事件处理函数
temRequest.onreadystatechange = reqReadyStateChange;
}
// 封装send方法,之后调用send()方法无需传递参数
HttpRequest.prototype.send = function(){
this.reqeust.send(null);
}