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>
View Code

 

用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 }
View Code

 

    可以看到，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>姓名&nbsp;&nbsp;<input class="v1" type="text" name="username" mark="用户名"></p>
19     <p>密码&nbsp;&nbsp;<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>
View Code
 

    $.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 */




 




















 


 








 


 


 


 


 






            

            
posted @ 
2017-11-14 11:08 
eric_yi 
阅读(221) 
评论(0) 
编辑 
收藏 
举报