本机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,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异步通信的更多相关文章
- struts2,实现Ajax异步通信
用例需要依赖的jar: struts2-core.jar struts2-convention-plugin.jar,非必须 org.codehaus.jackson.jar,提供json支持 用例代 ...
- AjAX 异步通信
<!DOCTYPE html> <html lang="en"> <head> <title>xmlhttprequest ajax ...
- 原生javaScript中使用Ajax实现异步通信
AJAX本质就是在HTTP协议的基础上以异步的方式与服务器进行通信,所谓异步,就是指某段程序执行时不会阻塞其它程序执行,其表现形式为程序的执行顺序不依赖程序本身的书写顺序,相反则为同步. 以下开始简单 ...
- 网站教学 提纲总结到ajax结束后面还有
Repeater - 重复器五个模板:HeaderTemplate - 在最上面,显示一次FooterTemplate - 最下面,显示一次ItemTemplate - 在中间,显示n次Alterna ...
- 什么是 ajax?----异步 javascript 和 xml
GET 用于请求服务器数据 POST 用于上传数据到服务器,或者修改服务器数据 ajax 异步通信,实现页面的局部刷新,按需获取数据,节约带宽,带来更好的用户体验 客户端与服务器在不必刷新浏览器的情况 ...
- jQuery.ajax 调用 服务(.aspx,.asmx)
方法1:Post(json)+IIS下://aspx,适用本机 $.ajax({ url: "TpgConnect_Rain/postgreService.aspx/getRainInfo& ...
- 6.Vue的Axios异步通信
1.什么是Axios Axios 是一个开源的可以用在浏览器端和 NodeJS 的异步通信框架,主要作用就是实现 AJAX 异步通信,其功能特点如下: 从浏览器中创建 XMLHttpRequests ...
- Ajax 简述与基础语法
目录 Ajax 1. 原生 JS 实现 Ajax 2. 使用 Ajax 实现异步通信 a. Ajax 的基础语法 b. 用 Ajax 传递数据 i. 传递字符串数据 ii. 传递 JSON 数据 3. ...
- loadrunner--基础2
LR11-03 一.并发测试(n VU) 1.并发测试两个条件 1)脚本中要有 集合点(并发点) 2)控制台中要设置并发策略(选择第一项,所有虚拟用户到达集合点后释放) 集合点: 5个线程,代表5个V ...
随机推荐
- (转)Windows Server 2008 R2 域控制器部署指南
转自:https://technet.microsoft.com/zh-cn/cloud/gg462955.aspx 一.域控制器安装步骤: 1.装 Windows Server 2008 R2并配置 ...
- 【BZOJ 4199】 [Noi2015]品酒大会
[链接]h在这里写链接 [题意] 给你一个长度为n的字符串s; 标志了每一杯酒; 以及n个数字,表示每一杯酒的美味度ai. 两杯酒(i,j)称为r相似 当且仅当 ...
- swift项目第一天:环境部署
一:项目部署 项目部署 一.开源中国(OSChina) 网站地址:https://git.oschina.net/ 开源中国社区成立于2008年8月,其目的是为中国的IT技术人员提供一个全面的.快捷更 ...
- swift开发网络篇 - 网络基础
GET & POST GET GET的语义是获取指定URL的资源 将数据按照variable=value的形式,添加到action所指向的URL后面,并且两者使用"?"连接 ...
- MacBook Touch Bar 使用技巧
MacBook Touch Bar 使用技巧 使用Clock Bar再Touch Bar上显示时间 在全屏显示的情况下无法看到时间,于是就想在Touch Bar上是否可以显示时间呢,系统好像没有相应的 ...
- 【u243】拓扑排序
Time Limit: 1 second Memory Limit: 128 MB [问题描述] 一些历史迷们打算把历史上的一些大事件按时间顺序列出来.但是,由于资料不全,每个事件发生的具体时间都没有 ...
- 与Eclipse关于"Call Hierarchy"和"Find Reference"功能比较
"Call Hierarchy"功能比较 Eclipse的"Call Hierarchy"可以查看一个Java方法或类成员变量的调用树(caller和calle ...
- 【u223】放牙刷
[题目链接]: [题解] 错排公式 f[n] = (n-1)*(f[n-1]+f[n-2]); 这样理解: 要从n-1和n-2递推到n; 假设第n个位置上的数要放在前n-1个位置中的k位置;则有n-1 ...
- [RxJS] Flatten a higher order observable with concatAll in RxJS
Besides switch and mergeAll, RxJS also provides concatAll as a flattening operator. In this lesson w ...
- 数据库筛选用户,然后去掉一部分(列表求差),再随机返回一个用户。sqlalchemy + python集合(set) + random
sqlalchemy和flask-sqlalchemy之间的东西不是太清晰. sqlalchemy文档太他妈多了.日. 今天遇到的实例. 用户进行随机匹配,系统随机返回一个一定筛选条件下的用户.为了用 ...