ajax是前端工程中与后台进行数据交互的一门重要技术,通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。jquery中对ajax进行了封装,可以直接使用.下面是自己封装的一个ajax的js文件,感兴趣的朋友可以下载使用,

  以下封装的ajax代码,可以帮助大家了解ajax的整个操作过程,告诉大家ajax是如何进行交互的.

  

function AJAX(obj){ //做网络请求的时候 ,参数以对象的形式传递进来
//规定:obj里面包含属性:1.url
//2.type --- get 还是 post
//3.data --- 前端给后端传递的参数(前端传递的时候以对象的形式)
//4.回调函数 --- success
//5.回调函数 --- error
var ajaxObj = null;
if (window.XMLHttpRequest) {
ajaxObj = new XMLHttpRe.quest();
}else{
ajaxObj = new ActiveXObject("Microsoft.XMLHTTP");
}
ajaxObj.onreadystatechange = function(){
if (ajaxObj.readyState == 4) {
if (ajaxObj.status >= 200 && ajaxObj.status < 300 || ajaxObj.status == 304) {
if (obj.success) {
obj.success(JSON.parse(ajaxObj.responseText));
}else{
alert("您忘记了success函数");
}
}else{
if (obj.error) {
0obj.error(ajaxObj.status);
}else{
alert("您忘记了error函数");
}
}
}
}
//type转化为小写,方便使用
var type = obj.type || "get";
type = type.toLowerCase();
//判断是否传递了参数
var params = "";
if (obj.data) {
for(var key in obj.data){
params += (key + "=" + obj.data[key] + "&");
}
params=params.slice(0,params.length-1);
}

if (type == "get") {
ajaxObj.open(type,obj.url+"?"+params,true);
ajaxObj.send();
}else{
ajaxObj.open(type,obj.url,true);
ajaxObj.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
ajaxObj.send(params);
}

}

//欢迎大家提出改进建议

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. (转)iOS7界面设计规范(2) - UI基础 - iOS应用解析

    今天再来一发,然后结束掉周六的忙碌,去吃零食,还有冰啤酒:其实现在打嗝还有小龙虾味儿呢. 第二篇更多的是从技术的角度对iOS界面组成原理进行了简单的解析,篇幅很短,可稍作了解:更多关于iOS开发入门的 ...

  2. [RxJS] Combining Streams with CombineLatest

    Two streams often need to work together to produce the values you’ll need. This lesson shows how to ...

  3. myeclipse自动补全设置

    第一步: windows -->preference -->java -->editor -->content Assist --> auto activation -- ...

  4. Android 关于倒计时功能的实现

    关于倒计时的实现,可以说有很多的方法,比较常见的就是Timer+TimerTask+Handler了,或者还可以配合Runnable.例如下面的代码: import java.util.Timer; ...

  5. iCIBA简单案例

    效果图: 代码: <!DOCTYPE html><html> <head> <meta charset="utf-8" /> < ...

  6. AVL树插入和删除

    一.AVL树简介 AVL树是一种平衡的二叉查找树. 平衡二叉树(AVL 树)是一棵空树,或者是具有下列性质的二叉排序树:    1它的左子树和右子树都是平衡二叉树,    2且左子树和右子树高度之差的 ...

  7. (转) [老老实实学WCF] 第三篇 在IIS中寄存服务

    第三篇 在IIS中寄宿服务 通过前两篇的学习,我们了解了如何搭建一个最简单的WCF通信模型,包括定义和实现服务协定.配置服务.寄宿服务.通过添加服务引用的方式配置客户端并访问服务.我们对WCF的编程生 ...

  8. 《第一行代码》学习笔记7-活动Activity(5)

    1.Intent中只能指定一个action,但却能指定多个category. 2.使用隐式Intent,不仅可以启动自己程序内的活动,还可以启动其他程序的活动,使得Android应用程序之间 的功能共 ...

  9. MySql函数应用

    -- 当前时间 now(); -- 查询结果串联(逗号) select group_concat(col_name) from table_name;

  10. c#打开指定设备程序以及网址

    //打开计算器 ProcessStartInfo startInfo = new ProcessStartInfo(); startInfo.FileName = @"C:\WINDOWS\ ...