封装Ajax框架!(代码篇)
写在前面的话,如果中间有什么不明白的,请先看封装ajax框架!(前言篇)
1、添写一个封闭函数
(function(){})();
在一个项目中,可能会引用多个js框架,如果函数名相同,会有命名冲突,所以这里使用封闭函数。
2、封装一个函数,用于dom元素的获取
但$是局部变量,外面不能直接使用,所以需要添加window.$ = $;
表示为全局对象window添加一个"$"的属性,这个属性的值是当前局部变量$的值。
所以在外部,如果想获取某个dom元素,可以直接:$("content");
3、封装一个函数,用于创建ajax对象
因为之前,我们将一个函数赋值给了$,函数也是对象,所以$也就是一个对象
4、封装ajax的get请求
为对象$添加一个get方法,参数有三个
url:表示ajax请求的页面地址
data:表示get请求时所需要传递的参数
callback:当ajax得到正确的数据后,所执行的回调函数,也就是参数callback接收的参数应该是一个函数。
5、封装ajax的post请求
为对象$添加一个post方法,参数有三个
url:表示ajax请求的页面地址
data:表示get请求时所需要传递的参数
callback:当ajax得到正确的数据后,所执行的回调函数,也就是参数callback接收的参数应该是一个函数。
当调用ajax请求时,可以使用这种形式
$.method(页面地址,传递参数,处理函数);
那么对应的方法中callback参数就指向了这个处理函数,所以callback(xhr.responseText);相当于处理函数(xhr.responseText)
6、添加返回值类型
我们在ajax程序中,可以使用三种数据形式:
a、字符串
b、xml
c、json
需要完善ajax框架 ,可以返回不同类型的数据,再进行不同的处理。首先,为get和post方法添加第四个参数:type,表示期望得到的返回值类型
再根据type值的不同,返回对应的数据
调用形式
$.method(请求地址,参数,处理函数,数据类型);
封装完整的ajax框架代码
(function(){
//用于得到一个dom对象
var $ = function(id){
return document.getElementById(id);
};
//用于得到一个ajax对象
$.init = function(){
try{return new ActiveXObject();}catch(e){}
try{
return new XMLHttpRequest();
}catch(e){
alert("请更换浏览器!");
}
};
//用于发送ajax的get请求调用方法为$.get("demo.php","username=zhangsan&&age=20",function(result){},'json')
$.get = function(url,data,callback,type){
var xhr = $.init();
//首先判断下传递的data参数是否为null,如果不为空直接拼接到url后传递给服务器
if(data !=null){
url = url+"?"+data;
}
xhr.open("get",url);
//解决缓存问题
xhr.setRequestHeader("If-Modified-since","0");
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
//如果没有传递type参数,让其默认为text
if(type == null){
type ='text';
}
if(type == 'text'){
callback(xhr.responseText);
}
if(type == 'xml'){
callback(xhr.responseXML);
}
if(type == 'json'){
callback(eval("("+xhr.responseText+")"));
}
}
};
xhr.send(null);
};
//用于发送ajax的post请求,调用方法为$.post("demo.php","username=zhangsan&&age=20",function(result){},'json')
$.post = function(url,data,callback,type){
var xhr = $.init();
xhr.open("post",url);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
//如果没有传递type参数,让其默认为text
if(type == null){
type ='text';
}
if(type == 'text'){
callback(xhr.responseText);
}
if(type == 'xml'){
callback(xhr.responseXML);
}
if(type == 'json'){
callback(eval("("+xhr.responseText+")"));
}
}
};
xhr.send(data);
};
window.$ = $;
})();
封装自己的ajax框架
封装Ajax框架!(代码篇)的更多相关文章
- 封装Ajax框架!(前言篇)
Ajax技术就是利用javascript和xml实现异步交互的功能. 首先先来介绍一下Ajax相关知识点,如果这些你都会的话,请直接跳转到封装ajax框架!(代码篇) 一.Ajax对象的创建 1.创建 ...
- 封装自己的Ajax框架
Ajax技术就是利用javascript和xml实现异步交互的功能. 首先先来介绍一下Ajax相关知识点 一.Ajax对象的创建 1.创建Ajax对象的方式 a.第一种方式是针对IE浏览器 b.第二种 ...
- 《手把手教你》系列基础篇(九十七)-java+ selenium自动化测试-框架设计篇-Selenium方法的二次封装和页面基类(详解教程)
1.简介 上一篇宏哥介绍了如何设计支持不同浏览器测试,宏哥的方法就是通过来切换配置文件设置的浏览器名称的值,来确定启动什么浏览器进行脚本测试.宏哥将这个叫做浏览器引擎类.这个类负责获取浏览器类型和启动 ...
- 不借助jquery封装好的ajax,你能用js手写ajax框架吗
不借助jquery封装好的ajax,你能手写ajax框架吗?最基础的ajax框架,一起来围观吧. .创建XMLHttpRequest对象 var xhr = new XMLHttpRequest(); ...
- 原生js封装ajax代码
方法一:(类似jQuery的封装方法) 1.ajax函数封装: /* *author: Ivan *date: 2014.06.01 *参数说明: *opts: {'可选参数'} **method: ...
- AJAX(二)AJAX框架
上文(AJAX(一)AJAX的简介和基础)对ajax异步请求服务器做了详细的介绍和基础应用,可以看出,ajax的一些过程是相对不变的.不必要每次发送请求都写一遍发送代码,一些ajax开发人员已经把他们 ...
- Ajax框架,DWR介绍,应用,样例
使用Ajax框架 1. 简化JavaScript的开发难度 2. 解决浏览器的兼容性问题 3. 简化开发流程 经常使用Ajax框架 Prototype 一个纯粹的JavaScript函数库,对Ajax ...
- 优雅的封装ajax,含跨域
之前写过一篇 先定一个小目标,自己封装个ajax,是基于原生js的,也就是jquery中ajax的简化版本实现的思路.众所周知,jquery的ajax是项目中最常用的请求后台的方式,也算是封装的很完美 ...
- Ajax框架,DWR介绍,应用,例子
使用Ajax框架 1. 简化JavaScript的开发难度 2. 解决浏览器的兼容性问题 3. 简化开发流程 常用Ajax框架 Prototype 一个纯粹的JavaScript函数库,对Ajax提供 ...
随机推荐
- 深入出不来nodejs源码-内置模块引入初探
重新审视了一下上一篇的内容,配合源码发现有些地方说的不太对,或者不太严谨. 主要是关于内置模块引入的问题,当时我是这样描述的: 需要关注的只要那个RegisterBuiltinModules方法,从名 ...
- [日常] Go语言圣经--包和文件-包初始化习题
1.解决包级变量的依赖顺序,然后按照包级变量声明出现的顺序依次初始化 2.包中含有多个.go源文件,它们将按照发给编译器的顺序进行初始化 3.init初始化函数,在每个文件中的init初始化函数,在程 ...
- Maven包查询库
第一个: http://search.maven.org/ 第二个: http://mvnrepository.com/artifact/aspectj/aspectjweaver
- 【17】迭代器模式(Iterator Pattern)
一.引言 在上篇博文中分享了我对命令模式的理解,命令模式主要是把行为进行抽象成命令,使得请求者的行为和接受者的行为形成低耦合.在这一章中,将介绍一下迭代器模式. 二.迭代器模式的介绍 迭代器是针对集合 ...
- python学习之老男孩python全栈第九期_数据库day005知识点总结 —— MySQL数据库day5
三. MySQL视图(不常用) 给某个查询语句设置个别名(视图名),日后方便使用 - 创建: create view 视图名 as SQL; PS:视图是虚拟的 - 修改: alter view 视图 ...
- WEB服务器、应用程序服务器、HTTP服务器的区别
WEB服务器.应用程序服务器.HTTP服务器的区别 Web服务器: 基本功能就是提供Web信息浏览服务.它只需支持HTTP协议.HTML文档格式及URL.与客户端的网络浏览器配合.因为Web服务器主要 ...
- vue2.0父子组件通信的方法
vue2.0组件通信方法:props传值和emit监听.(.sync方法已经移除.详情请点击)(dispatch-和-broadcast方法也已经废弃) props方法传值:Props 现在只能单项传 ...
- 微信小程序点击图片放大预览
微信小程序点击图片放大预览使用到 wx.previewImage 接口,可以放大.上/下一张 上代码 wxml代码 <view class='content-img' wx:if="{ ...
- CSS画0.5px的线
今天遇到一个需求,画0.5px的线,查了以下资料,主要以scale方法为主.代码如下: /*0.5px上边框*/ .half_top_border_before:before{ content: &q ...
- js 函数中形参与实参的关系
函数中形参与实参的关系 对于形参和实参的定义,在 权威指南中有着明确的定义.但是,我们更在意的是它们之间的关系,到底形参会不会影响到实参? 形参到底会不会影响到实参? 对于这个问题的答案,请先看以下两 ...