Ajax的简单封装

Ajax的简单封装：

说明：简单封装，总结下ajax的请求方式，异步，RequestText/RequestXml,XMLHttpRequest,XMLHttpRequest,onreadystatechange,readyState,setRequestHeader,status,open,send的使用。案例实在Asp.NET MVC 下写的。

代码：

cshtml:

@{
    ViewBag.Title = "Ajax的简单封装";
}

<h2>Ajax的简单封装,点击屏幕发送请求</h2>
<script type="text/javascript">

    /*
     *  创建XMLHttpRequest对象
     *  1.判断浏览器类型
     *    IE:ActiveXObject对象
     *    ！IE:XMLHttpRequest对象
     */
    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) {
                    return;
                }
            }
        } else {
            alert("你的浏览器不支持XMLHttpRequest对象，请更换浏览器。");
        }
    }

    /*
    * 请求参数转字符串（先只考虑传入json）
    */
    function params(data) {
        var arr = [];
        for (var i in data) {
            arr.push(encodeURIComponent(i) + '=' + encodeURIComponent(data[i])); //加到数组与编码
        }
        return arr.join('&');
    }

    /*
     *  Ajax的封装
     *  1.创建xhr对象
     *  2.请求方式，url,是否异步,准备open()
     *  3.发送请求 send()
     *  4.回调（判断返回值类型）
     */
    function ajax(obj) {
        var xhr = createXHR();                                                                 //创建XMLHttpRequest对象
        //确定url
        obj.url = obj.url + "?rand=" + Math.random();                                           //请求地址，带随机字符串，解决缓存问题
        if (obj.type.toLowerCase() === 'get') {                                                //get方式请求的情况
            obj.data = params(obj.data);
            if (obj.url.indexOf('?') == -1) {
                obj.url = obj.url + '?' + obj.data;
            } else {
                obj.url = obj.url + '&' + obj.data;
            }
        }
        //是否异步
        if (obj.async) {                                                                      //异步
            xhr.onreadystatechange = function () {                                              //描述异步Ajax执行状态
                if (xhr.readyState == 4) {                                                    //只有状态值为4的时候说明请求执行完毕
                    callback();                                                               //回调
                }
            };
            openAndsend();                                                                    //执行open()与send()方法
        } else {                                                                              //同步
            openAndsend();                                                                    //执行open()与send()方法
            callback();                                                                       //回调
        }

        //定义执行open 与send
        function openAndsend() {
            xhr.open(obj.type, obj.url, obj.async);                                            //调用open()方法，准备发送请求。
            if (obj.type.toLowerCase() === 'post') {                                              //post请求
                xhr.setRequestHeader('Content-Type', 'application/x-www-from-urlencoded');     //设置信息，发送post的必须设置
                xhr.send(obj.data);                                                               //send() 发送post方式请求
            } else {                                                                            //get方式请求
                xhr.send(null);                                                                 //调用send()方法，发送get方式请求。
            }
        }

        //定义回调函数
        function callback() {
            if (!(xhr.status == 200)) {
                alert('获取数据错误，错误状态码：' + xhr.status + ',错误值：' + xhr.statusText);
                return;
            } else {
                //判断返回值类型
                switch (obj.dateType.toLowerCase()) {
                    case 'text':
                        obj.success(xhr.responseText);
                        break;
                    case 'json':
                        obj.success(eval('(' + xhr.responseText + ')'));
                        break;
                    case 'xml':
                        obj.success(xhr.responseXML);
                        break;
                    case 'html':
                        obj.success(xhr.responseText);
                        break;
                    default:
                        obj.success(xhr.responseText);
                        break;
                }
            }
        }

    }

    /*
     *  调用Ajax
     */
    document.addEventListener("click", function () {
        ajax({
            async: true,                                                   //是否异步（false:同步，true:异步）
            type: 'GET',                                                   //请求方式（POST  GET）
            url: '/AjaxTest/GETJSON',                                       //请求地址
            dateType: 'json',                                               //返回数据格式
            data: {"Num1":20,"Num2":30},                                                      //请求参数
            success: function (data) {                                     //回调函数
                console.log(data)              
            }                     
        });
    });
</script>

Controller:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Xml;

namespace Ajax.Controllers
{
    public class AjaxTestController : Controller
    {
        /// <summary>
        /// GET 方式请求返回JSON数据
        /// </summary>
        /// <returns></returns>
        [HttpGet]
        public JsonResult GETJSON() {
            //接收参数
            string str1=Request.Params["Num1"];
            string str2 = Request.Params["Num2"];
            int num1,num2;
            int.TryParse(str1, out num1);
            int.TryParse(str2, out num2);            
            return Json(new { Sum=num1+num2 },JsonRequestBehavior.AllowGet);
        }      
    }
}

运行测试：

正确请求：GET 方式，返回json

错误请求：POST，返回json