1. /**
    2. * Created by liyinghao on 2016/8/23.
    3. */
    4. /*仿jQuery中的ajax方法,简单版实现;封装ajax的工具函数*/
    5. /*
    6. * 1 请求方式 type get post 默认是get方式
    7. * 2.接口地址 url 都是地址 默认的是当前地址
    8. * 3.是否异步 async true false 默认的true 异步请求
    9. * 4.请求数据 data {}对象形式 默认是空对象
    10. *
    11. *
    12. * 5.成功回调函数(成功需要做的事情) success
    13. * 6.失败回调函数(失败需要做的事情) error
    14. *
    15. * 比如 发送前要做的事情 beforeSend
    16. * */
    17. window.$ ={
    18. /* ajax:function(){
    19. }*/
    20. };
    21. /*定义一个ajax工具函数*/
    22. /*options 是一个对象*/
    23. $.ajax =function(options){
    24. /*如果你什么都没传呢?停止执行*/
    25. /*if(options && typeof options == 'object'){
    26. }*/
    27. if(!options ||typeof options !='object')return fasle;
    28. /*如果传了*/
    29. var type = options.type ||'get';
    30. var url = options.url || location.pathname;
    31. /* false true "" false */
    32. var async = options.async ===false?false:true;
    33. /*需要传递的数据*/
    34. var data = options.data ||{};
    35. /*需要data转化成ajax传递数据的格式 {name:'',age:''} ===>>> name=gc&age=10 */
    36. var dataStr ='';
    37. for(key in data){
    38. dataStr += key+'='+data[key]+'&';
    39. };
    40. /*str.slice(0,-1); 取到倒着数几个字符*/
    41. dataStr = dataStr && dataStr.slice(0,-1);
    42. /*ajax编程*/
    43. /*初始化*/
    44. var xhr =newXMLHttpRequest();
    45. /*设置请求行*/
    46. /*如果是get请求 参数是不是该拼接在url后面*/
    47. xhr.open(type,type=='get'?url+'?'+dataStr:url,async);
    48. /*设置请求头*/
    49. if(type =='post'){
    50. xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    51. }
    52. /*设置请求内容*/
    53. xhr.send(type=='get'?null:dataStr);
    54. /*响应*/
    55. xhr.onreadystatechange =function(){
    56. /*首先确定通讯完全完成*/
    57. if(xhr.readyState ==4){
    58. /*如果是成功的请求 status == 200 */
    59. if(xhr.status ==200){
    60. /*成功*/
    61. /*知道后台想要返回什么数据类型 application/json;charset=utf-8*/
    62. /*application/xml application/json text/html text/xml text/json text/css*/
    63. var contentType = xhr.getResponseHeader('Content-Type');
    64. var result =null;
    65. if(contentType.indexOf('xml')>-1){
    66. /*返回什么数据类型xml*/
    67. result = xhr.responseXML;
    68. }elseif(contentType.indexOf('json')>-1){
    69. /*返回什么数据类型json*/
    70. var data = xhr.responseText;
    71. result = data && JSON.parse(data);
    72. }else{
    73. result = xhr.responseText;
    74. }
    75. /*执行成功回调函数*/
    76. options.success && options.success(result);
    77. }else{
    78. /*失败*/
    79. options.error && options.error({status:xhr.status,statusText:xhr.statusText});
    80. }
    81. }
    82. }
    83. };
    84. /*get*/
    85. $.get=function(options){
    86. options.type ='get';
    87. $.ajax(options);
    88. }
    89. /*post*/
    90. $.post =function(options){
    91. options.type ='post';
    92. $.ajax(options);
    93. }
    94.  
    95. 来自为知笔记(Wiz)

      

