json和ajax资料整理

以下近期学习到json和ajax资料整理，若有不准，请各位指出，欢迎交流学习

json

简析：JSON，JavaScript Object Notation，一种更轻、更友好的用于接口(AJAX、REST等)数据交换的格式。 JSON是结构化数据串行化的文本格式，作为XML的一种替代品，用于表示客户端与服务器间数据交换有效负载的格式

目的：方便不同程序之间交换数据

背景：网页访问期间，浏览器和服务器之间交互只能发送字符串

格式：键值对，如{“pageIndex”:1,“pageSize”:20}

其他支持语言：js，python，Java，PHP都支持json的编码与解码

python内置支持：
1、导入模块：import json
2、将对象转换为json字符串：json.dumps()
3、将json字符串转换为python列表与数组：json.loads()

>>> string = \'{\"uploaded\":1, \"fileName\": \"foo.jpg\", \"url\": \"/files/foo.jpg\"}\'>>> type(string)<class \'str\'>>>> import json>>> dicts = json.loads(string)>>> dicts{\'uploaded\': 1, \'fileName\': \'foo.jpg\', \'url\': \'/files/foo.jpg\'}>>> type(dicts)<class \'dict\'>>>> strings = json.dumps(dicts)>>> strings\'{\"uploaded\": 1, \"fileName\": \"foo.jpg\", \"url\": \"/files/foo.jpg\"}\'>>> type(strings)<class \'str\'>

js内置支持：
1、将对象转换为json字符串：JSON.stringify()
2、将json字符串转换为js的数组与对象：JOSN.parse()

>>> string = \'{\"uploaded\":1, \"fileName\": \"foo.jpg\", \"url\": \"/files/foo.jpg\"}\'>>> dd = JSON.parse(string)>>> {uploaded: 1, fileName: \"foo.jpg\", url: \"/files/foo.jpg\"}>>> typeof(dd)>>> \"object\">>> strings = JSON.stringify(dd)>>> \"{\"uploaded\":1,\"fileName\":\"foo.jpg\",\"url\":\"/files/foo.jpg\"}\">>> typeof(strings)>>> \"string\">>> dd.uploaded>>> 1>>> dd.fileName>>> \"foo.jpg\">>> dd.url>>> \"/files/foo.jpg\"

**序列化和反序列化:**这两个过程结合起来，可以轻松地存储和传输数据
1、序列化：将对象状态转换为可保持或可传输的格式的过程
2、反序列化：将流转换为对象
3、python序列化方法：

import jsonjson.dump(obj)#转换为流json.dumps(obj)#转换为str

4、python反序列化方法：

import jsonjson.loads(obj)#转换为python对象json.load(f)#json.loads是用来读取字符串的，json.load用来读取文件

ajax

简析：AJAX全称“Asynchronous JavaScript and XML”（异步JavaScript和XML），是指一种创建交互式网bai页应用的网页开发du技术

又名：无刷新数据提交

背景：表单提交过程中会带来整个页面的刷新，如果发生错误，卡顿，对用户的体验很不好

特点：
1、不刷新页面情况下加载数据
2、经常加载json格式数据
3、在js中，json格式数据使用JSON对象进行编解码

xhr：1
1、和ajax关系：ajax核心之一，可以理解为实现方式
2、全称：XMLHttpRequest

#以下为和服务器交换时部分代码

xhr = new XMLHttpRequest()xhr.open(\"get\",\"url\",async)#async默认为true，异步提交，否则为同步xhr.send()

btn = document.getElementById(\'btn\')message = document.getElementById(\'message\')ul = document.getElementById(\'news\')xhr = new XMLHttpRequest()xhr.onreadystatechange = function(){console.log(this.readyState)console.log(this.status)if (this.readyState==4 && this.status==200){console.log(\"服务器返回：\", this.responseText)message.innerHTML = this.responseText}}btn.onclick = function(){message.innerHTML = \"请等待……\"data = new FormData()data.append(\'newstype\', document.getElementById(\'newstype\').value)xhr.open(\"post\", \'{{ url_for(\"test_form\") }}\', true)xhr.send(data)}

jQuery的ajax对象

背景：jQuery提供了ajax封装对象，可以理解为ajax的升级版（封装）

标准使用：

$.ajax({type:\"POST\",url:\"\",data:data,contentType:,success:function(result){},……});

快速使用：

$(dom).load(ulr)#dom加载url$.get(url,data,callback)#get请求$.post(url,data,callback)#post请求