Ajax_02

一、引言

	Ajax异步请求是Javascript和Python（或其它语言）的通信，也属于跨平台通信的范畴。数据格式采用了字符串的形式。      

	（Ajax是运用在客户端浏览器的技术，用于向服务器发送一个异步请求。 从发送请求--服务器接收并处理请求--返回响应结果，在此过程中客户端和服务器完成了一次数据交换。客户端发送“用户名”给服务器，服务器返回“用户名已存在/用户名合法”）

	之前通信的字符串中包含的数据量较小，OK、Error等简短的信息。   

	如果要在异步请求中通信更大量的数据呢，如何做？ 

	比如：客户端发送一个请求到服务器，请求查询所有用户的信息，并显示在前端页面

二、数据交换格式

1、XML

简介

	XML可扩展标记语言（extensible Markup Language）。表示的是计算机所能理解的信息符号，通过这种标记，计算机之间可以处理包含各种数据信息。
	XML是一种标记语言，类似HTML
	XML的设计宗旨是传输数据，而非显示数据
	XML只是简单地描述信息，并以独立于平台的格式进行分发。由于不需要使用任何一种特定的语言，因此XML与平台无关。

简单实例

<?xml version="1.0" encoding="utf-8"?>      //指明了XML的版本号和编码方式
<Employees> 
 	<Employee> 
    	<Name>Bob Smith</Name> 
    	<PhoneNumber>408-555-1000</PhoneNumber> 
	 </Employee> 
 	<Employee> 
    	<Name>Sally Jones</Name> 
		<PhoneNumber>415-555-2000</PhoneNumber>         
	</Employee> 
</Employees>

作用

	XML是用来传送数据信息，HTML使用来表现数据，所以XML用途的焦点是说明数据是什么，以及携带的数据信息。

2、JSON

简介

	JSON（JavaScript Object Nonation）是一种轻量级的数据交换格式
	JSON完全独立于语言的文本格式，但是使用了类似于C语言家族的习惯（包括C、C++、C#、JavaScript、Java、Perl、Python等）。这些特性使JSON成为理想的数据交换语言
	易于人阅读和编写，同时也易于机器解析和生成(网络传输速度)。 
	JSON 文本格式在语法上与创建 JavaScript 对象的代码相同。由于这种相似性， 无需解析器， JavaScript 程序能够使用内建的 eval() 函数， 用 JSON 数据来生成原生的 JavaScript 对象。

JSON结构

JSON有两种结构，字典和数组

json和XML对比

	编码的可读性，xml有明显的优势，毕竟人类的语言更贴近这样的说明结构。json读起来更像一个数据块，读起来就比较费解了。不过，我们读起来费解的语言，恰恰是适合机器阅读和解析。

	编码的手写难度来说，xml还是舒服一些，好读当然就好写。不过写出来的字符JSON就明显少很多。去掉空白制表以及换行的话，JSON就是密密麻麻的有用数据，而xml却包含很多重复的标记字符。

	虽然XML和JSON都有各自的编码工具，但是JSON的编码要比XML简单，即使不借助工具，也可以写出JSON代码，但要写出好的 XML代码就有点困难；与XML一样，JSON也是基于文本的，且它们都使用Unicode编码，且其与数据交换格式XML一样具有可读性。

	主观上来看，JSON更为清晰且冗余更少些。JSON网站提供了对JSON语法的严格描述，只是描述较简短。从总体来看，XML比较适合于标记文档，而JSON却更适于进行数据交换处理。

	在解析上，在普通的web应用领域，开发者经常为XML的解析伤脑筋，无论是服务器端生成或处理XML，还是客户端用Python解析XML，都常常导致复杂的代码，极低的开发效率。 

	作为一种轻量级的数据交换格式，json正在逐步取代xml，成为网络数据的通用格式。

	有的json代码格式比较混乱，可以使用此http://www.bejson.com/网站来进行JSON格式化校验。此网站不仅可以检测Json代码中的错误，而且可以以视图形式显示json中的数据内容，很是方便。

三、Model转JSON

1、json.dumps

在Python中通过json模块，将常用的数据类型转化成json字符串。但是json支持的数据类型是有限的。

支持的数据类型

+-------------------+---------------+
| Python            | JSON          |
+===================+===============+
| dict              | object        |
+-------------------+---------------+
| list, tuple       | array         |
+-------------------+---------------+
| str               | string        |
+-------------------+---------------+
| int, float        | number        |
+-------------------+---------------+
| True              | true          |
+-------------------+---------------+
| False             | false         |
+-------------------+---------------+
| None              | null          |
+-------------------+---------------+

2、Model-JSON

def query(request):
    users = User.objects.all()    
    def user_default(u):
        if isinstance(u,User):
            return {'id':u.id,'name':u.name,'age':u.age,'salary':u.salary}
    json_str = json.dumps(list(users),default=user_default)   #将QuerySet对象转为list
    return HttpResponse(json_str)

或者

def query(request):
    users = User.objects.all().values()  #返回字典形式的QuerySet    
    json_str = json.dumps(list(users))   #将QuerySet对象转为list
    return HttpResponse(json_str)
# 使用此方法，需要注意User类中不能有不可序列化的类型

3、JsonResponse对象

参数

class JsonResponse(data, encoder=DjangoJSONEncoder, safe=True, json_dumps_params=None,**kwargs) 

data			字典类型
safe			传入的数据类型不是字典就会报错，当设为false就可以是任意类型
json_dumps_params 对data的每个数据进行函数处理

总结

	1、JsonResponse内部会调用json.dumps，即JsonResponse的第一个参数可以直接接Model/集合

	2、但使用JsonResponse仍然需要设置default --JsonResponse(data，json_dumps_params={"default":user_default})

	3、如果data不是字典dict类型，需要将data转为dict {"key":data} 或者直接将safe参数设置为False

	4、如果JsonResponse的第一个参数是dict类型，则在Javascript中 eval("(" + xhr.responseText + ")")

	5、当使用JsonResponse返回时，传递的不是json字符串，而是json对象，即在javascript中接收的是一个json对象。

四、Jquery-Alax

1、$.ajax()

$.ajax({
   type:"POST",
   url:"{% url 'ajaxapp:test' %}",
   data:"name='as'&csrfmiddlewaretoken="+"{{ csrf_token }}",
   success:function (msg) {
       alert(msg)
   }
})

url:待载入页面的URL地址
data:待发送 Key/value 参数。
success:载入成功时回调函数。
type:请求的方式
datatype:返回内容格式，xml, html, script, json, text, _default。

2、$.get()

$.get(
    "{% url "ajaxapp:test" %}",          
    "name=as",
    function(data){
        alert(data)
    },
    "json"
)

url:待载入页面的URL地址
data:待发送 Key/value 参数。
callback:载入成功时回调函数。
type:返回内容格式，xml, html, script, json, text, _default。

3、$.post()

$.post(
    "{% url "ajaxapp:test" %}",
    "name=as&csrfmiddlewaretoken="+"{{ csrf_token }}",
    function(data){
        alert(data)
    },
    "text"
)

4、$.ajaxSetup()

作用

把相同的部分抽取出来，就不需要为每一个ajax请求配置参数
对$.get和$.post无效

//为所有的请求 设置headers和url参数选项
$.ajaxSetup({
    headers:{"X-CSRFToken":"{{ csrf_token }}"},
    url:"{% url 'ajax_query_user:query' %}"
    })

5、load()方法

load() 方法通过 AJAX 请求从服务器加载数据，并把返回的数据放置到指定的元素中。
$("#div_1").load("{% url 'ajaxapp:loadHTML' %}")
其实就是把接收的数据放在页面上