第一次开个人技术博客了,发的第一篇技术文章,欢迎指点……

欢迎访问本人的独立博客:蓝克比尔

Ajax的实现主要分为四部分:

1、创建Ajax对象

// 创建ajax对象
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
} else {
//为了兼容IE6
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}

2、连接服务器

// 连接服务器open(方法GET/POST,请求地址, 异步传输)
xhr.open('GET', 'data.txt', true);

3、发送请求

// 发送请求
xhr.send();

4、接收返回数据

// 处理返回数据
/*
** 每当readyState改变时,就会触发onreadystatechange事件
** readyState属性存储有XMLHttpRequest的状态信息
** 0 :请求未初始化
** 1 :服务器连接已建立
** 2 :请求已接受
** 3 : 请求处理中
** 4 :请求已完成,且相应就绪
*/
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
/*
** Http状态码
** 1xx :信息展示
** 2xx :成功
** 3xx :重定向
** 4xx : 客户端错误
** 5xx :服务器端错误
*/
if(xhr.status == 200){
success(xhr.responseText);
} else {
if(failed){
failed(xhr.status);
}
}
}
}

Ajax封装函数:

function Ajax(type, url, data, success, failed){
// 创建ajax对象
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject('Microsoft.XMLHTTP')
} var type = type.toUpperCase();
// 用于清除缓存
var random = Math.random(); if(typeof data == 'object'){
var str = '';
for(var key in data){
str += key+'='+data[key]+'&';
}
data = str.replace(/&$/, '');
} if(type == 'GET'){
if(data){
xhr.open('GET', url + '?' + data, true);
} else {
xhr.open('GET', url + '?t=' + random, true);
}
xhr.send(); } else if(type == 'POST'){
xhr.open('POST', url, true);
// 如果需要像 html 表单那样 POST 数据,请使用 setRequestHeader() 来添加 http 头。
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send(data);
} // 处理返回数据
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
success(xhr.responseText);
} else {
if(failed){
failed(xhr.status);
}
}
}
}
} // 测试调用
var sendData = {name:'asher',sex:'male'};
Ajax('get', 'data/data.html', sendData, function(data){
console.log(data);
}, function(error){
console.log(error);
});

欢迎访问本人的独立博客:蓝克比尔

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

  1. 原生JavaScript 封装ajax

    原生JavaScript 封装ajax   function myajax(options){ //新建一个局部对象 用来存放用户输入的各种参数 var opt={ type:options.type ...

  2. 原生javascript封装ajax和jsonp

    在我们请求数据时,完成页面跨域,利用原生JS封装的ajax和jsonp: <!DOCTYPE html> <html lang="en"> <head ...

  3. 原生 JavaScript 实现 AJAX、JSONP

    相信大多数前端开发者在需要与后端进行数据交互时,为了方便快捷,都会选择JQuery中封装的AJAX方法,但是有些时候,我们只需要JQuery的AJAX请求方法,而其他的功能用到的很少,这显然是没必要的 ...

  4. 原生JavaScript实现AJAX、JSONP

    相信大多数前端开发者在需要与后端进行数据交互时,为了方便快捷,都会选择JQuery中封装的AJAX方法,但是有些时候,我们只需要JQuery的AJAX请求方法,而其他的功能用到的很少,这显然是没必要的 ...

  5. 原生JavaScript写AJAX

    前端JavaScript: function ajaxGet(url, obj) { var request; if(window.XMLHttpRequest) { request = new XM ...

  6. 原生javaScript完成Ajax请求

    使用原生javaScript完成Ajax请求,首先应该创建一个对象XMLHttprequest,考虑到兼容低版本IE浏览器,使用ActiveXObject对象,代码入下: var request; i ...

  7. 原生JavaScript封装的jsonp跨域请求

    原生JavaScript封装的jsonp跨域请求 <!DOCTYPE html> <html lang="en"> <head> <met ...

  8. 使用原生JS封装Ajax

    使用原生 的JS封装 Ajax,实现 仿JQuery的Ajax,post,get三种异步请求方式: var MAjax = { //根据浏览器创建异步对象 createXhr: function () ...

  9. 【Ajax 3】JavaScript封装Ajax

    导读:上一篇博客简单介绍了一下对Ajax中的核心对象XMLHttpRequest的封装.那么为了方便对Ajax的应用,我们还需要进一步的对Ajax的基本功能进行下一步的封装,不得不说的是早就有人专门写 ...

随机推荐

  1. Arduino VS. Raspberry Pi VS. Beaglebone Black

    The Arduino is a small Atmel-based microcontroller development board easily integrated into many dif ...

  2. django下载文件

    赶快记录一下写的一个django下载文件的例子,以便以后复习: 在views.py中设置 from django.core.servers.basehttp import FileWrapper im ...

  3. 苹果icloud邮箱抓取

    1 icloud登录,与其他网站登录区别  1.1 支持pop抓取的邮箱:pop提供统一接口,抓取简单:  1.2 没有前端js加密的邮箱(139,126,163):只要代码正确模拟登录流程,参数正确 ...

  4. IOS学习之路五(代码实现UITableView)

    先展示一下运行结果: 代码实现: 1.先创建一个空项目: 2.创建一个Controller:(TableViewController) 在AppDelegate.h中声明属性: //  AppDele ...

  5. [C#、winform] FormDesigner.cs报错The variable 'xxxxxx' is either undeclared or was never assigned

    背景: 我写了一个App.config配置文件,在里面定义了模块: <add key="key1" value="std1|std2|std3|std4" ...

  6. HighCharts 图表高度动态调整

    HighCharts 图表高度动态调整 前言 在使用HighCharts控件过程中,发现图表可以自适应div的高度,无法根据图表x.y轴的数量动态调整div高度,否则图标挤在一起,看起来非常不美观,也 ...

  7. spring.net AOP配置基础

    在第一篇中,我们用配置代理工厂的方式实现了面向切面记日志的功能.非常便捷的实现了AOP,但当我们需要对多个切入点配置通知的时候就需要声明多个代理工厂,这样导致配置文件内容过多,配置过程也很繁琐.spr ...

  8. 仿腾讯微博的一个弹出框 v0.1 beta

    仿腾讯微博的一个弹出框 v0.1 beta   代码写的不太好,新手请大家海涵,只为博君一笑,勿放在心上. 写在这里留作纪念,也许以后用的到. 效果 CSS .prompt{ position: ab ...

  9. linux history 命令详解

    linux history 命令详解 显示命令执行时间 linux shell 具有history 功能,即会记录已经执行过的命令,但是默认是不显示命令的执行时间,命令的执行时间,history 已经 ...

  10. Centos 5上使用YUM安装GIT

    网上搜索的基本上都是一样的内容 1.先安装git依赖的包 yum install zlib-devel yum install openssl-devel yum install perl yum i ...