Ajax,ajax封装的更多相关文章

  1. 原生态AJAX详解和jquery对AJAX的封装

    AJAX: A :Asynchronous [eI`sinkrenes] 异步 J :JavaScript    JavaScript脚本语言 A: And X :XML 可扩展标记语言 AJAX现在 ...

  2. 【前端学习笔记04】JavaScript数据通信Ajax方法封装

    //Ajax 方法封装 //设置数据格式 function setData(data){ if(!data){ return ''; } else{ var arr = []; for(k in da ...

  3. 原生ajax与封装的ajax使用方法

    当我们不会写后端接口来测试ajax时,我们可以使用node环境创建一个本地服务器. 1.创建一个本地服务器可参考http://www.cnblogs.com/heyujun-/p/6793900.ht ...

  4. Ajax入门(二)Ajax函数封装

    如果看了的我上一篇博客<Ajax入门(一)从0开始到一次成功的GET请求>的话,肯定知道我们已经完成了一个简单的get请求函数了.如下: 1234567891011121314151617 ...

  5. js进阶ajax函数封装(匿名函数作为参数传递)(封装函数引入文件的方式非常好用)

    js进阶ajax函数封装(匿名函数作为参数传递)(封装函数引入文件的方式非常好用) 一.总结 2.匿名函数作为参数传递 二.js进阶ajax函数封装 ajax1.js function ajax(ur ...

  6. jQuery-实现简单的Ajax请求封装

    封装的意义在于复用,在于减少重复的代码. 我在项目中做了简单的Ajax请求封装,实现方式如下: //封装Ajax请求 $.extend({ ajaxDirect:function(url,type,d ...

  7. JQ中的Ajax的封装

    1.认识JQ中ajax的封装      jQ 对于ajax的封装有两层实现:$.ajax 为底层封装实现:基于 $.ajax ,分别实现了$.get 与$.post 的高层封装实现: 2.Ajax的底 ...

  8. Ajax的封装。

    封装 Ajax 因为Ajax 使用起来比较麻烦,主要就是参数问题,比如到底使用GET 还是POST:到 底是使用同步还是异步等等,我们需要封装一个Ajax 函数,来方便我们调用.    封装支持接收来 ...

  9. Jquery Ajax简单封装(集中错误、请求loading处理)

    Jquery Ajax简单封装(集中错误.请求loading处理) 对Jquery Ajax做了简单封装,错误处理,请求loading等,运用到项目中集中处理会很方便. 技术层面没有什么好说的,请求是 ...

  10. Ajax的封装,以及利用jquery的ajax获取天气预报

    1.Ajax的封装 function ajax(type,url,param,sync,datetype,callback){//第一个参数是获取数据的类型,第二个参数是传入open的url,第三个是 ...

随机推荐

  1. 【HTTP】http请求url参数包含+号,被解析为空格

    项目技术:Angular 6 问题现象:接口传参的时候,使用 httpClient.post 方法提交数据,字段中包含+号被解析成空格,提交数据错误 解决过程: 1.http请求中包含+号,会被自动解 ...

  2. Mac定时执行脚本_服务launchctl

    Mac 设置自动执行定时任务, 步骤: 1. 编写plist 2.将plist放入该目录下 ~/Library/LaunchAgents 3.命令启动 添加: launchctl load /Syst ...

  3. 记录MNIST采用卷积方式实现与理解

    从时间上来说,这篇文章写的完了,因为这个实验早就做完了:但从能力上来说,这篇文章出现的早了,因为很多地方我都还没有理解.如果不现在写,不知道什么时候会有时间是其一,另外一个原因是怕自己过段时间忘记. ...

  4. CSS 6种完全居中最佳实践(整理)

    2016年4月28日 1.最佳法: .Absolute-Center { width: 50%; height: 50%; overflow: auto; margin: auto; position ...

  5. 笔记大神推荐的个人知识文档管理工具mybase

    铛铛铛,今天我要给大家推荐一款个人知识笔记管理神器,不出你们所料,它就是mybase. 那mybase究竟能干啥呢?借用mybase中文官网的一句话来说,mybase软件可以将电脑上的文档.知识.笔记 ...

  6. SQL分支语句与循环语句

    分支语句 if then elsif then else end if 举例: set serveroutput on declare num number; begin num:; then dbm ...

  7. Spring Cloud 使用Spring Cloud Loadbalancer访问服务地址

    获取服务地址 使用的EurekaClient : getNextServerFromEureka() 使用的DiscoveryClient: getInstances() Load Balancer ...

  8. SpringBoot2.x整合定时任务和异步任务处理

    SpringBoot2.x整合定时任务和异步任务处理 一.项目环境 springboot2.x本身已经集成了定时任务模块和异步任务,可以直接使用 二.springboot常用定时任务配置 1.在启动类 ...

  9. DataX简介

    DataX 是阿里巴巴集团内被广泛使用的离线数据同步工具/平台,实现包括 MySQL.Oracle.SqlServer.Postgre.HDFS.Hive.ADS.HBase.TableStore(O ...

  10. Javascript基础三(函数)

    函数第一节: 1.函数的概念及作用     函数是由事件驱动的或者当他被调用时可执行的可重复使用的代码块.   具备一点功能的代码段,代码段来实现具体的功能.要想实现一个函数的功能需要对函数进行调用. ...