工作中一直有写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. Python_sklearn机器学习库学习笔记(一)_Feature Extraction and Preprocessing(特征提取与预处理)

    # Extracting features from categorical variables #Extracting features from categorical variables 独热编 ...

  2. 纯手工打造(不使用IDE)java web 项目

    必备环境 1.编译器:jdk 2.web服务器:tomcat 3.文本编辑器:sublime,编写java文件和jsp文件,没有的话用记事本也行. 一.建立工程目录结构,如下图 在操作系统下完成即可, ...

  3. Java核心知识点学习----使用Condition控制线程通信

    一.需求 实现线程间的通信,主线程循环3次后,子线程2循环2次,子线程3循环3次,然后主线程接着循环3次,如此循环3次. 即:A->B->C---A->B->C---A-> ...

  4. JS 菜单栏一直悬浮在顶部代码

    只需要把下面代码放到js中: $(function(){                //获取要定位元素距离浏览器顶部的距离         var navH = $(".menu&quo ...

  5. iOS10适配及Xcode8配置

    一.证书管理 用Xcode8打开工程后,比较明显的就是下图了,这个是苹果的新特性,可以帮助我们自动管理证书.建议大家勾选这个Automatically manage signing(Ps.但是在bea ...

  6. 【java】:通用接口

    电商接口 京东获取单个商品价格接口: http://p.3.cn/prices/mgets?skuIds=J_商品ID&type=1 用例 ps:商品ID这么获取:http://item.jd ...

  7. java去处重复输出

    去除重复输出问题:   数组:大量相同数据类型的集合 数据类型[ ] 数组名=new 数据类型[长度] 数据类型[ ] 数组名=new 数据类型[ ]{值1,值 2,值3.....} 数据类型[ ] ...

  8. 奇葩问题之ToolBar返回键失效

    今天遇到一个奇葩问题,先说现象:接口调用成功,但是在后台业务上报错时(比如:手机号已经被注册过时,接口调用成功,但是后台返回了错误信息:手机号已被注册),toolBar的返回键失效了. 后来仔细看了一 ...

  9. java8的接口新特性(可以有方法体的接口)(转)

    以前Java的接口中定义的方法不可以有方法体,这样试用起来,有时候听不方便的,当有多个类实现了想同的接口,接口中某一些方法的实现体可能都是一样的时候,这样无疑浪费了很多时间,在写重复的代码(或者说co ...

  10. 超链接的#和javascript:void(0)的区别

    转载于:http://www.uw3c.com/cssviews/css12.html   在工作中,如果我们想把a标签中的链接置成空链接,我们一般会用两种方法: 1 <a href=" ...