封装简单的Ajax
调用请求:
var obj = {
url:"", //url地址 例如:test.php
method:"", //get或post(大小写不限) 例如:get
async:true, //true:异步请求 false:同步请求 默认true
data:{ //所需要传输的数据(被注释内容为测试所用)
// name:"战斗机",
// age:20,
// husband:null,
// arr:["one","two","three"],
// dimensional:{
// bust:100,
// waist:60,
// hipline:90
// }
},
success:function (res) { //传输成功的回调函数
//console.log(res)
},
fail:function (res) { //失败的回调函数
}
}
myAjax(obj);
封装函数:
//myAjax()
function myAjax(obj) {
// 1.创建http请求
var xmlhttp;
if (window.XMLHttpRequest) {
//兼容IE7+,firefox,chrome, opera, safari
xmlhttp = new XMLHttpRequest();
}else{
//兼容IE6,IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
// 1.1声明变量
var fangShi = obj.method.toUpperCase();
var url = obj.url;
var async = true;
if(obj.async == false){
async = false;
}
console.log(async);
// 1.2遍历传输内容
var data = ""; //data内容重组
(function props(a){
for(var prop in a){
if (a.hasOwnProperty(prop)) {
// console.log(prop);
// console.log(a[prop]); if (a[prop] instanceof Object && !(a[prop] instanceof Array)) {
props(a[prop]);
}else{
// 遍历出来后如果不是对象则进行拼接
data += prop + "=" + a[prop] +"&";
}
}
} //for end
return data;
}(obj.data)) // 2.发起请求
if (fangShi == "GET") { //get请求
xmlhttp.open(fangShi, url + "?" + data, async);
xmlhttp.send();
}else if (fangShi == "POST") { //post请求
xmlhttp.open(fangShi, url, async);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send(data);
}else{
alert("请求方式不在支持范围")
}
// 3.接受数据
xmlhttp.onreadystatechange = function(){
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var resp = JSON.parse(xmlhttp.responseText);
obj.success(resp);
}else{
obj.fail(resp);
}
}
}
返回值的数据类型不够齐全,如有需要再做修改
封装简单的Ajax的更多相关文章
- jQuery-实现简单的Ajax请求封装
封装的意义在于复用,在于减少重复的代码. 我在项目中做了简单的Ajax请求封装,实现方式如下: //封装Ajax请求 $.extend({ ajaxDirect:function(url,type,d ...
- jsonp其实很简单【ajax跨域请求】
js便签笔记(13)——jsonp其实很简单[ajax跨域请求] 前两天被问到ajax跨域如何解决,还真被问住了,光知道有个什么jsonp,迷迷糊糊的没有说上来.抱着有问题必须解决的态度,我看了许多资 ...
- 通过简单的ajax验证是否存在已有的用户名
首先来说说我对ajax的理解:简单地来说就是在不重新刷新页面的情况下,实现数据的调用获得更新. 我在这里介绍的是要过jquery封装好的ajax,大家可以去了解一下使用原生的XMLHttpReques ...
- 原生JS封装简单动画效果
原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...
- 不借助jquery封装好的ajax,你能用js手写ajax框架吗
不借助jquery封装好的ajax,你能手写ajax框架吗?最基础的ajax框架,一起来围观吧. .创建XMLHttpRequest对象 var xhr = new XMLHttpRequest(); ...
- jQuery简单的Ajax调用示例
jQuery确实方便,下面做个简单的Ajax调用: 建立一个简单的html文件: <!DOCTYPE HTML> <html> <head> <script ...
- 利用jQuery与.ashx完成简单的Ajax
在ASP.NET同样可以与其它编程语言一样,利用前台的Ajax技术,只是需要注意的是,后台的处理程序不再是一个aspx页面中的Page_Load,而且ASP.NET独有的“一般处理程序”.ashx,下 ...
- 简单的Ajax实例
由于刚刚接触Ajax,所以在网上搜了一下如何实现简单的Ajax,在此写下来,也方便自己以后学习 什么是Ajax? 通过在后台与服务器进行少量的数据交换,Ajax可以使网页实现异步更新,这意味着可以在不 ...
- JQ简单操作Ajax笔记
JQ对ajax进行了封装,底层$.ajax().第二层是.load(),$.get(),$.post().第三层是$.getScript()和$.getJSON(). load(url selecto ...
随机推荐
- rsync 未授权访问漏洞
rsync rsync,remote synchronize顾名思意就知道它是一款实现远程同步功能的软件,它在同步文件的同时,可以保持原来文件的权限.时间.软硬链接等附加信息. rsync是用 &qu ...
- 74HC245引脚定义 使用方法
典型的CMOS型三态缓冲门电路,八路信号收发器. 由于单片机或CPU的数据/地址/控制总线端口都有一定的负载能力,如果负载超过其负载能力,一般应加驱动器. 主要应用于大屏显示 引脚定义 DIR:方向控 ...
- 版本管理·玩转git(团队合作)
如果你想让一位叫"伙夫"的程序员,和你一起开发,首先你得在你的代码仓库把伙夫添加到此项目中来,让其成为开发者. 具体步骤: 项目->管理->项目成员管理->开发者 ...
- GCD的Queue-Specific
为了能够判断当前queue是否是之前创建的queue, 我们可以利用dispatch_queue_set_specific和dispatch_get_specific给queue关联一个context ...
- Toast实现源码解析
说明 本篇文章用于介绍Android中Toast的实现原理.和简单实现一个自定义的Toast. Toast实现 一般常用Toast格式为: Toast.makeText(context,"t ...
- vue中显示原网页代码--codemirror
在项目中遇到了一个需求,后台返回string类型的html源码,要求前端这边按照codeview这种类型把这个源码展示出来.现总结如下 1.如果没啥样式的需求,只是要求该缩进缩进的话,可以直接使用in ...
- 29.Java基础_接口
接口的成员特点
- Python基础之猜数游戏
例题一:猜数游戏.在程序中预设一个0~9之间的整数,让用户通过键盘输入所猜的数,如果大于预设的数,显示“遗憾,太大了”:小于预设的数,显示“遗憾,太小了”,如此循环,直至猜中该数,显示“预测N次,你猜 ...
- DQN的三大改进:
Double DQN:https://www.jianshu.com/p/fae51b5fe000 Prioritised Replay:https://www.jianshu.com/p/db14f ...
- 剑指Offer-8.跳台阶(C++/Java)
题目: 一只青蛙一次可以跳上1级台阶,也可以跳上2级.求该青蛙跳上一个n级的台阶总共有多少种跳法(先后次序不同算不同的结果). 分析: 实际上就是斐波那契数列的一个应用,青蛙跳上n级台阶的跳法数等于跳 ...