ajax 纯javascript

function createXHR(){
    if(typeof XMLHttpRequest != ‘undefined‘){
        return new XMLHttpRequest();
    }else if(typeof ActiveXObject != ‘undefined‘){
        var version = [
                ‘MSXML2.XMLHttp.6.0‘,
                ‘MSXML2.XMLHttp.3.0‘,
                ‘MSXML2.XMLHttp‘,
        ];
        for(var i=0; i<version.length; i++){
            try{
                return new ActiveXObject(version[i]);
            }catch(e){

            }
        }
    }else{
        throw new Error(‘您的系统或浏览器不支持XHR对象!‘);
    }
}

//名值对转换字符串
function params(data){
    var arr=[];
    for(var i in data){
        arr.push(encodeURIComponent(i) + ‘=‘ + encodeURIComponent(data[i]));
    }
    return arr.join(‘&‘);
}

//封装Ajax
function ajax(obj){
    var xhr = new createXHR();
    obj.url = obj.url + ‘?rand=‘+ Math.random();
    obj.data = params(obj.data);
    if(obj.method == ‘get‘)obj.url += obj.url.indexOf(‘?‘) == -1 ? ‘?‘ +obj.data : ‘&‘ + obj.data ;
    if(obj.async === true){
        xhr.onreadystatechange=function(){
            if(xhr.readyState == 4){
                callback();
            }
        }
    }
    xhr.open(obj.method, obj.url, obj.async);
    if(obj.method === ‘post‘){
        xhr.setRequestHeader(‘Content-Type‘,‘application/x-www-form-urlencoded‘);
        xhr.send(obj.data);
    }else{
        xhr.send(null);
    }
    if(obj.async === false){
        callback();
    }
    function callback(){
        if(xhr.status == 200){
            obj.success(xhr.responseText);
        }else{
            console.log("获取数据错误!错误代号:"+ xhr.status +"错误信息:"+ xhr.statusText);
        }
    }
}

//调用Ajax
addEvent(document, ‘click‘, function(){
    ajax({
        method:‘get‘,
        url:‘demo.php‘,
        data:{
            ‘name‘:‘L&ee‘,
            ‘age‘:100
        },
        success:function(text){
            console.log(text);
        },
        async:true
    });
})
时间: 2024-11-05 06:18:03

ajax 纯javascript的相关文章

纯JavaScript实现异步Ajax的基本原理

Ajax实际就是XMLHttpRequest对象和DOM.(X)HTML和CSS的简称,用于概括异步加载页面内容的技术. Ajax实例 HTML代码如下,包含一个h5标题和一个按钮: JS代码如下: 上述代码中核心对象是XMLHttpRequest,这正是Ajax的技术基础.所有现代浏览器均支持XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject). XMLHttpRequest 用于在后台与服务器交换数据.这意味着可以在不重新加载整个网页的情况下,对网页的某

纯javascript写的table加载,包含分页、数据下载功能

直接先上效果图看看先. 首先简单说明一下,后面会给所涉及到的代码都贴上来的. 1.excel图标是一个用户控件,用来触发下载 2.首页.上页......每页多少条,这一块是一个整体,你可以选择放置在表格下面,或者表格上面都可以 3.表格则也是单独的一个,自己任意设置位置 4.复选框是否显示,自己设置,并可设置绑定的值,并有自带的方法可供你用于获取选中的复选框的对象跟值 5.表格的单行.双行.点击.悬浮.标题栏.表格的样式,都可以通过设置参数来修改,图为自带的效果 6.分页默认每页10行,分页的检

ajax+FormData+javascript 实现无刷新上传附件

<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <script type="text/javascript"> window.onload=function() { var fm=document.getElementsByTagName("form")[0]; f

javascript日历控件——纯javascript版

平时只有下班时间能code,闲来写了个纯javascript版.引用该calendar.js文件,然后给要设置成日历控件的input的id设置成calendar,该input就会变成日历控件. <!doctype html> <html> <head> <meta charset="utf-8"> <title>日历控件</title> <script src="js/calendar.js&quo

ajax+FormData+javascript 实现无刷新表单注册

<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <script type="text/javascript"> window.onload=function() { var fm=document.getElementsByTagName("form")[0]; f

纯Javascript获取一个元素的高度和宽度

纯Javascript脚本获取元素样式 一,问题描述 有时候,我们需要做一些页面让其中的元素按照不同的显示器而自适应,那么怎么计算这个元素的margin-top呢,我相信大家都会计算,那么涉及到其中的一个就是使用JS去获得这个元素的样式,比如说高度 二,解决方案 我们都知道,对于一个HTML页面元素来说,它的样式定义有两种方式,一种是写在元素的同行节点,俗称行内样式,另外一种则是定义在外部的CSS文件中,俗称外部样式,也就是这两种定义方式,导致我们获取高度的方式有所差异,详见以下表格 var o

ajax+FormData+javascript实现无刷新表单信息提交

ajax+FormData+javascript实现无刷新表单信息提交 原理: dom收集表单信息,利用FormData快速收集表单信息  ,实例化表单数据对象 同时收集fm的表单域信息. var fd = new FormData(fm); //实例化对象 alert(fd); fd对象内部有收集的form表单域信息 ajax传递表单信息 1.静态显示页面代码 1 <!DOCTYPE html > 2 <html> 3 <head> 4 <meta http-e

Highcharts是一个制作图表的纯Javascript类库

Highcharts是一个制作图表的纯Javascript类库,主要特性如下: 兼容性:兼容当今所有的浏览器,包括iPhone.IE和火狐等等: 对个人用户完全免费: 纯JS,无BS: 支持大部分的图表类型:直线图,曲线图.区域图.区域曲线图.柱状图.饼装图.散布图: 跨语言:不管是PHP.Asp.net还是Java都可以使用,它只需要三个文件:一个是Highcharts的核心文件highcharts.js,还有a canvas emulator for IE和Jquery类库或者MooTool

添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常

这两天想在网页中添加一个添加浮动按钮,点击该按钮滚动则到网页底部.在网上bing搜索了一下,大多是JQuery的. 我想要纯JavaScript的,只好DIY了.在IE9.11,Maxthon 1.6.7,Firefox30.31,360极速浏览器7.5.3.308下测试正常. 其中难点在于,setScrollBottom这个函数. 按常规写法: function setScrollBottom(value) { if (document.documentElement.scrollTop){