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表示中国部分省市数据如下：

 <?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少得多，可以大大节约传输数据所占用的带宽。

二、Ajax简介

AJAX（Asynchronous Javascript And XML)，异步Javascript和XML。即使用Javascript语言与服务器进行异步交互，传输的数据为XML(当然，传输的数据不只是XML)

同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求
异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求

AJAX出了异步的特点外，还有一个就是：浏览器页面局部刷新；（这一特点给用户的感受是在不知不觉中完成请求和响应过程)

JS实现的局部刷新：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 

     <style>

         .error{

             color:red

         }

     </style>

 </head>

 <body>

 

 

 <form class="Form">

 

     <p>姓名&nbsp;&nbsp;<input class="v1" type="text" name="username" mark="用户名"></p>

     <p>密码&nbsp;&nbsp;<input class="v1" type="text" name="email" mark="邮箱"></p>

     <p><input type="submit" value="submit"></p>

 

 </form>

 

 <script src="jquery-3.1.1.js"></script>

 

 <script>

     $(".Form :submit").click(function(){

         flag = true;

         $("Form .v1").each(function(){

             var value = $(this).val();

             if(value.tirm().length==0{

                    var mark = $(this).attr("mark");

                    var $span = $("<span>");

                    $span.html(mark+"不能为空!");

                    $span.prpo("class", "error");

                     $(this).after($span);

                     setTimeout(function(){

                         $span.remove();

                     }, 800);

                     flag = false;

                     return flag;

                }

         });

         return falg

     });

     </script>

     </body>

 </html>

AJAX的优势

AJAX使用Javascript技术向服务器发送异步请求
AJAX无需刷新整个页面
因为服务器响应内容不再是整个页面，而是页面中的局部，所以AJAX性能高

jQuery实现的ajax

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

 

 <button class="send_Ajax">send_Ajax</button>

 

 <script>

     // $.ajax的两种使用方式：

     // 1 $.ajax(settings);

     // 2 $.ajax(url, [settings]);

     $(".send_Ajax").click(function(){

         $.ajax({

             url: "/handle_Ajax/",

             type: "POST",

             data: {username:"Lucy", password: 123},

             success:function(data){

                 alert(data)

             },

             // error

             error:function(jqXHR, textStatus, err){

                 //jqXHR: jQuery增强的xhr

                 //textStatus: 请求完成状态

                 //err：底层通过throw抛出的异常对象，值与错误类型有关

                 console.log(arguments);

             },

             // complete

             complete:function(jqXHR, textStatus){

                 //jqXHR: jQuery增强的xhr

                 //textStatus: 请求完成状态 success | error

             },

             statusCode:{

                 '403':function(jqXHR, textStatus,err){

                     console.log(arguments);

                 },

                 "400":function(){}

             },

         })

     }

     </script>

     </body>

 </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会对数据进行深层次迭代。

响应参数

 /*

 dataType: 预期服务器返回的数据类型，服务器端返回的数据会根据这个值解析后，传递给回调函数。默认不需要显性指定这个属性,ajax会根据服务器返回的content Type来进行转换；比如我们的服务器响应的content Type为json格式，这时ajax方法就会对响应的内容进行一个json格式的转换，如果转换成功，我们在success的回调函数里就会得到一个json格式的对象，转换失败就会触发error这个回调函数。如果我们明确地指定目标类型，就可以使用data type。

 dataType的可用值:html|xml|json|text|script

 */