function ajax(obj){ // 默认参数 var defaults = { type : 'get',data : {}, url : '#', dataType : 'text', async : true, success : function(data){console.log(data)}} // 处理形参,传递参数的时候就覆盖默认参数,不传递就使用默认参数 for(var key in obj){//把输入的参数与设置的默认数据进行覆盖更新 defaults[key] = obj[key]; } // 1、创建XMLHttpRequest对象 var xhr = null; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }else{ xhr = new ActiveXObject('Microsoft.XMLHTTP');// 兼容ie的早期版本 } // 把对象形式的参数转化为字符串形式的参数 /* {username:'zhangsan','password':123} 转换为 username=zhangsan&password=123 */ var param = ''; for(var attr in obj.data){ param += attr + '=' + obj.data[attr] + '&'; } if(param){//substring(start, end)截取字符串去掉最后的&符号 param = param.substring(0,param.length - 1); } // 处理get请求参数并且处理中文乱码问题 if(defaults.type == 'get'){ defaults.url += '?' + encodeURI(param); } // 2、准备发送(设置发送的参数) xhr.open(defaults.type,defaults.url,defaults.async); // 处理post请求参数并且设置请求头信息(必须设置) var data = null; if(defaults.type == 'post'){ data = param; xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//post模式下必须加的请求头,这个请求头是告诉服务器怎么去解析请求的正文部分。 } // 3、执行发送动作 xhr.send(data); // 处理同步请求,不会调用回调函数 if(!defaults.async){ if(defaults.dataType == 'json'){ return JSON.parse(xhr.responseText); }else{ return xhr.responseText; } } // 4、指定回调函数(处理服务器响应数据) xhr.onreadystatechange = function(){ if(xhr.readyState == 4){//4 获取数据成功 if(xhr.status == 200){//200 获取的数据格式正确 var data = xhr.responseText; if(defaults.dataType == 'json'){ // data = eval("("+ data +")"); data = JSON.parse(data);//JSON.parse把获取带的json格式的数据转化为js的对象形式可以使用 } defaults.success(data);//回调函数 }} } }

转载于:https://www.cnblogs.com/yongege/p/7103784.html

js源码 模仿 jquery的ajax的获取数据(get,post )的请求封装相关推荐

  1. 怎么使用jquery中ajax来获取数据,

    好久没有写鸡汤了,真的是三天不要学习,就不学习了,1玩小时定律你懂的,直接说怎么写是做好的,直说最简单的方式,] [1] 我一般习惯帮项目放在php环境的www目录下运行.如果知道php的都知道怎么回 ...

  2. 常用JS库源码 - store.js源码/underscore.js源码

    常用JS库源码 Store.js源码 "use strict" // Module export pattern from // https://github.com/umdjs/ ...

  3. 《前端》引用包sidebar-menu.js源码及使用

    sidebar-menu.js源码: (function ($) {$.fn.sidebarMenu = function (options) {options = $.extend({}, $.fn ...

  4. 网页直播源码,JQuery实现轮播图方法

    网页直播源码,JQuery实现轮播图方法 html <!DOCTYPE html> <html> <head lang="en"><met ...

  5. 【笔记-vue】《imooc-vue.js高仿饿了么》、《imooc-vue 音乐app》、《imooc-vue.js源码全方位解析》

    20170709 - 20171128:<imooc-vue.js高仿饿了么> 一.第一章 课程简介 1-1课程简介 1.需求分析-脚手架工具-数据mock-架构设计-代码编写-自测-编译 ...

  6. 三种加密方式: sha1加密、MD5加密、Base64加密 (附H5源码和js源码)

    js的加密没特别多的办法,常见的就三种, MD5加密.Base64加密和sha1加密 一. sha1加密 H5源码: <!DOCTYPE html> <html><hea ...

  7. impress.js 源码分析

    impress.js 源码分析   之前做展示用幻灯片,我一直热衷于使用PPT,刚开始学习PPT时总是强行使用各种页面特效,越做越复杂.现在看来,学技术大概都要经历一个从简到繁再到简的过程吧.后来,无 ...

  8. jQuery方法源码解析--jQuery($)方法(一)

    jQuery方法源码解析--jQuery($)方法 注: 1.本文分析的代码为jQuery.1.11.1版本,在官网上下载未压缩版即可 2.转载请注明出处 jQuery方法: 这个方法大家都不陌生,在 ...

  9. MVVM架构~knockoutjs系列之从Knockout.Validation.js源码中学习它的用法

    说在前 有时,我们在使用一个插件时,在网上即找不到它的相关API,这时,我们会很抓狂的,与其抓狂,还不如踏下心来,分析一下它的源码,事实上,对于JS这种开发语言来说,它开发的插件的使用方法都在它的源码 ...

最新文章

  1. linux proc/xx/maps文件分析
  2. etc下没有mysql_我在linux下,安装mysql的时候,cp support-files/my-medium.cnf /etc/my.cnf找不到my-medium.cnf...
  3. 一文看透 Redis 分布式锁进化史(解读 + 缺陷分析)
  4. Pyhton 一行代码求Fibonacci第N项
  5. 群里有朋友关于SAP Spartacus的疑问
  6. C#四种相等性判断方法 equals,referenceEquals
  7. python包mdure_Python hashlib模块实例使用详解
  8. 怎么把此电脑放到桌面_Win10我的电脑怎么放到桌面
  9. 从 0.99999... = 1 到芝诺悖论
  10. springmvc系列一 之配置介绍(包含官网doc)
  11. 教你怎么用爬虫程序采集企业信息及电话邮箱等信息(以企查查为例)
  12. bodymovin导出没有html文件,bodymovin导出动画json结果分析
  13. 西门子s7-200smart——2.cpu选型
  14. 【rmzt】美女杨颖win7主题_8.5
  15. 常用编程语言介绍及特点
  16. 转速传感器隔离放大器输出信号隔离变送器正弦波转方波信号隔离器
  17. 利用CSS3中的clac()实现按照屏幕分辨率自适应宽度
  18. 惜时间_惜时间的作文
  19. Android adb命令开启飞行模式,开启wifi,开启移动数据等相关操作
  20. 实证研究的步骤_实证研究方法究竟有多重要,被这5张图惊到了!

热门文章

  1. expected:instruction or directive
  2. 多组测试数据(求和)IV
  3. eventproxy
  4. stm32 输入捕获学习(一)
  5. NIO核心之Channel,Buffer和Selector简介
  6. Spring boot使用Rabbitmq注解及消息序列化
  7. Spring Boot AOP记录用户操作日志
  8. STM32开发 -- 状态机与状态切换逻辑
  9. Android升级butterknife,Android组件化开发中使用Butterknife的坑
  10. 【朋克智库】比特币详解2.0——比特币的沉沦