首页 > 代码库 > 原生Ajax实现异步通信

原生Ajax实现异步通信

      昨天我们用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" "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.设置和服务器端交互的参数
            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=http://www.mamicode.com/"校验用户名" />>    在实现的第三、四步,设置和服务器的提交方式分为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的异步通信,希望我的讲解能帮助大家进步。