ajax应⽤实例,AJAX应⽤实例讲解
AJAX准备知识：JSON
什么是 JSON ？
JSON 指的是 JavaScript 对象表⽰法(JavaScript Object Notation)
JSON 是轻量级的⽂本数据交换格式
JSON 独⽴于语⾔ *
JSON 具有⾃我描述性，更易理解
* JSON 使⽤ JavaScript 语法来描述数据对象，但是 JSON 仍然独⽴于语⾔和平台。JSON 解析器和 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;} //不能使⽤函数和⽇期对象
}
stringify与parse⽅法
JavaScript中关于JSON对象和字符串转换的两个⽅法：
JSON.parse(): ⽤于将⼀个 JSON 字符串转换为 JavaScript 对象
JSON.parse('{"name":"djb"}');
JSON.parse('{name:"djb"}') ; //错误
JSON.parse('[18,undefined]') ; // 错误
JSON.stringify(): ⽤于将 JavaScript 值转换为 JSON 字符串。
JSON.stringify({"name":"djb"})
和XML的⽐较
JSON 格式于2001年由 Douglas Crockford 提出，⽬的就是取代繁琐笨重的 XML 格式。
JSON 格式有两个显著的优点：书写简单，⼀⽬了然；符合 JavaScript 原⽣语法，可以由解释引擎直接处理，不⽤另外添加解析代码。所以，JSON迅速被接受，已经成为各⼤⽹站交换数据的标准格式，并被写⼊ECMAScript 5，成为标准的⼀部分。
XML和JSON都使⽤结构化⽅法来标记数据，下⾯来做⼀个简单的⽐较。
⽤XML表⽰中国部分省市数据如下：
中国
⿊龙江
哈尔滨
⼤庆
⼴东
⼴州
深圳
珠海
台湾
台北
⾼雄
新疆
乌鲁⽊齐
XML格式数据
省市信息
⽤JSON表⽰如下：
{"name": "中国","province": [{"name": "⿊龙江","cities": {"city": ["哈尔滨", "⼤庆"]
}
}, {"name": "⼴东","cities": {"city": ["⼴州", "深圳", "珠海"]
}
}, {"name": "台湾","cities": {"city": ["台北", "⾼雄"]
}
}, {"name": "新疆","cities": {"city": ["乌鲁⽊齐"]
}
}]
}
JSON格式数据
Json格式
由上⾯的两端代码可以看出，JSON 简单的语法格式和清晰的层次结构明显要⽐ XML 容易阅读，并且
在数据交换⽅⾯，由于 JSON 所使⽤的字符要⽐ XML 少得多，可以⼤⼤得节约传输数据所占⽤得带宽。
AJAX简介
AJAX(Asynchronous Javascript And XML)翻译成中⽂就是“异步的Javascript和XML”。即使⽤Javascript语⾔与服务器进⾏异步交互，传输的数据为XML(当然，传输的数据不只是XML)。
AJAX 不是新的编程语⾔，⽽是⼀种使⽤现有标准的新⽅法。
AJAX 最⼤的优点是在不重新加载整个页⾯的情况下，可以与服务器交换数据并更新部分⽹页内容。(这⼀特点给⽤户的感受是在不知不觉中完成请求和响应过程)
AJAX 不需要任何浏览器插件，但需要⽤户允许JavaScript在浏览器上执⾏。
同步交互：客户端发出⼀个请求后，需要等待服务器响应结束后，才能发出第⼆个请求；
异步交互：客户端发出⼀个请求后，⽆需等待服务器响应结束，就可以发出第⼆个请求。
AJAX常见应⽤情景
搜索引擎根据⽤户输⼊的关键字，⾃动提⽰检索关键字。
还有⼀个很重要的应⽤场景就是注册时候的⽤户名的查重。
其实这⾥就使⽤了AJAX技术！当⽂件框发⽣了输⼊变化时，使⽤AJAX技术向服务器发送⼀个请求，然后服务器会把查询到的结果响应给浏览器，最后再把后端返回的结果展⽰出来。
整个过程中页⾯没有刷新，只是刷新页⾯中的局部位置⽽已！
当请求发出后，浏览器还可以进⾏其他操作，⽆需等待服务器的响应！
当输⼊⽤户名后，把光标移动到其他表单项上时，浏览器会使⽤AJAX技术向服务器发出请求，服务器会查询名为lemontree7777777的⽤户是否存在，最终服务器返回true表⽰名为lemontree7777777的⽤户已经存在了，浏览器在得到结果后显⽰“⽤户名已被注册！”。整个过程中页⾯没有刷新，只是局部刷新了；
在请求发出后，浏览器不⽤等待服务器响应结果就可以进⾏其他操作；
AJAX的优缺点
优点：
AJAX使⽤JavaScript技术向服务器发送异步请求；
AJAX请求⽆须刷新整个页⾯；
因为服务器响应内容不再是整个页⾯，⽽是页⾯中的部分内容，所以AJAX性能⾼；
jQuery实现的AJAX
最基本的jQuery发送AJAX请求⽰例：
ajax test
AJAX 测试
$("#ajaxTest").click(function () {
$.ajax({
url:"/ajax_test/",
type:"POST",
data: {username:"djb", password: 123456},
success: function (data) {
alert(data)
}
})
})
views.py：
defajax_test(request):
user_name= ("username")
password= ("password")print(user_name, password)return HttpResponse("OK")
$.ajax参数
data参数中的键值对，如果值值不为字符串，需要将其转换成字符串类型。
$("#b1").on("click", function () {
$.ajax({
url:"/ajax_add/",
type:"GET",
data:{"i1":$("#i1").val(),"i2":$("#i2").val(),"hehe": JSON.stringify([1, 2, 3])},
success:function (data) {
$("#i3").val(data);
}
})
})
JS实现AJAX
var b2 = ElementById("b2");
b2.οnclick=function () {//原⽣JS
var xmlHttp=new XMLHttpRequest();
xmlHttp.open("POST", "/ajax_test/", true);
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlHttp.send("username=q1mi&password=123456");
}
};
};
原⽣JS实现AJAX
AJAX请求如何设置csrf_tokendjango项目实例
⽅式1
$.ajax({
url:"/cookie_ajax/",

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。