js与json和ajax,JS关键知识点：JSON和Ajax

随堂知识总结：

一、JSON相关知识：

1、json是借用了JS对象字面量法来表示数据，是一种轻量级，用于数据交换与存储的格式化的字符串(本质上仍是一个字符串)；

2、json数据类型：

简单值：100，”hello”,true,null,没有undefined

对象：{……}

数组：[……]

简单值字符串：必须且只能用双引号作为定界符；

3、JS中有关json的两个方法：

序列化：JS对象序列化为JSON格式的字符串JSON.stringify(JS_obj,array|fucntion(key,value){……},'字符缩进数和字符');当第二个参数为数组时：限制序列化成员(序列化白名单);反之为回调函数对JS对象中的元素进一步处理返回JSON中(必须有return value；否则为空，如果不需要某值返回undefined);第三个参数为JSON缩进字符；

注意：JS对象序列化之后，会将以下三种成员删除：

(1)方法(函数)

(2)值为undefined的属性

(3)继承的原型对象成员

解析：将JSON格式的字符串解析/还原为JS对象JSON.parse(json,function(key,value){……;return value;});当只有一个参数时：直接解析JSON对象返回JS对象；当为两个参数时：第二个参数为回调函数，把JSON对象中的值处理后在返回；

4、JSON与JS对象的区别：

(1)没有变量声明：JSON中没有变量的概念

(2)没有分号：JSON不是语句；

(3)JSON属性名必须加上双引号：任何时候任何地方都必须加双引号，且必须加双引号

tips:为了规范/自定义序列化的返回结果，允许在JS对象中创建一个方法：toJSON;toJSON在调用JSON.stringify()时自动调用，像魔术方法一样；

二、AJax相关知识:

1、同步和异步的概念：

同步：发出请求得到响应放回数据，才可以发送另一个

异步：发出请求，不需要得到响应回复就可以发出另一个请求，(回调函数);

2、XMLHttpRequest基本流程(两种形式GET和POST)：

(1)、请求的进本流程(GET)

创建请求对象：xhr=newXMLHttpRequest();

监听请求回调：xhr.onreadystatechange=function(){};

设置请求参数：xhr.open(请求类型，请求url,是否异步)(默认true,异步)

发送请求：xhr.send(null)

(2)、请求的基本流程(POST)

创建请求对象：xhr=newXMLHttpRequest();

监听请求回调：xhr.onreadystatechange=function(){};

设置请求头：xhr.open(请求类型，请求url,是否异步)：默认true,异步

设置请求头：xhr.setRequestHeader()

准备请求的数据：vardata={……}

发送请求：xhr.send(data);可以添加键值对形式返回:send(‘user=’+data);

3、监听事件：onreadystatechange(在xhr监听对象中,xhr可以用this代替)

reponseText:返回ajax请求文本

reponseXML：返回的html/xml;

readyState===4:标识Ajax请求状态(4代表成功)

status:返回数据(200代表OK)

4、发送数据的两种格式在请求头中设置:

xhr.setRequestHeader('content-type','applicaton/x-www-form-urlencoded')表单数据形式

xhr.setRequestHeader('content-type','applicaton/json;charset=utf-8')json数据形式

在Ajax中POST形式中还有一种默认表单数据发送形式(不需要设置请求头):FormData();

vardata=newFormData();

data.append(key,value);

xhr.send(data);

5、附加知识点:

setTimeout(函数、time) 方法用于在指定的毫秒数后调用函数或计算表达式。

οnsubmit="return false"禁用表单提交事件；

6、获取Ajax发送的数据:以GET形式发送的数据:$_GET

以POST形式发送的数:$_POST

数据格式如果是JSON格式,则以file_get_contents(‘php://input’)获取,其他都已$_POST获取;

Ajax请求返回的响应一般是responseText文本格式,所以服务端接受Ajax默认返回数据转化成JSON格式返回;

代码练习

1.Ajax请求GET形式

Document

服务器成功调用

// 创建请求对象

varxhr=newXMLHttpRequest();

//创建回调监听

xhr.onreadystatechange=function(){

if(xhr.readyState===4&&xhr.status===200){

console.log(xhr.responseText);

varh2=document.createElement("h2");

h2.innerHTML=xhr.responseText;

document.body.appendChild(h2);

}

};

xhr.open("GET","test.php",true);

xhr.send(null);