var Chef = {
createAjax:function() {
var xhr = null;
try {
//IE系列浏览器
xhr = new ActiveXObject("microsoft.xmlhttp");
} catch (e1) {
try {
//非IE浏览器
xhr = new XMLHttpRequest(); } catch (e2) {
window.alert("您的浏览器不支持ajax,请更换!");
}
}
return xhr;
},
ajax:function(conf) {
// 初始化 //type参数,可选
var type = conf.type,
//url参数,必填
url = conf.url,
//data参数可选,只有在post请求时需要
data = conf.data,
//datatype参数可选
dataType = conf.dataType,
//回调函数可选
success = conf.success;
if (type == null){
//type参数可选,默认为get
type = "get";
} if (dataType == null){
//dataType参数可选,默认为text
dataType = "text";
} // 创建ajax引擎对象
var xhr = this.createAjax();
// 打开
xhr.open(type, url, true);
// 发送
if (type == "GET" || type == "get") {
xhr.send(null);
} else if (type == "POST" || type == "post") {
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
xhr.send(data);
}
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
if(dataType == "text"||dataType=="TEXT") {
if (success != null){
//普通文本
success(xhr.responseText);
}
}else if(dataType=="xml"||dataType=="XML") {
if (success != null){ //接收xml文档
success(xhr.responseXML);
}
}else if(dataType=="json"||dataType=="JSON") {
if (success != null){
//将json字符串转换为js对象
success(eval("("+xhr.responseText+")"));
}
}
}
};
}
}

使用方法:

    Chef.ajax({
type:"post",
url:"../data/data.json",
data:"name=dipoo&info=good",
dataType:"json",
success:function(data){
alert(data.result);
}
});

封装原生Ajax的更多相关文章

  1. js 封装原生ajax

    jquery框架的ajax方法固然好用,但是假如某天我们的项目不能引入jquery或项目需求很简单,没有很多交互功能,只需要ajax,这时引入jquery库会造成资源浪费,也会显得页面臃肿.这时我们就 ...

  2. vue实践---vue结合 promise 封装原生ajax

    有时候不想使用axios这样的外部依赖,想自己封装ajax,这里有两种方法 方法一,在单个页面内使用 封装的代码如下: beforeCreate () { this.$http = (() => ...

  3. 原生ajax解析&封装原生ajax函数

    前沿:对于此篇随笔,完是简要写了几个重要的地方,具体实现细节完在提供的源码做了笔记 <一>ajax基本要点介绍--更好的介绍ajax 1. ajax对象中new XMLHttpReques ...

  4. ES6封装原生ajax请求

    http (data) { return new Promise((resolve, reject) => { var xhr = new XMLHttpRequest(); xhr.onrea ...

  5. 原生AJAX请求教程

    ajax 即 Asynchronous Javascript And XML,AJAX 不是一门的新的语言,而是对现有持术的综合利用.本质是在 HTTP 协议的基础上以异步的方式与服务器进行通信. 异 ...

  6. js原生Ajax(十四)

    一.XMLHttpRequest    [使用XMLHttpRequest时,必须将html部署到web服务器中]1) 指定请求1.实例化eg: var http = new XMLHttpReque ...

  7. 原生 ajax 请求

    ajax 即 Asynchronous Javascript And XML,AJAX 不是一门的新的语言,而是对现有持术的综合利用.本质是在 HTTP 协议的基础上以异步的方式与服务器进行通信. 异 ...

  8. js原生Ajax的封装与使用

    一.原生Ajax代码的封装如下: (function() { var XHR = { createStandardXHR: function() { return new XMLHttpRequest ...

  9. js原生Ajax 的封装和原理

    原理及概念 AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是一种用于创建快速动态网页的技术. 动态网页:是指可以通过服务器语言结合数 ...

随机推荐

  1. jquery-validation-1.13.1 自定义验证正则

    /*** check Mobile***********************/ jQuery.validator.addMethod("isMobile", function( ...

  2. PHP如何判断远程图片文件是否存在

    <?php $url = 'http://www.nowamagic.net/images/test.jpg'; if( @fopen( $url, 'r' ) ) { echo 'File E ...

  3. [Android Pro] 使用apktool工具遇到could not decode arsc file的解决办法

    转:http://www.cnblogs.com/sage-blog/p/4323049.html 最近使用APKtool工具反编译APK老是提示不成功,错误如下: Exception in thre ...

  4. 浅析 - 提高xib(Interface Builder)高效工作的几个小技巧

    本文译自:8 Tips for working effectively with Interface Builder(需FQ)先来看看目录:介绍使view的Size与view中的Content相适应按 ...

  5. jdbc连接oracle数据库

    /*** 通过改变配置文件来连接不同数据库*/package com.xykj.jdbc; import static org.junit.Assert.*; import java.io.Input ...

  6. CSS3–2.css3 响应式布局

    1.响应式布局 响应式布局是现在很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果,设计师提出了响应式布局的设计方案.所谓的响应式布局,就是一个网站 ...

  7. 【131202】SQL

    SELECT TOP 2 * FROM Persons SELECT *FROM PersonsWHERE ROWNUM <= 5   SELECT * FROM Persons WHERE C ...

  8. POJ3685 Matrix(嵌套二分)

    同行元素递减,同列元素递增,采用嵌套二分的方法 #include<cstdio> #include<iostream> #include<cstdlib> #inc ...

  9. mysql 查询优化规则

    .请不要在SELECT中使用DISTINCT: #会用到临时表 .尽可能不要SELECT *,而应该查询需要用到的指定几个字段: .不要对两个大表进行联合,无论是内联或外联.对于需要对两个或多个表进行 ...

  10. phpcms v9 黄页实现手机访问手机版,电脑访问电脑版(双模板)

    第一步.模板文件夹下,yp复制一份,改名字 ypwap 第二步.修改phpcms/modules/yp/index.php和phpcms/modules/ypwap/index.php //判断客户端 ...