Ajax全套
Posted Python
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Ajax全套相关的知识，希望对你有一定的参考价值。
Ajax前戏之json：
1、什么是json?
JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式。
2、json对象和JavaScript对象的关系
json对象：javascript对象的子集，json继承了JavaScript的number，string(" ")，bool，null，array,{"name":"egon" ,"age ":18} 注意json只支持双引号 ；
3、json对象和json字符串的关系:
json字符串就是json对象+引号的字符串化，‘json对象 ’，json对象=JS对象，json字符串‘ 里面’存储的JavaScript的数据类型，所以相比其他语言JavaScript把json字符串解析成JS对象有天然优势；
3、json字符串和Python的关系
Python有Python的数据类型，JS有JS的数据类型，但前后端之所以可以交互，是因为中间有 json字符串做中间转换；
合格的json对象：
["one", "two", "three"] { "one": 1, "two": 2, "three": 3 } {"names": ["张三", "李四"] } [ { "name": "张三"}, {"name": "李四"} ]
不合格的json对象
{ name: "张三", \'age\': 32 } // 属性名必须使用双引号
[32, 64, 128, 0xFFF] // 不能使用十六进制值
{ "name": "张三", "age": undefined } // 不能使用undefined
{ "name": "张三",
"birthday": new Date(\'Fri, 26 Aug 2011 07:13:10 GMT\'),
"getName": function() {return this.name;} // 不能使用函数和日期对象
}
4、JavaScript的JSON.stringify()和JSON.stringify()方法
JSON.stringify(JS对象) 将JS对象序列化成 JSON字符串 ------->python的json.dumps()
<script> {#JSON.stringify(JS对象) 将JS对象序列化成 JSON字符串#} console.log(typeof JSON.stringify([1,2,2,2])) console.log(typeof JSON.stringify({\'name\':\'egon\'})) </script>
JSON.parse(\'JSON对象\') 将json字符串反序列化成 JS对象--------->python的json.loads()
<script> {# JSON.parse(\'JSON对象\') 将json字符串反序列化成 JS对象 #} console.log(JSON.parse(\'{"name":"egon","age":18}\')) console.log(JSON.parse(\'[1,2,3,4,5]\')) </script>
5、json和XML的比较
JSON 格式于2001年由 Douglas Crockford 提出，目的就是取代繁琐笨重的 XML数据交换格式。
用XML表示中国部分省市数据如下：
<?xml version="1.0" encoding="utf-8"?> <country> <name>中国</name> <province> <name>黑龙江</name> <cities> <city>哈尔滨</city> <city>大庆</city> </cities> </province> <province> <name>广东</name> <cities> <city>广州</city> <city>深圳</city> <city>珠海</city> </cities> </province> <province> <name>台湾</name> <cities> <city>台北</city> <city>高雄</city> </cities> </province> <province> <name>新疆</name> <cities> <city>乌鲁木齐</city> </cities> </province> </country>
用JSON表示如下：
{
"name": "中国",
"province": [{
"name": "黑龙江",
"cities": {
"city": ["哈尔滨", "大庆"]
}
}, {
"name": "广东",
"cities": {
"city": ["广州", "深圳", "珠海"]
}
}, {
"name": "台湾",
"cities": {
"city": ["台北", "高雄"]
}
}, {
"name": "新疆",
"cities": {
"city": ["乌鲁木齐"]
}
}]
优：
可以看到，JSON 简单的语法格式和清晰的层次结构明显要比 XML 容易阅读，并且在数据交换方面，由于 JSON 所使用的字符要比 XML 少得多，可以大大得节约传输数据所占用得带宽。
劣：
注意：
http://www.bejson.com/
6.把Python的datetime时间数据类型，转换成json字符串的方式
class DatetimeSerializer(json.JSONEncoder): """ 实现 date 和 datetime 类型的 JSON 序列化，以符合 公司数据格式要求。 """ def default(self, obj): if isinstance(obj, datetime.datetime): head_fmt = "%Y-%m-%d %H:%M:%S" return "{main_part}.{ms_part}".format( main_part=obj.strftime(head_fmt), ms_part=int(obj.microsecond / 1000)) elif isinstance(obj, datetime.date): fmt = \'%Y-%m-%d\' return obj.strftime(fmt) return json.JSONEncoder.default(self, obj)
def to_json(self, d): return json.dumps(d, cls=DatetimeSerializer)
Ajax是什么？
AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML，可以指定json），相对于Form表单而言的，提交时可以偷偷向后台发数据，页面不刷新；
2大特点：
1、和server端异步交互
2、偷偷向server端发送数据，页面
和form、a标签的区别
ajax、form、a标签都可以基于html页面向server端发送request，
但本质区别是form、a标签一般向server索要的是页面，而ajax则是字符串数据；
Jquery和Ajax关系：
Jquery没有Ajax功能，它之所以可以调用Ajax向服务端提交数据，是因为Jquey封装了原生Ajax的代码
使用原生Ajax的优势：
使用Ajax直接使用JS的XMLHttp Request对象， 无需引入Jquery了。这样响应客户端携带信息量减少，可节省流量。
一、Ajax种类
0、在发送ajax之前初始化ajax设置， beforeSend 函数；（如何在发送ajax之前，做一些操作）
例如设置发送ajax需要携带的CSRF-TOCKEN
function csrfSafeMethod(method) { // these HTTP methods do not require CSRF protection return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method)); } $.ajaxSetup({ beforeSend: function (xhr, settings) { // 请求头中设置一次csrf-token if(!csrfSafeMethod(settings.type)){ xhr.setRequestHeader("X-CSRFToken", $.cookie(\'csrftoken\')); } } });
1、jQueryAjax
不再过多赘述，就是jQuery框架封装了原生Ajax实现出来的；
<script> $(\'p button\').click(function () { var $user=$(\'p input\').val() d={ "name": "中国", "province": [{ "name": "黑龙江", "cities": { "city": ["哈尔滨", "大庆"] } }, { "name": "广东", "cities": { "city": ["广州", "深圳", "珠海"] } }, { "name": "台湾", "cities": { "city": ["台北", "高雄"] } }, { "name": "新疆", "cities": { "city": ["乌鲁木齐"] } }] } d=JSON.stringify(d) $.ajax({ url:\'/ajax/\', type:\'POST\', {# traditional：一般是我们的data数据有数组时会用到 #} traditional:true, data:d, {# ----------------- ajax的回调函数----------------------#} {# 1、server端response 200成功，执行的回调函数#} success:function (data) { data=JSON.parse(data) console.log(typeof data)}, {# 2、erver端 response错误，执行的回调函数 #} error:function () { console.log(arguments) alert(123) }, {# 3、无论server端返回的结果如何，都会执行的回调函数#} complete:function () { alert(321) }, {# 4、根据server端返回的状态码，执行的回调函数#} statusCode:{ \'403\':function () {alert(403)}, \'503\':function () {alert(503)} } }) }) </script>
Django 响应错误状态码
def Ajax(request): d=json.loads(request.body) print(d) province=d[\'province\'][0] print(province) d={\'city\': [\'哈尔滨\', \'大庆\']} HttpResponse.status_code=503 # return HttpResponse(json.dumps(d)) return HttpResponse(\'OK\')
$.ajax参数
请求参数
data: ajax请求要携带的数据是肯定是一个json的object对象，ajax方法就会默认地把它编码成urlencode (urlencoded:?a=1&b=2)就像form表单、a标签格式的数据发送给server，此外，ajax默认以get方式发送请求。 注意：因为ajax要携带的数据是json的object对象，也会默认编码成urlcode格式，思考 如果你用 requests模块或者原生ajax向server发送数据、或者发送json数据，应该怎么做？ 当然要指定 数据content-Type 和报头信息？ #----------------------------------------------------------------- processData：声明当前的data数据是否进行转码或预处理，默认为true，即预处理；if为false， 那么对data：{a:1,b:2}会调用json对象的toString()方法，即{a:1,b:2}.toString() ,最后得到一个［object，Object］形式的结果。 #----------------------------------------------------------------------- contentType：默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。 用来指明当前请求的数据编码格式；urlencoded:?a=1&b=2；如果想以其他方式提交数据， 比如contentType:"application/json"，即向服务器发送一个json字符串： $.ajax("/ajax_get",{ data:JSON.stringify({ a:22, b:33 }), contentType:"application/json", type:"POST", }); //{a: 22, b: 33} 注意：contentType:"application/json"一旦设定，data必须是json字符串，不能是json ---------------------------------------------- traditional：一般是我们的data数据有数组时会用到 ：data:{a:22,b:33,c:["x","y"]}, traditional为false会对数据进行深层次迭代；
响应参数
/*
dataType： 预期服务器返回的数据类型,服务器端返回的数据会根据这个值解析后，传递给回调函数。
默认不需要显性指定这个属性，ajax会根据服务器返回的content Type来进行转换；
比如我们的服务器响应的content Type为json格式，这时ajax方法就会对响应的内容
进行一个json格式的转换，if转换成功，我们在success的回调函数里就会得到一个json格式
的对象；转换失败就会触发error这个回调函数。如果我们明确地指定目标类型，就可以使用
data Type。
dataType的可用值：html｜xml｜json｜text｜script
见下dataType实例
*/
2.原生的ajax
Ajax主要就是使用 【XmlHttpRequest】对象来完成请求的操作，该对象在主流浏览器中均存在(除早起的IE)，Ajax首次出现IE5.5中存在（ActiveX控件）。
XmlHttpRequest对象的主要方法：
XmlHttpRequest.open("请求方法","请求的url",是否执行回调函数？)
send用户发送请求
在请求体里
setRequestHead()
在请求头里设置数据
getRespnseHeaders()
获取所有响应头数据
getRespnseHeader(响应头)
获取响应头中指定得header对应值
abort 终止请求
XmlHttpRequest对象的属性：
bj.readyState XMLHttpResposr的状态
0：未初始化，尚未调用open方法
1：启动调用了open方法
2：发送已经调用了send方法
3：接收状态（已经接收了部分数据）
4：完成（接收完毕服务端响应的数据）
只要对象的ready State改变就会执行该函数
xhr.onreadystatechange=function () {
}
obj.responseText 服务端返回的数据（字符串类型）
obj.responseXML 服务端返回的数据（XML对象）
obj.number states 服务端返回的状态码
obj.response stateText 服务端返回的状态信息
使用XmlHttpRequest对象发送 GET请求
function add1() { {# 得到一个XMLHttpRequest对象 xhr #} var xhr=new XMLHttpRequest(); {# open打开一个http连接到指定url XMLHttpRequest请求#} xhr.open(\'get\',\'/add1/?i1=18&name=张根 \') {# 设置请求体的数据#} xhr.send() {# XMLHttpRquest的状态改变这个函数的状态就会执行jquryAjax中的success回调函数就是基于此#} xhr.onreadystatechange=function () { if(xhr.readyState==1){console.log("对象未调用open方法")} if(xhr.readyState==2){console.log("请求发送")} if(xhr.readyState==3){console.log("接收中")} if (xhr.readyState == 4) {console.log(xhr.responseText)}} }
使用XmlHttpRequest对象发送 POST请求
function add1() { var xhr= new XMLHttpRequest() xhr.open(\'post\',\'/add1/\') xhr.send(\'name=张根&age=12\') }
问题出现了为什么后端request.post方法没有数据呢？
使用jQuery发送post请求jQuery会默认把 发送的数据（js对象）编码成urlencoded格式，使用原生ajax就不会了，
所以使用原生ajax发POST请求之前，请求头中 务必要指定数据的编码格式“Content-Type”, “application/x-www-form-urlencoded”才能发到server端；
function add1() { var xhr= new XMLHttpRequest() xhr.open(\'post\',\'/add1/\') xhr.setRequestHeader("ConTent-Type" ,"application/x-www-form-urlencoded") xhr.send(\'name=张根&age=12\') }
3、iframe标签+form表单伪造Ajax
所谓伪装Ajax操作就是不利于任何Ajax，利于其他技术向后台发送数据，这个其他的技术要从 iframa标签说起。。。。。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>欢迎来到乐X网</title> </head> <body> <iframe style="width:1000px; height:2000px" src="https://www.hhh286.com/htm/movieplay1/6748.htm" ></iframe> </body> </html>
神奇的一幕发生了 自动跳转到其他网站了
还可以 这么玩
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>欢迎来到乐C网</title> </head> <body> <div> <input type="text"<以上是关于Ajax全套的主要内容，如果未能解决你的问题，请参考以下文章