昨天我们用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异步通信，我希望我的解释可以帮助你进步。

版权声明：本文博主原创文章。博客，未经同意不得转载。

本机Ajax异步通信的更多相关文章

  1. struts2，实现Ajax异步通信

    用例需要依赖的jar: struts2-core.jar struts2-convention-plugin.jar,非必须 org.codehaus.jackson.jar,提供json支持 用例代 ...

  2. AjAX 异步通信

    <!DOCTYPE html> <html lang="en"> <head> <title>xmlhttprequest ajax ...

  3. 原生javaScript中使用Ajax实现异步通信

    AJAX本质就是在HTTP协议的基础上以异步的方式与服务器进行通信,所谓异步,就是指某段程序执行时不会阻塞其它程序执行,其表现形式为程序的执行顺序不依赖程序本身的书写顺序,相反则为同步. 以下开始简单 ...

  4. 网站教学 提纲总结到ajax结束后面还有

    Repeater - 重复器五个模板:HeaderTemplate - 在最上面,显示一次FooterTemplate - 最下面,显示一次ItemTemplate - 在中间,显示n次Alterna ...

  5. 什么是 ajax？----异步 javascript 和 xml

    GET 用于请求服务器数据 POST 用于上传数据到服务器,或者修改服务器数据 ajax 异步通信,实现页面的局部刷新,按需获取数据,节约带宽,带来更好的用户体验 客户端与服务器在不必刷新浏览器的情况 ...

  6. jQuery.ajax 调用 服务（.aspx，.asmx）

    方法1:Post(json)+IIS下://aspx,适用本机 $.ajax({ url: "TpgConnect_Rain/postgreService.aspx/getRainInfo& ...

  7. 6.Vue的Axios异步通信

    1.什么是Axios Axios 是一个开源的可以用在浏览器端和 NodeJS 的异步通信框架,主要作用就是实现 AJAX 异步通信,其功能特点如下: 从浏览器中创建 XMLHttpRequests ...

  8. Ajax 简述与基础语法

    目录 Ajax 1. 原生 JS 实现 Ajax 2. 使用 Ajax 实现异步通信 a. Ajax 的基础语法 b. 用 Ajax 传递数据 i. 传递字符串数据 ii. 传递 JSON 数据 3. ...

  9. loadrunner--基础2

    LR11-03 一.并发测试(n VU) 1.并发测试两个条件 1)脚本中要有 集合点(并发点) 2)控制台中要设置并发策略(选择第一项,所有虚拟用户到达集合点后释放) 集合点: 5个线程,代表5个V ...

随机推荐

  1. 中间件、服务器和Web服务器三者的区别

    相信很多的Web安全初学者和我一样,对中间件和服务器的认识不够深刻,对两者的概念可能会有所混淆. 正好今天在学习的时候突然想到了这个问题,粗略百度了一下,似乎网上对这个问题的解释不多,那么就由我来为大 ...

  2. 【例题 6-10 UVA - 699】The Falling Leaves

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 递归模拟就好. [代码] #include <bits/stdc++.h> using namespace std; c ...

  3. 如何在hadoop中控制map的个数 分类： A1_HADOOP 2015-03-13 20:53 86人阅读 评论(0) 收藏

    hadooop提供了一个设置map个数的参数mapred.map.tasks,我们可以通过这个参数来控制map的个数.但是通过这种方式设置map的个数,并不是每次都有效的.原因是mapred.map. ...

  4. win32中SetCapture 和 ReleaseCapture的使用（查一下在VCL中的使用）

    最近在用win32写<visual C++经典游戏程序设计>中的扫雷游戏,在写到鼠标点击雷区的时候用到了SetCapture,和ReleaseCapture这对系统函数. 那么为什么需要用 ...

  5. 数据类型总结——Boolean类型（布尔类型）

    相关文章 简书原文:https://www.jianshu.com/p/e5c75d4be636 数据类型总结——概述:https://www.cnblogs.com/shcrk/p/9266015. ...

  6. 【30.36%】【codeforces 740D】Alyona and a tree

    time limit per test2 seconds memory limit per test256 megabytes inputstandard input outputstandard o ...

  7. 【转载】 Searching过程粗略梳理 分类： H4_SOLR/LUCENCE 2014-07-25 22:59 316人阅读 评论(0) 收藏

    转载自:http://www.cnblogs.com/huangfox/archive/2012/02/09/2344686.html solr-searching过程分析(一) --searchin ...

  8. C#验证手机号

    using System.Text.RegularExpressions; private bool IsMobile(string phoneNo) { return Regex.IsMatch(p ...

  9. 【机器学习实战】第7章 集成方法（随机森林和 AdaBoost）

    第7章 集成方法 ensemble method 集成方法: ensemble method(元算法: meta algorithm) 概述 概念:是对其他算法进行组合的一种形式. 通俗来说: 当做重 ...

  10. Django之富文本编辑器kindeditor 及上传

    1.什么是富文本编辑器 百度百科(https://baike.baidu.com/item/%E5%AF%8C%E6%96%87%E6%9C%AC%E7%BC%96%E8%BE%91%E5%99%A8 ...