码迷,mamicode.com
首页 > Web开发 > 详细

jQuery AJAX基础

时间:2017-11-14 14:35:42      阅读:193      评论:0      收藏:0      [点我收藏+]

标签:aaa   pass   jquer   container   rpo   mode   根据   编码   文本   

一、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 */

 


 
 
 
 
 
 
 

jQuery AJAX基础

标签:aaa   pass   jquer   container   rpo   mode   根据   编码   文本   

原文地址:http://www.cnblogs.com/eric_yi/p/7831483.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!