原生AJAX实现异步请求

   引言

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

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

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

说不得不使用原生的东西&＃xff0c;下面给大家分享&＃xff1a;

   1、创建异步请求对象

function createXmlHttp() {var xmlHttp;try { // Firefox, Opera 8.0&＃43;, SafarixmlHttp &＃61; new XMLHttpRequest();}catch (e) {try {// Internet ExplorerxmlHttp &＃61; new ActiveXObject("Msxml2.XMLHTTP");}catch (e) {try {xmlHttp &＃61; new ActiveXObject("Microsoft.XMLHTTP");}catch (e) { }}}return xmlHttp;}

 2、请求过程

function showDetail() {// 1.创建异步对象var xhr &＃61; createXmlHttp();xhr.onreadystatechange &＃61; function () {if (xhr.readyState &＃61;&＃61;&＃61; 4 && xhr.status &＃61;&＃61;&＃61; 200) {var data &＃61; new Function("return" &＃43; xhr.responseText)()//反序列化}}xhr.open("GET", &＃39;http://localhost:10086/tongji/CountStatisticss/Count&＃39;, 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]}。这样我们就需要进行反序

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

据》;

  3、后台controller代码

public IHttpActionResult Count(){List name &＃61; new List();name.Add("UV");name.Add("PV");name.Add("Ceshi");List Uvcount &＃61; new List();Uvcount.Add(1);Uvcount.Add(2);Uvcount.Add(3);Uvcount.Add(4);Uvcount.Add(5);Uvcount.Add(6);Uvcount.Add(7);List Pvcount &＃61; new List();Pvcount.Add(10);Pvcount.Add(20);Pvcount.Add(30);Pvcount.Add(40);Pvcount.Add(50);Pvcount.Add(60);Pvcount.Add(70);var data &＃61; new{name &＃61; name,pcount &＃61; Pvcount,ucount &＃61; Uvcount};return Json(data);}

   小结

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

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

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

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

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

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

时候才容易上手&＃xff01;&＃xff01;