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对象，考虑兼容性。XHRxmlhttp.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="赞" οnclick="zan()" /><label id="ZanCount"></label></p><p><input type="button" name="Cai" value="踩" οnclick="cai()" /><label id="CaiCount"></label></p>
</body>
</html>

转载于:https://www.cnblogs.com/lastcode/p/4856689.html

2、.net NVelocity中原生javascript ajax封装使用相关推荐

原生 javascript ajax 实例演示
(对低版本的 ie 不作兼容处理了,太过时,不知道谁还用) 本次演示采用原生javascript + php 实现ajax的 post 和 get 功能; 对php不了解的同学不用担心,就两三行 ...
Javascript ajax封装并重载
看来我要把博客给弄起来,发现整天敲代码,有时候跟人沟通都成问题了,要多写点东西,整理整理忙乱的思绪.最近有幸接触WEB前端页面,看到项目里大伙写的JS代码头疼不已,而本人很懒又有严重的代码洁癖,一点点 ...
一次较为完整的原生JavaScript AJAX与Java的前后端数据交互
效果 Maven 依赖 <dependency><groupId>javax.servlet</groupId><artifactId>javax.se ...
原生javascript自己封装的常用小方法。
var zycTools = {//使用css选择器选择单个元素$:function(elem){return document.querySelector(elem);},//使用css选择器选择一 ...
Ajax工作原理和原生JS的ajax封装
前言: 之所以用ajax作为博客的开篇,是因为无论从ajax的出现还是从它的作用上来说,ajax对于前端无疑是意义重大的.甚至可以说,是ajax带来了前端这个行业.当然,历史并不能说明当下,曾经的辉煌 ...
JavaWeb 第6章 Ajax 与 JQuery 任务1：使用原生 JavaScript 发送 Ajax请求
JavaWeb 应用设计及实战目录上一章下一章上一个任务/上一节下一个任务/下一节实例链接点我目录任务1 使用原生 JavaScript 发送 Ajax 请求 6. ...
Chrome DevTools：在 Profile 性能分析中显示原生 javascript 函数
本文翻译自 Chrome DevTools: Show native functions in JS Profile,中文版首发在我的知乎专栏 V8 源码及周边. 在 Chrome DevTools ...
java原生封装_[Java教程]原生AJAX封装
[Java教程]原生AJAX封装 0 2016-07-12 13:00:08 回归下原生js,网上看到的AJAX封装,遂拿来改改,不知还有何弊端,望指出!1 var ajaxHelper = { 2 ...
封装原声ajax,原生AJAX封装的简单实现
回归下原生js,网上看到的AJAX封装,遂拿来改改,不知还有何弊端,望指出! var ajaxHelper = { /*1.0 浏览器兼容的方式创建异步对象*/ makeXHR: function ( ...

2、.net NVelocity中原生javascript ajax封装使用

2、.net NVelocity中原生javascript ajax封装使用相关推荐

最新文章

热门文章