原生Ajax实现异步通信_H5之家 - 中国HTML5教程资源分享第一站

昨天我们用JQuery.Ajax讲解了JQuery如何通过Ajax实现异步通信，为了更好的编织知识网，今天我们用一个Demo演示如何用javascript实现原生Ajax的异步通信。

原生Ajax实现异步通信分为以下5步：

1.创建XMLHttpRequest对象；

2.注册回调方法；

3.设置和服务器端交互的参数

4.设置向服务器端发送的数据，启动和服务器端的交互；

5.写回调方法

有了这5步的思想指导，下面我们开始设计实现过程。

首先我们新建一个html页面，用于和用户交互，代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> <html xmlns=""> <head> <title></title> <script type="text/javascript"> function submit() { //1.创建XMLHttpRequest对象 var xmlhttp; if (window.XMLHttpRequest) { //IE7,IE8,FireFox,Mozillar,Safari,Opera xmlhttp = new XMLHttpRequest(); if (xmlhttp.overrideMineType) { xmlhttp.overrideMineType("text/xml"); } } else if (window.ActiveXObject) { //IE6,IE5 var activexName = ['MSXML2.XMLHTTP.6.0', 'MSXML2.XMLHTTP.5.0', 'MSXML2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP', 'Micro soft.XMLHTTP']; for (var i = 0; i < activexName.length; i++) { try { xmlhttp = new ActiveXObject(activexName[i]); break; } catch (e) { } } } if (xmlhttp == undefined || xmlhttp == null) { alert("当前浏览器不支持创建XMLHttpRequest对象，请更换浏览器"); return; } //2.注册回调方法 xmlhttp.onreadystatechange = callback; //获得文本框输入的内容 var userName = document.getElementById("UserName").value; //3.设置和服务器端交互的参数 xmlhttp.open("GET", "Ajax.aspx?name=" + userName, true); //Get方式 //xmlhttp.open('POST', 'Ajax.aspx', true); //Post方式 //4.设置向服务器端发送的数据，启动和服务器端的交互 xmlhttp.send(null); //Get提交 //xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); //Post提交 //xmlhttp.send('name='+userName); //5.写回调方法 function callback() { //判断和服务器的交互是否完成，服务器是否正确返回了数据 //表示和服务器端的交互已经完成 if (xmlhttp.readyState == 4) { //表示正确的返回了数据 if (xmlhttp.status == 200) { //纯文版数据的接收方法 var message = xmlhttp.responseText; //把返回的数据动态添加到div中 var div = document.getElementById("message"); div.innerHTML = message; } } } } </script> </head> <body> <input type="text" id="UserName"> <input type="button" onclick="submit()" value="校验用户名" /> <br /> <div id="message"> </body> </html> 在实现的第三、四步，设置和服务器的提交方式分为Get方式和Post方式。Get方式向服务器提交时，参数会显示在链接网址中，存储量小，安全性低。Post方式将信息打包后进行提交，存储量大，安全性高。所以，一般我们采用Post方式进行提交。

接着，Ajax.aspx作为服务器，处理html提交的请求，代码如下：

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; namespace Demo { public partial class Ajax : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { string userName = Request["name"].ToString().Trim(); if (userName == null || userName.Length == 0) { Response.Write("用户名不能为空"); } else { if (userName.Equals("quwenzhe")) { Response.Write("用户名[" + userName + "]已经存在"); } else { Response.Write("可以使用用户名[" + userName + "]注册"); } } } } } Demo演示效果图如下：

通过上图我们可以发现，整个交互过程更新的只是Web页面事先标记的div，其他内容并没有刷新。在传统的Web请求中，提交的是表单，返回的结果显示在跳转页面。而使用Ajax的Web页面，提交的是数据，返回结果显示在当前页面，实现页面局部刷新。所以，Ajax的出现，减少了交互所需的网络流量，增加了用户的体验度。

这个Demo是用javascript实现的原生Ajax交互，可以帮助我们进一步理解Ajax的异步通信，希望我的讲解能帮助大家进步。