Ajax的使用代码解析(2)

  JSON.parse()用来将一个对象转换为字符串,JSON.stringify()用来将一个字符串转换为对象。在利用ajax进行数据交互的过程中返回的数据多数的时候是一个JSON格式的字符串,如果服务器给我们返回了数据此时我们就需要利用JSON.parse()来解析返回的数据(xhr.responseText即为服务器返回的数据):

xhr.onreadystatechange = function(){   if(xhr.readyState==4&&xhr.status==200){ var data = JSON.parse(xhr.responseText);   } }

  在使用post方式发送数据的过程中,如果不是文件上传一般情况下传输的也是一个JSON数据,要想能够成功的发送到后台就需要用JSON.stringify()来将JSON对象来转换为一个字符串,同时Content-Type要设置为application/json:

var sendData = {name:"zt",age:23}; ... xhr.setRequestHeader("Content-Type","application/json; charset=utf-8"); xhr.send(JSON.stringify(sendData));

  另外利用JSON.parse()和JSON.stringify()可以实现一个对象的深拷贝功能:

var sendData = {name:"zt",age:23}; var copyData = JSON.parse(JSON.stringify(sendData));

$.ajax基本使用

  为了方便使用JQ为我们封装好了一个ajax来方便我们的使用:

$.ajax({ type:"post",//请求方式 url:"url",//请求地址 data:"...",//发送至服务端的数据 contentType:"...",//设置发送数据的类型如果data是一个json字符串这里要设置为application/json success:function(data){...},//请求成功的回调函数data可看做是服务器返回的数据 error:function(){...}//请求失败的回调函数 });

  或者:

$.ajax({ type:"post", url:"url", data:"...", contentType:"...", }) .done(function(data){...}) .fail(function(){...});

  回调函数中的data即为服务器返回的数据的一个代理,直接使用即可。

  为了简化我们的开发JQ提供了一些全局设置函数包括$.ajaxSetup()、$.()ajaxStart()、$().ajaxStop()、$().ajaxComplete()、$().ajaxError()、$().ajaxSuccess()、$().ajaxSend()。

  $.ajaxSetup()用来设置基本的参数例如:

$.ajaxSetup({ type:"post", contentType:"application/json; charset=utf-8" });

  我们在使用$.ajax时可以直接这样设置:

$.ajax({ url:"", success:function(){...}, error:function(){...} })

  最终等价于:

$.ajax({ type:"post", contentType:"application/json; charset=utf-8", url:"", success:function(){...}, error:function(){...} })

  $().ajaxStart()、$().ajaxStop()、$().ajaxComplete()、$().ajaxError()、$().ajaxSuccess()、$().ajaxSend()都是用来设置一些全局回调函数的。例如我们在提交数据时为了防止多次提交我们需要在发送请求时产生一个loading遮罩在数据发送完成后取消遮罩,如果在每一次ajax请求时我们都设置一次就会很麻烦,此时我们就可以用全局回调函数来简化我们的操作:

  利用全局事件在请求开始时产生一个遮罩在请求完成时取消遮罩:

$(document).ajaxStart(function(){ loadingMask.show(); }); $(document).ajaxComplete(function(){ loadingMask.hide(); });

以上所述是小编给大家介绍的Ajax的使用代码解析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wjpwwx.html