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 json
json.dump(obj)#转换为流
json.dumps(obj)#转换为str

4、python反序列化方法：

import json
json.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请求