在页面上，我们经常会遇到局部刷新的例子，这个时候，就需要用到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封装使用的更多相关文章

  1. 原生javascript Ajax

    代码 1. IE5 ,IE6 使用ActiveXObject对象,   其余现代浏览器都支持XMLHttpRequest对象: function ajaxObject(){ var xmlhttp; ...

  2. 原生javascript AJAX 三级联动

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 原生js ajax 封装

    首先我们先了解ajax的get和post请求分别是怎样请求数据的 get请求 let ajx = new XMLHttpRequest() //创建ajax实例 /*打开需要请求的地址,可以有三个参数 ...

  4. 原生JavaScript运动功能系列（二）：缓冲运动

    匀速运动实现回顾 缓冲运动剖析 示例实现 方法提取 匀速运动实现回顾及缓冲运动剖析: 在这个系列的上一篇博客中原生JavaScript运动功能系列(一):运动功能剖析与匀速运动实现就运动的核心功能组成 ...

  5. 原生JavaScript 封装ajax

    原生JavaScript 封装ajax   function myajax(options){ //新建一个局部对象 用来存放用户输入的各种参数 var opt={ type:options.type ...

  6. 根据JavaScript中原生的XMLHttpRequest实现jQuery的Ajax

    基本介绍 XmlHttpRequest XmlHttpRequest是JavaScript中原生的,历史悠久的一种发送网络请求的方案. 基本上所有前端框架对于网络请求的部分都是基于它来完成的. 在本章 ...

  7. 原生JavaScript封装Ajax

    第一次开个人技术博客了,发的第一篇技术文章,欢迎指点…… 欢迎访问本人的独立博客:蓝克比尔 Ajax的实现主要分为四部分: 1.创建Ajax对象 // 创建ajax对象 var xhr = null; ...

  8. 原生 JavaScript 实现 AJAX、JSONP

    相信大多数前端开发者在需要与后端进行数据交互时,为了方便快捷,都会选择JQuery中封装的AJAX方法,但是有些时候,我们只需要JQuery的AJAX请求方法,而其他的功能用到的很少,这显然是没必要的 ...

  9. Ajax工作原理和原生JS的ajax封装

    前言: 之所以用ajax作为博客的开篇,是因为无论从ajax的出现还是从它的作用上来说,ajax对于前端无疑是意义重大的.甚至可以说,是ajax带来了前端这个行业.当然,历史并不能说明当下,曾经的辉煌 ...

随机推荐

  1. 批处理：循环解压不同文件夹下的zip压缩包

    结构如下 A文件夹: A1文件.zip A2文件.zip A3文件.zip B文件夹: B1文件.zip B2文件.zip B3文件.zip ...... 批处理文件:rezip.bat如下 @ech ...

  2. android87 Service

    ---------------------------------------------------------------------------- #Service(服务和Activity是运行 ...

  3. UISenior之数据的本地化持久化

    数据的本地化主要分为两个方面:1.简单数据的本地持久化(NSString.NSArray.NSDictionary.NSData)2.复杂数据的本地持久化(本文以Person类为例) 简单对象的本地化 ...

  4. 使用CocoaPods遇到的几个坑,记录一下

    最近使用pod的时候升级到1.0.0版本后遇到一些坑,整理一下 首先是CocoaPods报错:The dependency `` is not used in any concrete target ...

  5. LUN 和 LVM 知识

    LUN是对存储设备而言的,volume是对主机而言的. lun是指硬件层分出的逻辑盘,如raid卡可以将做好的400G的raid5再分成若干个逻辑盘,以便于使用,每一个逻辑盘对应一个lun号,OS层仍 ...

  6. Oracle JDBC通过占位符可以查询可变长字段，不可查询固定长度字段

    这个问题在半年前,花了我两天的时间才解决,现在刚好想起来,顺便记录一下以防忘了. 通过jdbc,预编译的sql,无法查询到固定长度的字段. 用例子说话: 创建一个表,只有一个字段,长度为固定的char ...

  7. Unity3D 之3D动画机设置

    新建一个动画机 然后创建一些动画的属性 每根线都是一个动画到下一个动画的转变,动画的转变是基于条件的. 1.通过建立Parameters设定动画的转换条件 2.右边的Conditions设定可以设定是 ...

  8. poj1182 食物链（种类并查集）详解

    poj 1182   http://poj.org/problem?id=1182 分析:这个题大意说的非常清楚了,就是求出假话的个数,题目中给的假话要求有三个 ① 当前的话与前面的某些真的话冲突,是 ...

  9. Android 在子线程中更新UI

    今天在做练习时,在一个新开启的线程中调用“Toast.makeText(MainActivity.this, "登陆成功",Toast.LENGTH_SHORT).show();” ...

  10. 关于ligerUI中ligerTree代码中的一个bug，造成该控件无法通过url的POST方式加载数据

    该bug造成ligerTree参数中的method无论你怎么设置都只能用get方式提交 由于本人水平有限,只是找到原因,但无法修正 ligerUI v1.1.9 版本中的ligerui.all.js文 ...