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. HBase二级索引的设计(案例讲解)

    摘要 最近做的一个项目涉及到了多条件的组合查询,数据存储用的是HBase,恰恰HBase对于这种场景的查询特别不给力,一般HBase的查询都是通过RowKey(要把多条件组合查询的字段都拼接在RowK ...

  2. 《学习opencv》笔记——矩阵和图像操作——cvCalcCovarMatrix,cvCmp and cvCmpS

    矩阵和图像的操作 (1)cvCalcCovarMatrix函数 其结构 void cvCalcCovarMatrix(计算给定点的均值和协方差矩阵 const CvArr** vects,//给定向量 ...

  3. Android开发有用的站点

    在github上面找到一个个人认为比較好的站点,好在能够方便下载开发工具.我的AndroidStudio就是在上面下载的.安装了一直在使用.该 网址主要收集整理Android开发所需的Android ...

  4. CSS 定位元素之 relative

    1. relative 和 absolute relative 会限制 absolute. absolute 会根据 父级的的定位元素来定位. 2. overflow 和 absolue 当overf ...

  5. correlated subquery and non-correlated subquery

    子查询:嵌套在其他查询中的查询称之. 子查询又称内部,而包含子查询的语句称之外部查询(又称主查询). 所有的子查询可以分为两类,即相关子查询和非相关子查询 1>非相关子查询是独立于外部查询的子查 ...

  6. MySQL 一些小知识

    1. 关于多表查询 我的理解:由于MySQL多表查询时表之间的连接是笛卡尔积的方式,所以尽量少使用多表查询,如果使用则使用嵌套语句 例:说明: `tb_notice_message` 表数量百万级别以 ...

  7. 关于百度鹰眼中 xcode 7 编译报错问题

    请把 这个地方改为 YES 否则demo 不能运行

  8. 刷新 tableview

    UITableView对于iOS开发者来说一定不会陌生,很有可能你的APP很多界面都用到它.关于UITableView的文章,想必已经不计其数,没事可以多看看.特别是UITableView优化的文章, ...

  9. DataSource

    数据库连接池原理:在内存中开辟一段存储空间用来存储多个Connection连接,避免频繁的创建Connection,从而提高效率.代码如下: package jcbc.ds.test1; import ...

  10. hdu 1234

    Problem Description 每天第一个到机房的人要把门打开,最后一个离开的人要把门关好.现有一堆杂乱的机房签 到.签离记录,请根据记录找出当天开门和关门的人. Input 测试输入的第一行 ...