本机Ajax异步通信
昨天我们用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,Operaxmlhttp = new XMLHttpRequest();if (xmlhttp.overrideMineType) {xmlhttp.overrideMineType("text/xml");}} else if (window.ActiveXObject) {//IE6,IE5var 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" οnclick="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异步通信相关推荐
- struts2，实现Ajax异步通信
用例需要依赖的jar: struts2-core.jar struts2-convention-plugin.jar,非必须 org.codehaus.jackson.jar,提供json支持 用例代 ...
- Jquery实现AJAX异步通信
目录 Ajax的简介 Ajax的特点 Ajax向后端发送请求 发送请求后端数据回显 Ajax的简介 Ajax(Asynchronous JavaScript and XML),直译为"异步的 ...
- Microsoft Asp.Net Ajax框架入门(12) 了解异步通信层
VS 2008 本文通过两个简单的例子,了解Asp.Net Ajax Asynchronous Communication Layer Asp.Net Ajax异步通信层提供了一系列客户端的类,用于客 ...
- 原生javaScript中使用Ajax实现异步通信
AJAX本质就是在HTTP协议的基础上以异步的方式与服务器进行通信,所谓异步,就是指某段程序执行时不会阻塞其它程序执行,其表现形式为程序的执行顺序不依赖程序本身的书写顺序,相反则为同步. 以下开始简单 ...
- Axios实现异步通信
Axios异步通信(通信框架) <!--导入axios--> <script src="https://cdn.bootcdn.net/ajax/libs/axios/0. ...
- Ajax 技术资源中心
Ajax 技术资源中心 Ajax(Asynchronous JavaScript and XML)是一种编程技术,它允许结合 XML 和 JavaScript 用于 Web 应用程序,从而打破页面刷新 ...
- 前端进阶_狂神Vue笔记_语法指令v-bind、v-on、v-for_表单双绑_组件_Axios异步通信_Vue的生命周期_计算属性_插槽 ＜slot＞_webpack使用_vue-router路由
四.第一个Vue程序 4.1.什么是MVVM MVVM(Model-View-ViewModel)是一种软件设计模式,由微软WPF(用于替代WinForm,以前就是用这个技术开发桌面应用程序的)和Si ...
- 《ASP.NET AJAX程序设计——第II卷：客户端Microsoft AJAX Library相关》前言
章节列表:http://www.cnblogs.com/dflying/archive/2007/05/18/751741.html 在最近的一年以及今后的三五年内,我们有理由相信Web应用程序将受到 ...
- AJAX（看这一篇就够了，详细）
看这一篇就够了!-Ajax概念详解 AJAX简介: AJAX即Asynchronous JavaScript and XML(异步JavaScript和XML技术),是一种在无须重新加载整个网页的情况 ...
最新文章
- 奥特linux系统监控,奥特曼知识大挑战答案
- Python学习之==json处理
- 【Android 插件化】Hook 插件化框架总结 ( 插件包管理 | Hook Activity 启动流程 | Hook 插件包资源加载 ) ★★★
- Vue+Openlayer使用Draw实现交互式绘制线段
- go 项目 cmd目录_Golang 项目布局浅析
- Distributed transactions with multiple databases, Spring Boot, Spring Data JPA and Atomikos
- SQL Server 2005/2008 导入导出数据常见报错
- MongoDB 教程 | 菜鸟教程
- ubuntu 刚更改默认python3版本后更新包等
- 2020.12.23 随笔纪念粉笔数【2020】
- tt按键精灵从入门到精通完整版
- 信息系统项目管理师考试论文写作复习笔记(4)-范围管理论文2
- python手机价格预测论文_基于Python的微博发表意向预测研究
- 淡墨写韵，不守起承转合
- Java+coolq实现QQ机器人
- 第31讲：永久存储：腌制一缸美味的泡菜
- 关于ElasticSearch （ES）
- Java并发工具类（三）Exchanger
- 网络能看到计算机 但是进不去,共享文件夹 在网络邻居看到别人的电脑 进不去...
- hp服务器性能测试,较新架构服务器用CPU性能对比测试