工作中一直有写JS,也一直有用jquery,在感受jquery便利之余,也对它产生了依赖,已至于许多功能只知使用而不知原生写法,就像ajax。

今天不小心翻看了以前学习的视频,温故了一下原生ajax写法及原理,正好捣鼓捣鼓。这也是面试经常会遇到的问题,动手封装下原生的ajax函数何乐而不为了,代码如下:

function ajaxfn(obj){
/*传入一个json对象
*type:为请求方式,如get,post
*data:传输的数据
*async:异步请求,默认为true
*dataType:返回的数据类型
*url:这请求地址
*fnok:为请求成功时的回调,默认传入返回的数据
*fnerror:为请求失败的回调,默认传入当前的服务器状态码,如500,404
*/
var xhr=null,
type=obj.type?obj.type.toLowerCase():"get",//默认是get
url=obj.url,
data=obj.data?JSON.stringify(obj.data):null,
dataType=obj.dataType?obj.dataType.toLowerCase():"text",
async=true;//默认是异步
if(obj.async==false){
async=false;
}
//创建XMLHttpRequest对象
try{
xhr=new XMLHttpRequest();
}catch(e){
//兼容ie6
xhr=new ActiveXObject('Microsoft.XMLHTTP');
}
//连接服务器
xhr.open(type,url,async);
//发送请求
if(type=="post"){//如果是post请求得先设置请求头,application/x-www=form-urlencoded适合绝大多数的应用场景
xhr.setRequestHeader("content-type","application/x-www=form-urlencoded");
}
xhr.send(data);
//监听过程
xhr.onreadystatechange=function(){
/*readyState请求状态
*0:请求未初始化(还没有调用open())
*1:请求已经建立,但是还没有发送(还没有调用send())
*2:请求已发送,正在处理中(通常现在可以从响应中获取内容头)。
*3:请求处理中,通常响应中已有部分数据可用了,但是服务器还没有完成响应的生成。
*4:响应已经完成;可以获取并使用服务器的响应了.
*/
if(xhr.readyState==4){//请成完成
/*常用http状态码
*200:服务器成功返回网页
*304:未修改,使用缓存
*403:服务器拒绝请求
*404:请求的网页不存在
*503:服务器暂时不可用
*500:服务器内部错误
*/
if(xhr.status==200){//返回成功
switch (dataType){
case "text"://接收到字符串
obj.fnok && obj.fnok(xhr.responseText);
break;
case "json"://接收到json字符串数据
obj.fnok && obj.fnok(JSON.parse(xhr.responseText));
break;
case "xml"://接收到xml格式数据
obj.fnok && obj.fnok(xhr.responseXML);
break;
}
}else{
obj.fnerror && obj.fnerror(xhr.status);
}
}
}
}
}

注:为了兼容IE6,ie7,ie8(兼容模式)支持JSON对象的stringify(),parse()方法,引入了一个json2.js文件,文件下载地址如下:https://github.com/douglascrockford/JSON-js

使用示例如下:

ajaxfn({
type:'get',//请求方式
url:'test.txt',//请求地址
dataType:'text',//返回的数据类型
fnok:function(data){//请求成功的回调
alert(data);
},
fnerror:function(data){//请求失败的回调
alert(data);
}
});

个人知识有限,如有错误的地方,望指正,共同学习共同进步!

