原生AJAX实现异步请求

引言

之前就没有怎么学习过ajax的理论知识，但是在项目中用的非常的熟练。因为我一直在用jQuery封装好的，在

使用的过程中非常的方便，只要我们按照那个格式写就会得到我们想要的结果，包括序列化和反序列的过程都需要我

们来完成，但是在公司里面不让使用jQuery，因为在使用的时候需要引入一个jQuery包，这样非常的影响性能。所以

说不得不使用原生的东西，下面给大家分享：

1、创建异步请求对象

function createXmlHttp() {
        var xmlHttp;
        try { // Firefox,Opera 8.0+,Safari
            xmlHttp = new XMLHttpRequest();
        }
        catch (e) {
            try {// Internet Explorer
                xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
            }
            catch (e) {
                try {
                    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                catch (e) { }
            }
        }

        return xmlHttp;

    }

2、请求过程

function showDetail() {

    // 1.创建异步对象
    var xhr = createXmlHttp();
    xhr.onreadystatechange = function () {
       if (xhr.readyState === 4 && xhr.status === 200) {

            var data = new Function("return" + xhr.responseText)()//反序列化

        }
    }

    xhr.open("GET",'http://localhost:10086/tongji/CountStatisticss/Count',true);
    function processRequest(data) {
        alert(data);
   }
    // 4.发送
    xhr.send(null);


}

其中xhr.responseText就是我们请求后返回的json对象或者是xml格式的数据{"name":

["UV","PV","Ceshi"],"pcount":[10,20,30,40,50,60,70],"ucount":[1,2,3,4,5,6,7]}。这样我们就需要进行反序

列化以后才能使用，上面代码中就是我用到的一个方法，方法还有很多大家可以参考博客《js读取解析JSON类型数

据》;

3、后台controller代码

public IHttpActionResult Count()
        {
            List<string> name = new List<string>();
            name.Add("UV");
            name.Add("PV");
            name.Add("Ceshi");

            List<int> Uvcount = new List<int>();
            Uvcount.Add(1);
            Uvcount.Add(2);
            Uvcount.Add(3);
            Uvcount.Add(4);
            Uvcount.Add(5);
            Uvcount.Add(6);
            Uvcount.Add(7);

            List<int> Pvcount = new List<int>();
            Pvcount.Add(10);
            Pvcount.Add(20);
            Pvcount.Add(30);
            Pvcount.Add(40);
            Pvcount.Add(50);
            Pvcount.Add(60);
            Pvcount.Add(70);

            var data = new
            {
                name = name,pcount = Pvcount,ucount = Uvcount
            };
            return Json(data);
        }

小结

在写这个东西的时候着实花费了我一些时间，因为自己在学习这块基础知识的时候没有学好，所以现在用起来

比较费劲，让我陷入困境的是第一个URL的值，之前都是写一个/controller名称/方法名称，但是在我们项目中这样

写就是不能跳转到controller方法中，这是因为现在的项目中是采用APIcontroller，页面和controller没有在一个

项目下，所以直接用虚拟路径是不可以的。第二个就是：不知道如何接收和处理后台返回的数据。因为之前都是

jQuery封装好的，而现在需要我们进行反序列的操作。

所以说在学习的过程中基础知识的学习是非常重要的，因为只有我们的基础学习扎实了，在后面学习新的东西的

时候才容易上手！！

原文地址：https://www.jb51.cc/ajax/162346.html

原生AJAX实现异步请求

相关推荐