2、.net NVelocity中原生javascript ajax封装使用
在页面上,我们经常会遇到局部刷新的例子,这个时候,就需要用到ajax,
因为很多代码都是公用的,所以我们想到了,将代码封装,简化了使用,减少了冗余
javascript ajax代码如下:
var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); //创建XMLHTTP对象,考虑兼容性
xmlhttp.open("POST", "AJAXTest.ashx?" + "i=5&j=10", true); //“准备”向服务器的GetDate1.ashx发出Post请求(GET可能会有缓存问题)。这里还没有发出请求
xmlhttp.onreadystatechange = function ()
{
if (xmlhttp.readyState == 4) //readyState == 4 表示服务器返回完成数据了。之前可能会经历2(请求已发送,正在处理中)、3(响应中已有部分数据可用了,但是服务器还没有完成响应的生成)
{
if (xmlhttp.status == 200) //如果状态码为200则是成功
{
alert(xmlhttp.responseText);
}
else
{
alert("AJAX服务器返回错误!");
}
}
}
//不要以为if (xmlhttp.readyState == 4) {在send之前执行!!!!
xmlhttp.send(); //这时才开始发送请求
//发出请求后不等服务器返回数据,就继续向下执行,所以不会阻塞,界面就不卡了,这就是AJAX中“A”的含义“异步”。试着在ashx加一句Thread.Sleep(3000);
我们为了实现 无刷新页面实现 视频的顶踩操作,首先封装ajax,新建ajax.js,采用post提交
function ajax(url, onsuccess)
{
var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); //创建XMLHTTP对象,考虑兼容性。XHR
xmlhttp.open("POST", url, true); //“准备”向服务器的GetDate1.ashx发出Post请求(GET可能会有缓存问题)。这里还没有发出请求 //DRY:不要复制粘贴代码
//AJAX是异步的,并不是等到服务器端返回才继续执行
xmlhttp.onreadystatechange = function ()
{
if (xmlhttp.readyState == 4) //readyState == 4 表示服务器返回完成数据了。之前可能会经历2(请求已发送,正在处理中)、3(响应中已有部分数据可用了,但是服务器还没有完成响应的生成)
{
if (xmlhttp.status == 200) //如果Http状态码为200则是成功
{
onsuccess(xmlhttp.responseText);
}
else
{
alert("AJAX服务器返回错误!");
}
}
}
//不要以为if (xmlhttp.readyState == 4) {在send之前执行!!!!
xmlhttp.send(); //这时才开始发送请求。并不等于服务器端返回。请求发出去了,我不等!去监听onreadystatechange吧!
}
html页面:
<html>
<head>
<title></title>
//需要引入 刚刚封装的ajax函数
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript">function cai()
{
ajax("ZanCai.ashx?action=Cai", function (resText)
{
document.getElementById("CaiCount").innerHTML = resText;
});
}
</script>
</head>
<body>
<video src="diaosi.mp4" autoplay controls></video>
<p><input type="button" name="Zan" value="赞" onclick="zan()" /><label id="ZanCount"></label></p>
<p><input type="button" name="Cai" value="踩" onclick="cai()" /><label id="CaiCount"></label></p>
</body>
</html>
2、.net NVelocity中原生javascript ajax封装使用的更多相关文章
- 原生javascript Ajax
代码 1. IE5 ,IE6 使用ActiveXObject对象, 其余现代浏览器都支持XMLHttpRequest对象: function ajaxObject(){ var xmlhttp; ...
- 原生javascript AJAX 三级联动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 原生js ajax 封装
首先我们先了解ajax的get和post请求分别是怎样请求数据的 get请求 let ajx = new XMLHttpRequest() //创建ajax实例 /*打开需要请求的地址,可以有三个参数 ...
- 原生JavaScript运动功能系列(二):缓冲运动
匀速运动实现回顾 缓冲运动剖析 示例实现 方法提取 匀速运动实现回顾及缓冲运动剖析: 在这个系列的上一篇博客中原生JavaScript运动功能系列(一):运动功能剖析与匀速运动实现就运动的核心功能组成 ...
- 原生JavaScript 封装ajax
原生JavaScript 封装ajax function myajax(options){ //新建一个局部对象 用来存放用户输入的各种参数 var opt={ type:options.type ...
- 根据JavaScript中原生的XMLHttpRequest实现jQuery的Ajax
基本介绍 XmlHttpRequest XmlHttpRequest是JavaScript中原生的,历史悠久的一种发送网络请求的方案. 基本上所有前端框架对于网络请求的部分都是基于它来完成的. 在本章 ...
- 原生JavaScript封装Ajax
第一次开个人技术博客了,发的第一篇技术文章,欢迎指点…… 欢迎访问本人的独立博客:蓝克比尔 Ajax的实现主要分为四部分: 1.创建Ajax对象 // 创建ajax对象 var xhr = null; ...
- 原生 JavaScript 实现 AJAX、JSONP
相信大多数前端开发者在需要与后端进行数据交互时,为了方便快捷,都会选择JQuery中封装的AJAX方法,但是有些时候,我们只需要JQuery的AJAX请求方法,而其他的功能用到的很少,这显然是没必要的 ...
- Ajax工作原理和原生JS的ajax封装
前言: 之所以用ajax作为博客的开篇,是因为无论从ajax的出现还是从它的作用上来说,ajax对于前端无疑是意义重大的.甚至可以说,是ajax带来了前端这个行业.当然,历史并不能说明当下,曾经的辉煌 ...
随机推荐
- Java 加密 MD5
版权声明:本文为博主原创文章,未经博主允许不得转载. [md5] md5是一种哈希算法,哈希算法是啥? ... 特点是不能解密. [代码] package com.uikoo9.util.encryp ...
- 原创 C# 正则表达式 读写 Ini 文件
昨天遇到读ini文件的问题,我知道C#里没有提供相应的类,所有的.net配置都是xml方式存储的. 读取ini文件,很多人直接google一把,然后添加dll引用.介绍的比较详细的,如: C#如何读写 ...
- careercup-树与图 4.6
4.6 设计一个算法,找出二叉查找树中指定结点的“下一个”结点(也即中序后继).可以假定每个结点都含有指向父节点的连接. 思路: 有两种情况:1)如果该结点存在右子树,则中序后继即为右子树中最小的结点 ...
- C# - 系统类 - Math类
Math类 ns:System 此类除了提供了最基本的运算功能 还提供了三角.指数.超常的计算 它的所有方法都是静态的 Math类的字段 E 常量e 自然对数底 值为2.71828182845905 ...
- [转]JavaScript作用域安全构造函数
构造函数其实就是一个使用new操作符调用的函数.当使用new调用时,构造函数内用到的this对象会对指向新创建的对象实例,如下的例子所示: function Person(name, ag ...
- Nginx【第一篇】安装
一.简介 Nginx("engine x")是一款是由俄罗斯的程序设计师 Igor Sysoev 所开发高性能的 Web 和 反向代理 服务器,也是一个 IMAP/POP3/SMT ...
- android开发工具类之获得WIFI IP地址或者手机网络IP
有的时候我们需要获得WIFI的IP地址获得手机网络的IP地址,这是一个工具类,专门解决这个问题,这里需要两个权限: <uses-permission android:name="and ...
- apktool重打包签名后安装出现“Failure [INSTALL_FAILED_ALREADY_EXISTS]”
一般修改.签名环节不出错的话,可以考虑看是不是包名重复的问题,如果系统中存在相同包名的应用,安装时会报这个错误 就算apk名字变了,但和原来的包名仍是一样的,所以先卸载掉系统里同包名的应用,再尝试安装 ...
- SQL Server2008R无法登录的解决方案(系统文件损坏)1814 18456....不看别后悔,有用请点赞
废话 早上一开电脑,黑屏幕跑一些修复系统的代码....进入系统后,sql server连接不上 正文 原因:sql server的服务自动关闭了,并且启动失败 windows日志信息:传递给数据库 ' ...
- selenium2.0处理case实例(一)
通过自动化脚本, 判断下拉框选项值是否按照字母顺序(忽略大小写)显示 case场景如下: 1)打开www.test.com;2)判断下拉框选项是否按照字母顺序排列(忽略大小写)3)选择其中一个任意选项 ...