ajax温习的更多相关文章

  1. Ajax 简述

    说到Ajax大家一定不陌生,但是真要具体说说它是什么?估计给出完整定义的人应该不多. W3C上给Ajax的具体定义为: AJAX = Asynchronous JavaScript and XML(异 ...

  2. 从头开始一步一步实现EF6+Autofac+MVC5+Bootstarp极简的实现前后台ajax表格展示及分页实现

    本来是想试着做一个简单OA项目玩玩的,真是不做不知道,一做吓死人,原来以为很简单的事情,但是做起来不是忘这就是忘那的,有的技术还得重新温习.所以还是得记录.免得哪天电脑挂了,就全没有了. 开始是看了园 ...

  3. 框架基础:ajax设计方案(一)---集成核心请求

    报告,我要说话!xp被历史淘汰了,IE6 say goodbye了,太TM开心了,从此不要兼容IE6了,哈哈哈哈哈哈 报告,我要说话!IE这sb为啥不早点被杀掉呢,找工作听说要兼容IE,立马软了,唉唉 ...

  4. 前端通信:ajax设计方案(一)---集成核心请求

    报告,我要说话!xp被历史淘汰了,IE6 say goodbye了,太TM开心了,从此不要兼容IE6了,哈哈哈哈哈哈 报告,我要说话!IE这sb为啥不早点被杀掉呢,找工作听说要兼容IE,立马软了,唉唉 ...

  5. AJAX 相关笔记

    AJAX (Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)). 平时工作中使用ajax的频率挺高的,这里整理了一些ajax相关的小知识,后续 ...

  6. jQuery之ajax实现篇

    jQuery的ajax方法非常好用,这么好的东西,你想拥有一个属于自己的ajax么?接下来,我们来自己做一个简单的ajax吧. 实现功能 由于jq中的ajax方法是用了内置的deferred模块,是P ...

  7. Ajax及跨域

    概念 Ajax Ajax,Asynchronous JavaScript and XML,字面意思:异步的 JavaScript 和 XML,是指一种创建交互式网页应用的网页开发技术. 用于异步地去获 ...

  8. 前端框架 EasyUI (0) 重新温习(序言)

    几年前,参与过一个项目.那算是一个小型的信息管理系统,BS 结构的,前端用的是基于 jQuery 的 EasyUI 框架. 我进 Team 的时候,项目已经进入开发阶段半个多月了.听说整个项目的框架是 ...

  9. 一个粗心的Bug,JSON格式不规范导致AJAX错误

    一.事件回放  今天工作时碰到了一个奇怪的问题,这个问题很早很早以前也碰到过,不过没想到过这么久了竟然又栽在这里. 当时正在联调一个项目,由于后端没有提供数据接口,于是我直接本地建立了一个 json ...

随机推荐

  1. 分享一个 jquery serializeArray()序列化方法

    http://www.365mini.com/page/jquery-serializearray.htm http://www.365mini.com/diy.php?f=jquery-serial ...

  2. python-函数中定义可变参数

    可变参数 在Python函数中,还可以定义可变参数.顾名思义,可变参数就是传入的参数个数是可变的,可以是1个.2个到任意个,还可以是0个. 我们以数学题为例子,给定一组数字a,b,c……,请计算a2 ...

  3. The string "--" is not permitted within comments

    ibatis中SAXParseException异常:The string "--" is not permitted within comments 这个异常是说sqlmap里面 ...

  4. js window.open() 父窗口与子窗口的互相调用(未必有用)

    javascript 父窗口与子窗口的互相调用 <html> <head></head> <body> 主要实现父子关系的页面 window.opene ...

  5. 第二节 初识 python

    Python的由来 在1989年12月时,吉多·范罗苏姆——龟叔,想寻找一门“课余”编程项目来打发圣诞节前后的时间.Guido决定为当时正构思的一个新的脚本语言写一个解释器,它是ABC语言(教学语言. ...

  6. java.lang.ClassCastException: android.widget.RelativeLayout cannot be cast to android.widget.TextView

    最近在学习drawerLayout时,遇到这个bug.如下示: java.lang.ClassCastException: android.widget.RelativeLayout cannot b ...

  7. MVC 学习(二)之Linq to Sql 简单Demo

    Linq to Entities 已经我的一篇博文中阐述了,这里阐述一下简单的Linq to Sql 的增删改查.Linq to sql 与Linq to Entities虽然同属于DataBase- ...

  8. git常用命令1

    git clone   #克隆远程仓库的项目到本地 git config --global user.name ""    #查看或设置贡献者的名字 git config --gl ...

  9. 管理权限<八>

    权限:如果用户要访问其它方案的对象,则必须为其授予对象的权限.为权限  权限 权限是指执行特定类型 sql 命令或是访问其它方案对象的权利,包括系统权限和对象权限两种. 系统权限  系统权限介绍 ...

  10. jquery 让select元素中的某个option被选中

    jquery 操作select 取值,设置选中值 博客分类: javaScript selecttextvalue取值设置选中值 比如 <select class="type" ...