初识--Ajax&Json

1，Ajax是一种进行页面局部异步刷新技术。用AJAX向服务器发送请求和获得服务器返回的数据并更新到页面中。

不是刷新整个页面，而是在HTML页面中使用javaScript创建xmlHTTPRequest对象向服务器发出请求以及获得返回的数据。

常见例子：帖子评论、视频下的评论，我们提交评论以后不会有整个HTML页面的刷新，不会有视频的中断。

2，我们借助Nvelocity模板引擎写一个一般处理程序，实现评论中常见的 [赞、踩] 功能。

Demo 下载（1，Demo中的视频需自行添加 2，方便排版Demo中用了Bootstrap，可参考http://www.bootCSS.com/）

我们发现，每次点击赞或踩页面都重新刷新了一次，正在播放的视频也重新播放了。

3，我们再用Ajax实现点击显示点赞次数。

新建CommentByAjax.html，页面中给按钮 “赞” 添加 onclick方法， onclick方法中通过Javascript创建xmlhttpRequest对象向服务器端的一般处理程序请求处理结果。

处理结果返回到html页面并显示，这样整个过程没有刷新页面，只是通过XMLHTTPRequest对象请求了点赞次数，实现了局部刷新。

效果如下：连续点赞页面显示点赞次数递增，视频没有中断或者重播。

步骤：A, 新建CommnetByAJAX.html页面，并添加 javascript 方法创建XMLHTTPRequest对象请求服务器

<!DOCTYPE html>

<head>

<!--[iflt IE9]>

<![endif]-->

document.getElementById("ZanNum").innerHTML =xmlhttp.responseText;

}else{

alert("AJAX服务器返回错误！");

}

}//不要以为if (xmlhttp.readyState == 4) {在send之前执行！！！！xmlhttp.send();//这时才开始发送请求//发出请求后不等服务器返回数据，就继续向下执行，所以不会阻塞，界面就不卡了，这就是AJAX中“A”的含义“异步”。试着在ashx加一句Thread.Sleep(3000);}</script>

</head>

<body>

<divclass="row">

<divclass="col-md-1"></div>

<divclass="col-md-5">

</div>

<divclass="col-md-6"></div>

</div>

<divclass="row">

<divclass="col-md-1"></div>

<divclass="col-md-1">

</div>

<divclass="col-md-1">

</div>

<divclass="col-md-9"></div>

</div>

</form>

<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>

</body>

View Code

B, 添加点赞、点踩计算的一般处理程序: ZanCai.ashx ,接收CommentByAJAX.html传递过来的参数（Zan/Cai）计算次数，并返回

usingSystem;usingSystem.Collections.Generic;usingSystem.Linq;usingSystem.Web;namespaceAjaxDemo

