JSON专题-Ajax中Json应用

一、基础理论

            在异步传输的过程中，我们经常会用到Ajax请求，关于Ajax请求的完整介绍后续有时间博客介绍，这里主要介绍$.ajax方法的一些参数含义以及使用注意事项，以及JSON在Ajax中的如何与服务器进行数据交换。

二、$.ajax参数含义

       $.ajax([options]):通过HTTP请求加载服务器数据，[options]是参数列表，返回的是一个XMLHttpRequest对象(XHR)。在通常的情况下，不需要对该对象进行操作，但是在特定情况下可以手动进行终止。

      

      url: 发送请求的地址

 

      type:请求方式   get/post或者其他，如put和delete只针对部分浏览器支持。

      timeout:请求超时时间限制

      data:发送到服务器的数据。默认情况下自动转化成字符串格式，GET请求将会附加在URL之后，它的格式必须为key/value格式。

              

              关于data我们可以拆分开理解：

                  

                  (1) 如果data是一个字符串，那么不进行转换，不管这个字符串是普通的字符串还是JSON字符串；如果data是一个对象,那么在默认情况下就会进行转化成一个字符串，字符串是以&进行连接的。

                   例如：var str = 'aaa'                 var task ='{"name":"task01","data":"001"}' 

                   这两个字符串都将会以其现有形式传过去，服务端再对其进行解析。这种情况下对于json字符串来说不容易出现错误因为我们事先经常会对自己的JSON字符串进行网上校验以保证其正确性，但是普通字符串就就容易出错，使用的时候酌情考虑。

                

                   例如：var task ={"name":"task01","data":"001"}  注意对比上述没有引号

                   由于这是一个对象，那么它就会在默认情况下转化为字符串，转换后的格式为name=task01&data=001。

             Skill:具体转换成什么，可以采用这种方式进行查看：采用Chrom浏览器->F12->NetWork->点击左侧请求的对象->右侧最后一 行会有一个Form Data选项->View Source就可以看出其究竟是什么样的格式。

                  (2) 就是必须采用key/value的形式进行表示，但是格式不是唯一的。key值上面的""可以有，也可以没有。

                        var task ={"name":"task01","data":"001"} 和var task ={name:"task01",data:"001"}是一样的。

                       

         processData:就是在默认情况下为true,这时data如果是对象的话就会转化成String，如果不想自动转换那么就设置为false。

     

         ContentType:发送到服务器时内容的编码类型，发送信息到服务器时内容的编码方式。默认是application/x-www-form-                                            urlencoded，可以设置成：application/json，但是服务器端要与之对应。

         dataType:预期的返回类型。如果不指定，那么就会自动通过HTTP包中的MIME信息返回responseXML或者responseText，并作为回调函数参数传递。可以使用的值 xml html script json jsonp。如果指定了json，那么success返回的data就直接可以用data.value取相应的值，value就是属性。如果没有指定json，那么默认返回一个字符串，需要进行转化为JSON对象，然后再使用。

         sucess:成功时的回调函数。两个参数：

                  data:服务器返回的数据

                  textStatus:返回状态

        

         error:请求失败时调用的对象 三个参数

                  XMLHttpRequest：XHR对象

                  textStatus:              错误信息

                  errorThrown:          (可能)捕获的错误对象

三、Demo

       采用json的ajax请求：

        

	var jsonObj = {name:"task01",data:"001"};
	$("#show_task_add").bind("click",function(){
		
		$.ajax({
		    type:"post",
		    url:mainpath+"/user/add",
		    data:jsonObj, //如果服务器端采用json记性转换的话，那么可以写成字符串的形式

		    async:false,
		    success:function(data,textStatus){
		    	data = jQuery.parseJSON(data);
		    	alert(textStatus);
		    	alert(data.message);
			},
		    error:function(XMLHttpRequest,textStatus,errorThrown){
		    	alert(textStatus);
		    	alert(errorThrown);
		    	
		    }
		});
	});