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. supersr--图形上下文的注意点

    - (void)test { // 不要自己调用drawRect:方法的原因: // 当系统调用drawRect:方法之前, 会创建一个与当前UIView的layer相关的图形上下文, 这样就可以保证 ...

  2. NYOJ题目436sum of all integer numbers

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAr0AAAHKCAIAAACBiWRrAAAgAElEQVR4nO3dP1LjSts34G8T5CyEFB

  3. stat file 查看文件的 最新的被访问时间 最近的修改时间 最近的状态改变时间

    [root@NB ~]# stat /media/6FE5-D831/git-data/IT-DOC/web收藏.txt File: `/media/6FE5-D831/git-data/IT-DOC ...

  4. 数据结构和算法 – 5.模式匹配和文本处理

    了使用正则表达式,需要把 RegEx 类引入程序.大家可以在 System.Text.RegularExpression 名字域中找到这种类.一旦把这种类导入了程序,就需要决定想要用 RegEx 类来 ...

  5. C#的匿名函数

    using System; using System.Collections; using System.Collections.Generic; using System.IO; using Sys ...

  6. ASP.NET MVC 伪静态的实现

    public class RouteConfig { public static void RegisterRoutes(RouteCollection routes) { routes.Ignore ...

  7. 基于类和基于函数的python多线程样例

    不断的练,加深记忆吧. #!/usr/bin/env python # -*- coding: utf-8 -*- import threading import time exitFlag = 0 ...

  8. 新手上路之Hibernate:第一个Hibernate例子

    一.Hibernate概述 (一)什么是Hibernate? Hibernate核心内容是ORM(关系对象模型).可以将对象自动的生成数据库中的信息,使得开发更加的面向对象.这样作为程序员就可以使用面 ...

  9. [LeetCode] Gas Station

    Recording my thought on the go might be fun when I check back later, so this kinda blog has no inten ...

  10. PHP实现上一篇、下一篇

    //php实现上一篇.下一篇 获取当前浏览文章id $id = isset($_GET[ ? intval($_GET['id']) : ""; 下一篇文章 $query = my ...