引言
之前就没有怎么学习过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封装好的,而现在需要我们进行反序列的操作。
所以说在学习的过程中基础知识的学习是非常重要的,因为只有我们的基础学习扎实了,在后面学习新的东西的
时候才容易上手!!