昨天我们用JQuery.Ajax解释JQuery样通过Ajax实现异步通信。为了更好的编织知识网，今天我们用一个Demo演示怎样用javascript实现原生Ajax的异步通信。
原生Ajax实现异步通信分为下面5步：
1.创建XMLHttpRequest对象。
2.注冊回调方法。
3.设置和server端交互的參数
4.设置向server端发送的数据，启动和server端的交互；
5.写回调方法
有了这5步的思想指导。以下我们開始设计实现过程。
首先我们新建一个html页面，用于和用户交互，代码例如以下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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.设置和server端交互的參数
xmlhttp.open("GET", "Ajax.aspx?name=" + userName, true); //Get方式
//xmlhttp.open('POST', 'Ajax.aspx', true); //Post方式
//4.设置向server端发送的数据，启动和server端的交互
xmlhttp.send(null); //Get提交
//xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); //Post提交
//xmlhttp.send('name='+userName);
//5.写回调方法
function callback() {
//推断和server的交互是否完毕。server是否正确返回了数据
//表示和server端的交互已经完毕
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="校验username" />
<br />
<div id="message">
</body>
</html>
在实现的第三、四步，设置和server的提交方式分为Get方式和Post方式。Get方式向server提交时，參数会显示在链接网址中，存储量小。安全性低。Post方式将信息打包后进行提交。存储量大，安全性高。所以，一般我们採用Post方式进行提交。
接着，Ajax.aspx作为server，处理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("username不能为空");
}
else
{
if (userName.Equals("quwenzhe"))
{
Response.Write("username[" + userName + "]已经存在");
}
else
{
Response.Write("能够使用username[" + userName + "]注冊");
}
}
}
}
} Demo演示效果图例如以下：
通过上图我们能够发现，整个交互过程更新的仅仅是Web页面事先标记的div，其它内容并没有刷新。在传统的Web请求中，提交的是表单，返回的结果显示在跳转页面。
而使用Ajax的Web页面，提交的是数据。返回结果显示在当前页面，实现页面局部刷新。所以，Ajax的出现，降低了交互所需的网络流量，添加了用户的体验度。
这个Demo是用javascript实现的原生Ajax交互，能帮助我们进一步了解不够Ajax异步通信，我希望我的解释可以帮助你进步。
版权声明：本文博主原创文章。博客，未经同意不得转载。