首页 > 编程语言 > 详细

第一百五十八节,封装库--JavaScript,ajax说明

时间:2017-03-02 23:58:02      阅读:326      评论:0      收藏:0      [点我收藏+]

封装库--JavaScript,ajax说明

封装库ajax()方法,ajax通讯方法,跨页面向动态页面发送或获取数据

/** ajax()方法,ajax通讯方法,跨页面向动态页面发送或获取数据
 *  参数是一个对象{},如下
 *  $().ajax({
            method:‘post‘,                  【method】属性,通讯模式,post为post模式,get为get模式
            url:‘hj.php‘,                   【url】属性,发送数据或请求数据的url地址
            data:{                          【data】属性,是发送内容,是一个对象,里面是键值对形式的发送数据对象
                ‘name‘:‘lee‘,
                ‘age‘:100
            },
            success:function (text) {       【success】属性,是一个回调函数,函数参数是text,会接收到发送或者获取到的数据
                alert(text);
            },
            async:true                      【async】属性,请求方式,true异步方式,false同步方式
        });
 **/
feng_zhuang_ku.prototype.ajax = function (obj) {
    //创建XHR对象
    var xhr = (function () {
        if (typeof XMLHttpRequest != ‘undefined‘) {           //判断是否可以直接创建XHR对象,w3c
            return new XMLHttpRequest();                      //如果可以就直接创建XHR对象
        } else if (typeof ActiveXObject != ‘undefined‘) {     //判断IE低版本的3种模式是否支持
            var version = [
                ‘MSXML2.XMLHttp.6.0‘,
                ‘MSXML2.XMLHttp.3.0‘,
                ‘MSXML2.XMLHttp‘
            ];
            for (var i = 0; version.length; i++) {
                try {
                    return new ActiveXObject(version[i]);
                } catch (e) {
                    //跳过
                }
            }
        } else {
            throw new Error(‘您的系统或浏览器不支持XHR对象!‘);   //如果都不支持报错
        }
    })();  //自我执行闭包里的函数,创建XHR对象

    //接收对象url地址
    obj.url = obj.url + ‘?rand=‘ + Math.random();                 //组合对象传进来的通讯url地址

    //接收对象传来的内容,进行名值对编码
    obj.data = (function (data) {
        var arr = [];
        for (var i in data) {
            arr.push(encodeURIComponent(i) + ‘=‘ + encodeURIComponent(data[i]));
        }
        return arr.join(‘&‘);  //将数组格式化分隔符后返回
    })(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 {
            alert(‘获取数据错误!错误代号:‘ + xhr.status + ‘,错误信息:‘ + xhr.statusText);
        }
    }
    return this;
};

前台js

//调用ajax
    $(document).on_click(function () {
        $().ajax({
            method:‘post‘,
            url:‘hj.php‘,
            data:{
                ‘name‘:‘lee‘,
                ‘age‘:100
            },
            success:function (text) {
                alert(text);
            },
            async:true
        });
    });

通讯数据url地址hj.php

<?php
  echo ‘www.jxiou.com‘;
  print_r($_POST);
?>

最终回调显示

技术分享

第一百五十八节,封装库--JavaScript,ajax说明

原文:http://www.cnblogs.com/adc8868/p/6492845.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!