{///<summary>///ZanCaiCount 的摘要说明///</summary>publicclassZanCaiCount : IHttpHandler

{privatestaticintnumZan =0;privatestaticintcaiNum =0;publicvoidProcessRequest(HttpContext context)

{

context.Response.ContentType="text/html";//根据Action参数判断是赞还是踩stringstrAction = context.Request.QueryString["Action"];if(strAction =="Zan")

{

numZan++;

context.Response.Write(numZan.ToString());//输出}elseif(strAction =="Cai")

{

caiNum++;

context.Response.Write(caiNum.ToString());//输出}

}publicboolIsReusable

{get{returnfalse;

}

View Code

C, 以上完成了AJAX请求点赞次数。整个过程主要就是 javascript方法创建XMLHTTPRequest对象向服务器请求数据，如下代码：

document.getElementById("ZanNum").innerHTML =xmlhttp.responseText;

}else{

alert("AJAX服务器返回错误！");

}

4，我们把上面一段JavaScript方法封装到js文件中，方便以后调用。

步骤：A, js文件夹下添加 ajax.js

function ajax(url, onsuccess) {varxmlhttp = window.XMLHttpRequest ?newXMLHttpRequest() :newActiveXObject('Microsoft.XMLHTTP');//创建XMLHTTP对象，考虑兼容性xmlhttp.open("POST", url,true);//“准备”向服务器的ZanCaiCount.ashx发出Post请求（GET可能会有缓存问题）。这里还没有发出请求xmlhttp.onreadystatechange=function () {if(xmlhttp.readyState ==4)//readyState == 4 表示服务器返回完成数据了。之前可能会经历2（请求已发送，正在处理中）、3（响应中已有部分数据可用了，但是服务器还没有完成响应的生成）{if(xmlhttp.status ==200)//如果状态码为200则是成功{

onsuccess(xmlhttp.responseText);//document.getElementById("ZanNum").innerHTML = xmlhttp.responseText;}else{

alert("AJAX服务器返回错误！");

}

View Code

B, CommnetByAJAX.html页面添加对ajax的引用并实现点击 “踩”的时候显示次数

<!DOCTYPE html>

<head>

<!--[iflt IE9]>

<![endif]-->

document.getElementById("ZanNum").innerHTML =xmlhttp.responseText;

}else{

alert("AJAX服务器返回错误！");

}

function AddCai() {

ajax("ZanCaiCount.ashx?action=Cai", function (result) { document.getElementById("CaiNum").innerHTML =result })

}</script>

</head>

<body>

<divclass="row">

<divclass="col-md-1"></div>

<divclass="col-md-5">

</div>

<divclass="col-md-6"></div>

</div>

<divclass="row">

<divclass="col-md-1"></div>

<divclass="col-md-1">

</div>

<divclass="col-md-1">

</div>

<divclass="col-md-9"></div>

</div>

</form>

<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>

</body>

View Code

点赞点踩效果如下

5， AJAX的经常用在网站新用户注册的时候，检查用户名称是否存在。

步骤：A, 添加新用户注册页面，页面中用户名文本框中添加onbluer()事件，鼠标焦点离开以后触发检查用户民是否存在

<!DOCTYPE html>

<head>

<title>新用户注册</title>

<!--[iflt IE9]>

<![endif]-->

ajax("RegCheckNewUserName.ashx?NewName="+ document.getElementById("NewName").value, function (result) { document.getElementById(ReminderInfo.innerHTML =result) });

}</script>

</head>

<body>

<divclass="row">

<divclass="col-md-1"></div>

<divclass="col-md-1">用户名：</div>

<divclass="col-md-2">

</div>

<divclass="col-md-4">

</div>

<divclass="col-md-3"></div>

</div>

<divclass="row">

<divclass="col-md-1"></div>

<divclass="col-md-1">密码：</div>

<divclass="col-md-2">

</div>

<divclass="col-md-8"></div>

</div>

<divclass="row">

<divclass="col-md-1"></div>

<divclass="col-md-1">

</div>

<divclass="col-md-10"></div>

</div>

</form>

<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>

</body>

</html>

View Code

B, 添加检查用户名称是否存在的一般处理程序

usingSystem;usingSystem.Collections.Generic;usingSystem.Linq;usingSystem.Web;namespaceAjaxDemo

{///<summary>///RegCheckNewUserName 的摘要说明///</summary>publicclassRegCheckNewUserName : IHttpHandler

{publicvoidProcessRequest(HttpContext context)

{

context.Response.ContentType="text/html";//检查传递过来的参数是否存在//新建数组存储部分用户名List<string> strExist =newList<string> {"橙子","柚子","西瓜","荔枝","苹果","葡萄","火龙果"};if(string.IsNullOrEmpty(context.Request["NewName"]))

{

context.Response.Write("用户名为空哦，请您填写用户名");

}else{stringstrUserName = context.Request["NewName"].ToString();if(strExist.Contains(strUserName))

{//已经存在context.Response.Write("用户名已存在，请重新选择用户名");

}else{

context.Response.Write("恭喜您，此用户名可以注册");

}

}publicboolIsReusable

{get{returnfalse;

}

View Code

6，以上我们借助AJAX进行简单的数据传输，但是我们还会有一些复杂的数据请求需要借助AJAX完成。

例如，输入员工工号以后，通过AJAX请求出来该工号对应的基本信息（姓名、性别、年龄、邮箱、电话号码、户籍、爱好等）

这样，我们请求页面传递工号参数，AJAX请求的一般处理程序页面读取相关数据以后返回，这些数据就需要一定的格式给请求页面以方便请求页面解析读取各个字段属性，这样的解析我们借助Json就会更加方便了。

7，Json，是一种轻量级的数据交换格式，方便机器进行解析和生成，同时让人们很容易的阅读和编写。Json是几乎被所有的语言支持的。

我们新建一般处理程序，输出一个数组对象，看看Json输出的格式是怎样的：

步骤：A, 新建Person类

usingSystem;usingSystem.Collections.Generic;usingSystem.Linq;usingSystem.Web;namespaceAjaxDemo

{publicclassPerson

{publicstringName {get;set; }publicstringAge {get;set; }publicstringGender {get;set; }publicstringEmail {get;set; }publicstringAddress {get;set; }

}

View Code

B, 添加JsonOutPut.ashx一般处理程序，程序中我们借助JavascriptSerializer把Person数组对象以Json格式输出

usingSystem;usingSystem.Collections.Generic;usingSystem.Linq;usingSystem.Web;usingSystem.Web.Script.Serialization;namespaceAjaxDemo

{///<summary>///JsonOutput 的摘要说明///</summary>publicclassJsonOutput : IHttpHandler

{publicvoidProcessRequest(HttpContext context)

{

context.Response.ContentType="text/html";//定义Person对象的数组List<Person> perList =newList<Person>();

perList.Add(newPerson() { Name ="橙子", Age ="18", Gender ="M", Email ="Orange@163.com", Address ="上海"});

perList.Add(newPerson() { Name ="苹果", Age ="17", Gender ="F", Email ="Apple@163.com", Address ="北京"});

perList.Add(newPerson() { Name ="椰子", Age ="20", Gender ="F", Email ="CocoNut@163.com", Address ="广州"});//以Json格式字符串把 perList进行输出//------1,初始化一个JavaScriptSerializer对象JavaScriptSerializer jss =newJavaScriptSerializer();//------2,获得一个对象的Json格式stringJsonList =jss.Serialize(perList);

context.Response.Write(JsonList);

}publicboolIsReusable

{get{returnfalse;

}

View Code

C, Json格式输出，这样的字符串格式就很清晰明了，方便读取

8，上面返回的Json字符串，在HTML页面中我们怎么去解析呢？也就是咋么去读取Name或者Age属性呢？

HTMl页面中就需要借助Json.Parse把Json字符串解析成对象

<!DOCTYPE html>

<head>

ajax("JsonOutput.ashx", function (result) {varpers =JSON.parse(result);for(vari =0; i < pers.length; i++) {varp =pers[i];

alert("姓名："+ p.Name +"年龄："+p.Age);

}

});

}</script>

</head>

<body>

</body>

</html>

View Code

ajax("JsonOutput.ashx", function (result) {varpers =JSON.parse(result);for(vari =0; i < pers.length; i++) {varp =pers[i];

alert("姓名："+ p.Name +"年龄："+p.Age);

}

});

}</script>

参考网站：Bootstrap http://www.bootcss.com/

完整Demo下载

初识--Ajax&amp;Json