jQuery AJAX基础
Posted Eric
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery AJAX基础相关的知识，希望对你有一定的参考价值。
一、JSON
定义：
JSON(javascript Object Notation, JS对象标记）是一种轻量级的数据交换格式。
它基于 ECMAScript（w3c制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。
简洁和清晰的层次结构使得JSON称为理想的数据交换语言。易于阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
json类型：
数字类型，字符串类型，布尔类型，数组类型，对象类型，null
JS中的JSON用法
stringfy和parse方法
JSON.parse(); //用于将一个JSON字符串转换为JavaScript对象 JSON.stringfy(); //用于将JavaScript值转换为JSON字符串
和XML的比较
JSON格式与2001年由Douglas Crockford提出，目的就是取代繁琐笨重的XML格式。
符合JavaScript原声语法，可以又解释器引擎直接处理，不用另外添加解释代码。所以，JSON迅速被接收，已经成为各大网站交换数据个标准格式，并被写入ECMAScript5,成为标准的一部分。
XML和JSON都使用结构化方法来标记数据。
用XML表示中国部分省市数据如下：
1 <?xml version="1.0" encoding="utf-8"?> 2 <country> 3 <name>中国</name> 4 <province> 5 <name>黑龙江</name> 6 <cities> 7 <city>哈尔滨</city> 8 <city>大庆</city> 9 </cities> 10 </province> 11 <province> 12 <name>广东</name> 13 <cities> 14 <city>广州</city> 15 <city>深圳</city> 16 <city>珠海</city> 17 </cities> 18 </province> 19 <province> 20 <name>台湾</name> 21 <cities> 22 <city>台北</city> 23 <city>高雄</city> 24 </cities> 25 </province> 26 <province> 27 <name>新疆</name> 28 <cities> 29 <city>乌鲁木齐</city> 30 </cities> 31 </province> 32 </country>
用JSON表示如下：
1 { 2 "name": "中国", 3 "province": [{ 4 "name": "黑龙江", 5 "cities": { 6 "city": ["哈尔滨", "大庆"] 7 } 8 }, { 9 "name": "广东", 10 "cities": { 11 "city": ["广州", "深圳", "珠海"] 12 } 13 }, { 14 "name": "台湾", 15 "cities": { 16 "city": ["台北", "高雄"] 17 } 18 }, { 19 "name": "新疆", 20 "cities": { 21 "city": ["乌鲁木齐"] 22 } 23 }] 24 }
可以看到，JSON简单的语法格式和清晰的层次结构明显要比XML容易阅读，并且在数据交换方面，由于JSON所使用的字符要比XML少得多，可以大大节约传输数据所占用的带宽。
二、Ajax简介
AJAX（Asynchronous Javascript And XML)，异步Javascript和XML。即使用Javascript语言与服务器进行异步交互，传输的数据为XML(当然，传输的数据不只是XML)
- 同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求
- 异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求
AJAX出了异步的特点外，还有一个就是：浏览器页面局部刷新；（这一特点给用户的感受是在不知不觉中完成请求和响应过程)
JS实现的局部刷新：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 ? 7 <style> 8 .error{ 9 color:red 10 } 11 </style> 12 </head> 13 <body> 14 ? 15 ? 16 <form class="Form"> 17 ? 18 <p>姓名 <input class="v1" type="text" name="username" mark="用户名"></p> 19 <p>密码 <input class="v1" type="text" name="email" mark="邮箱"></p> 20 <p><input type="submit" value="submit"></p> 21 ? 22 </form> 23 ? 24 <script src="jquery-3.1.1.js"></script> 25 ? 26 <script> 27 $(".Form :submit").click(function(){ 28 flag = true; 29 $("Form .v1").each(function(){ 30 var value = $(this).val(); 31 if(value.tirm().length==0{ 32 var mark = $(this).attr("mark"); 33 var $span = $("<span>"); 34 $span.html(mark+"不能为空!"); 35 $span.prpo("class", "error"); 36 $(this).after($span); 37 38 setTimeout(function(){ 39 $span.remove(); 40 }, 800); 41 flag = false; 42 return flag; 43 } 44 }); 45 return falg 46 }); 47 </script> 48 </body> 49 </html>
AJAX的优势
- AJAX使用Javascript技术向服务器发送异步请求
- AJAX无需刷新整个页面
- 因为服务器响应内容不再是整个页面，而是页面中的局部，所以AJAX性能高
jQuery实现的ajax
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 ? 9 <button class="send_Ajax">send_Ajax</button> 10 ? 11 <script> 12 // $.ajax的两种使用方式： 13 // 1 $.ajax(settings); 14 // 2 $.ajax(url, [settings]); 15 16 $(".send_Ajax").click(function(){ 17 $.ajax({ 18 url: "/handle_Ajax/", 19 type: "POST", 20 data: {username:"Lucy", password: 123}, 21 22 success:function(data){ 23 alert(data) 24 }, 25 // error 26 error:function(jqXHR, textStatus, err){ 27 //jqXHR: jQuery增强的xhr 28 //textStatus: 请求完成状态 29 //err：底层通过throw抛出的异常对象，值与错误类型有关 30 console.log(arguments); 31 }, 32 // complete 33 complete:function(jqXHR, textStatus){ 34 //jqXHR: jQuery增强的xhr 35 //textStatus: 请求完成状态 success | error 36 }, 37 statusCode:{ 38 ‘403‘:function(jqXHR, textStatus,err){ 39 console.log(arguments); 40 }, 41 "400":function(){} 42 }, 43 }) 44 } 45 </script> 46 </body> 47 </html>
$.ajax参数
请求参数
************ data ************ data: 当前ajax请求要携带的数据，是一个json的object对象，ajax方法就会默认把它编码成某种格式(urlencoded:?a=1&b=2)发送给服务端；此外，ajax默认以get方式发送请求。 function testData(){ $.ajax("/test/",{ data:{ // 此时的data是一个json形式的对象 a:1, b:2 } })； //?a=1&b=2 ? ************ processData ************ processData:声明当前的data数据是否进行转码或预处理，默认为true，即预处理；如果为false；那么对data:{a:1,b:2}会调用json对象的toString()方法，即{a:1,b:2}.toString(),最后得到一个[object, object]形式的结果。 ? ************ contentType ************ contentType: 默认值：“application/x-www-form-urlencoded".发送信息至服务器时内容编码类型。 用来指明当前请求的数据编码格式；urlencoded:?a=1&b=2；如果想以其他方式提交数据，比如contentType：“application/json",即向服务器发送一个json字符串。 比如contentType:"application/sjon",即向服务器发送一个json字符串: $.ajax("‘ajax_get",{ data: JSON.stringfy({ a:22, b:33 }), contentType:"application/json", type:"POST", }); 注意：contentType：“appliation/json"一旦设定，data必须是json字符串，不能是json对象 ************ traditional ************ traditional: 一般是我们的data数据又数组时会用到： data:{a:22, b:33, c:["x", "y"]}, traditional为false会对数据进行深层次迭代。
响应参数
1 /* 2 dataType: 预期服务器返回的数据类型，服务器端返回的数据会根据这个值解析后，传递给回调函数。默认不需要显性指定这个属性,ajax会根据服务器返回的content Type来进行转换；比如我们的服务器响应的content Type为json格式，这时ajax方法就会对响应的内容进行一个json格式的转换，如果转换成功，我们在success的回调函数里就会得到一个json格式的对象，转换失败就会触发error这个回调函数。如果我们明确地指定目标类型，就可以使用data type。 3 dataType的可用值:html|xml|json|text|script 4 */