GVKun编程网logo

浅谈ajax（二）（ajax2）

10

最近很多小伙伴都在问浅谈ajax和二这两个问题，那么本篇文章就来给大家详细解答一下，同时本文还将给你拓展Ajax入门（二）Ajax函数封装、Ajax学习（二）——一个简单的Ajax实例、AJAX总结（

最近很多小伙伴都在问浅谈ajax和二这两个问题，那么本篇文章就来给大家详细解答一下，同时本文还将给你拓展Ajax入门（二）Ajax函数封装、Ajax学习（二）—— 一个简单的Ajax实例、AJAX总结（二），手写AJAX、Ajax调用后台方法的几种写法（二） Ajax.dll等相关知识，下面开始了哦！

本文目录一览：

浅谈ajax（二）（ajax2）

浅谈ajax（二）（ajax2）

我们在使用open()的时候会有一个URL的参数，url参数其实就是指服务器上的文件地址，这个地址可以是任何类型的文件：txt、xml或者其他页面文件。

第三个参数是异步（true orfalse）：不推荐使用false

服务器响应

如果需要获得服务器的响应，我们可以使用XMLHttpRequest对象的reponseText 或者reponsexml属性。

当来自服务器的响应不是XML的时候，需要使用requestText属性，该属性可以返回字符串形式的响应：

document。getElementById("myDiv").innerHTML=xmlhttp.reponseText;

如果来自服务器的响应时XML，那么需要作为XML对象进行解析，需要使用reponseXML属性。

例如请求hello.xml，并解析。

xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
  {
  txt=txt + x[i].childNodes[0].nodeValue + "<br />";
  }
document.getElementById("myDiv").innerHTML=txt;

onreadystatechange事件

当请求被发送到服务器，我们需要执行一些基于响应的任务，每当readyState改变时，就会触发onreadystatechange事件。

readystate属性存有XMLHttpRequest的状态信息。

onreadystatechange：存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。

readyState

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

  • 0: 请求未初始化
  • 1: 服务器连接已建立
  • 2: 请求已接收
  • 3: 请求处理中
  • 4: 请求已完成，且响应已就绪
status

200: "OK"

404: 未找到页面

当readystate等于4而且状态为200的时候，表示响应已经就绪。 


xmlhttp.onreadystatechange=function(){
   if(xmlhttp.readystate==4&&xmlhttp.status==200){
    document。gtElementById("myDiv").innerHTML=xmlhttp.reponseText;
  }
}

Callback()

该函数是一种以参数形式传递给另一函数的函数。

如果一个网站上面存在有多个ajax的任务，那么当创建对象编写一个编著的函数，并给每个ajax任务调用该函数。

该函数调用应该包含url以及发生onreadystatechange时间时执行的任务（每次调用不尽相同）

function myFunction()
{
loadXMLDoc("ajax_info.txt",function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  });
}

Ajax入门（二）Ajax函数封装

Ajax入门（二）Ajax函数封装

转自我的个人博客原址
如果看了的我上一篇博客《Ajax入门（一）从0开始到一次成功的GET请求》的话，肯定知道我们已经完成了一个简单的get请求函数了。如下：

/**
 * 一个简单的get请求
 * @param {String}   url     请求地址,文件名
 * @param {Function} fnSucc  请求成功时执行的函数
 * @param {Function} fnFaild 请求失败执行的函数
 */
function AJAX(url, fnSucc, fnFaild) {
    //1.创建ajax对象
    var oAjax = null;
        /**
         * 此处必须需要使用window.的方式,表示为window对象的一个属性.不存在时值为undefined.
         * 进入else若直接使用XMLHttpRequest在不支持的情况下会报错
         **/
    if (window.XMLHttpRequest) {
        //IE6以上
        oAjax = new XMLHttpRequest();
    } else {
        oAjax = new ActiveXObject("Microsoft.XMLHTTP");
    }
    //2.连接服务器
    //open(方法,url,是否异步)
    oAjax.open("GET", url, true);

    //3.发送请求
    oAjax.send();

    //4.接收返回
    //OnRedayStateChange事件
    oAjax.onreadystatechange = function () {
        if (oAjax.readyState === 4) {
            if (oAjax.status === 200) {
                //                alert("成功" + oAjax.responseText);
                fnSucc(oAjax.responseText);
            } else {
                //                alert("服务器响应失败!");
                if (fnFaild) {
                    fnFaild();
                }
            }
        }
    };
}

为什么要继续进行Ajax函数封装？
原因如下：

  1. 目前方法只能使用get请求，而不能使用post请求，而在用户注册时必须使用POST，因为POST，现在不够完整。

  2. 目前请求参数只能直接写在url里，不利于动态获取数据，应该使用参数解析的方式，便于使用。

  3. get请求方式请求缓存问题。

  4. 学习封装方法，

改造目标

function ajax(url, options) {
    // your implement
}

options是一个对象，里面可以包括的参数为：

  • type: post或者get，可以有一个默认值

  • data: 发送的数据，为一个键值对象或者为一个用&连接的赋值字符串

  • onsuccess: 成功时的调用函数

  • onfail: 失败时的调用函数

改造开始（三步）

（一）原函数的改造

形参中，删除fnSucc、fnFaild 添加options。使成功与失败执行的函数变成options对象的 onsuccess、onfail两个方法对应的值。
主要是在4、接收返回部分进行更改，如下

//4.接收返回
oAjax.onreadystatechange = function () {
    if (oAjax.readyState === 4) {
        if (oAjax.status === 200) {
            //请求成功。形参为获取到的字符串形式的响应数据
            options.onsuccess(oAjax.responseText);
        } else {
            //先判断是否存在请求失败函数
            //存在时，形参为XMLHttpRequest对象，便于进行错误进行处理
            if (options.onfail) {
                options.onfail(oAjax);
            }
        }
    }
};

（二）请求参数的处理

首先我们要知道的是在使用请求参数存在时，GET方式的请求参数特别简单。直接在url后面添加?参数名=参数值&参数名二=参数值二

实现思路：

  1. 首先判断options.data是否存在，不存在时使用"?timestamp= + new Date().getTime();链接在url后，以清除缓存。

    • 这里只是我使用的方法，这里的timestamp可以随意更改

    • new Date().getTime();也可以用Math.random();主要是保持每次请求的url都不一样。

    • 还有许多别的方法参考Ajax缓存问题怎么解决？。有兴趣的自己再多google一下吧。

  2. 存在options.data时，应该限制请求data格式便于处理，设定为JSON（当然没必要像JSON那么严格，但是应该保持键值对的格式）。

  3. 使用for in 遍历data，使用=来连接键与值，使用&来连接多个请求参数

  4. 只需要对原函数中的2.连接服务器进行更改

实现如下：

原：

//2.连接服务器
//open(方法,url,是否异步)
oAjax.open("GET", url, true);

现：

//open(方法,url,是否异步)
var param = "";//请求参数。
//判断data存在时缓存它，不存在时，设为0
var data = options.data ? options.data : 0;
if(typeof(data)==="object"){//只有data为对象使才执行
    for (var key in data){//请求参数拼接
        if (data.hasOwnProperty(key)) {
            param += key+"="+data[key]+"&";
        }
    }
    param.replace(/&$/,"");//去除结尾的&。
}else{
    param= "timestamp=" + new Date().getTime();
}
//2.连接服务器
oAjax.open("GET", url+"?"+param, true);

（三）请求类型选择

使用post发送数据，模拟form提交。在url看不到请求参数，更加安全。

实现思路：

  1. 判断是否type是否存在，存在时转为大写，默认为GET请求。

  2. 判断请求的类型，GET 或 POST 。

  3. 在使用post请求提交数据时，请求参数不跟在url后面。

  4. 使用post请求数据必须添加在open()与send()直接添加头信息。

    • xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

  5. 使用post请求数据，对2.连接服务器、3.发送请求部分进行处理

实现如下：

原：

//2.连接服务器
oAjax.open("GET", url+"?"+param, true);

现：

//3.发送请求
var type = options.type ? options.type.toUpperCase() : "GET" ;
if(type ==="GET"){
    oAjax.open("GET", url+"?"+param, true);
    oAjax.send();
}else{
    oAjax.open("POST", url, true);
    oAjax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    oAjax.send(param);
}

最终完成

结合之前写的，集合起来。

/**
 * AJAX函数封装
 * @param {string} url     请求地址（必须）
 * @param {object} options 发送请求的选项参数
 *   @config {string} [options.type] 请求发送的类型。默认为GET。
 *   @config {Object} [options.data] 需要发送的数据。
 *   @config {Function} [options.onsuccess] 请求成功时触发，function(oAjax.responseText, oAjax)。（必须）
 *   @config {Function} [options.onfail] 请求失败时触发，function(oAjax)。(oAJax为XMLHttpRequest对象)
 *
 *@returns {XMLHttpRequest} 发送请求的XMLHttpRequest对象
 */
function AJAX(url, options) {
    //1.创建ajax对象
    var oAjax = null;
        /**
         * 此处必须需要使用window.的方式,表示为window对象的一个属性.不存在时值为undefined,进入else
         * 若直接使用XMLHttpRequest,在不支持的情况下会报错
         **/
    if (window.XMLHttpRequest) {
        //IE6以上
        oAjax = new XMLHttpRequest();
    } else {
        oAjax = new ActiveXObject("Microsoft.XMLHTTP");
    }
    
    //2.连接服务器
    //open(方法,url,是否异步)
    var param = ""; //请求参数。
    //只有data存在，且为对象使才执行
    var data = options.data ? options.data : -1; //缓存data
    if (typeof (data) === "object") {
        for (var key in data) { //请求参数拼接
            if (data.hasOwnProperty(key)) {
                param += key + "=" + data[key] + "&";
            }
        }
        param.replace(/&$/, "");
    } else {
        param = "timestamp=" + new Date().getTime();
    }

    //3.发送请求
    var type = options.type ? options.type.toUpperCase() : "GET";
    if (type === "GET") {
        oAjax.open("GET", url + "?" + param, true);
        oAjax.send();
    } else {
        oAjax.open("POST", url, true);
        oAjax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        oAjax.send(param);
    }

    //4.接收返回
    //OnRedayStateChange事件
    oAjax.onreadystatechange = function () {
        if (oAjax.readyState === 4) {
            if (oAjax.status === 200) {
                //请求成功。形参为获取到的字符串形式的响应数据
                options.onsuccess(oAjax.responseText, oAjax);
            } else {
                //先判断是否存在请求失败函数
                //存在时，形参为XMLHttpRequest对象，便于进行错误进行处理
                if (options.onfail) {
                    options.onfail(oAjax);
                }
            }
        }
    };
    return oAjax;//发送请求的XMLHttpRequest对象
}

最终完成就是这样了。当然还远远算不上完美，比如try catch的使用 ，但是通过这样的封装，还是学到很多知识。

Ajax学习（二）—— 一个简单的Ajax实例

Ajax学习（二）—— 一个简单的Ajax实例

通过上篇博客认识Ajax之后，我们通过一个简单的实例来消化消化理论知识，一睹Ajax的庐山真面目。

1.实例功能：


当用户输入用户名，文本框失去焦点后，通过异步调用来判断该用户名是否已经存在。若存在，则在上图中红框处显示提示。当用户名可用时，提交按钮变为可用状态。


2.设计Html页面：

<spanhttps://www.jb51.cc/tag/ims/" target="_blank">imsun;font-size:18px;"><strong><spanhttps://www.jb51.cc/tag/ims/" target="_blank">imsun;font-size:18px;"><strong><body>
    <form name="myForm">
        用户名：<input type="text" name=" myName" onblur="checkName()" />
        <span id="myDiv"></span><br />
        密　码：<input type="text" name="myPwd"/><br />
        <input type="button" value=" 提交" name="submitButton" disabled />
    </form>
</body></strong></span></strong></span>
在“用户名”文本框后添加了一个span标签，该标签划分一个区域，用于显示用户名的验证信息。 还要添加一个事件，当失去焦点时触发“checkName（）”。


3.javascript代码部分：

//定义用户存储XMLHttpRequest对象的变量
        var xmlHttp = null;
        //创建XMLHttpRequest对象
        function creatXMLHTTP()
        {
            //判断浏览器是否支持ActiveX控件，针对IE6及之前版本
            if (window.ActiveXObject)
            {
                //将所有可能出现的ActiveXObject版本都放在一个数组中
                var arrXmlHttpTypes = ['Microsoft.XMLHTTP','MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.5.0','MSXML2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0','MSXML2.XMLHTTP'];
                //通过循环创建XMLHttpRequest对象
                for (var i=0;i<arrXmlHttpTypes.length;i++)
                {
                    try
                    {
                        //创建XMLHttpRequest对象
                        xmlHttp = new ActiveXObject(arrXmlHttpTypes[i]);
                        //如果创建XMLHttpRequest对象成功，则跳出循环
                        break;
                    }
                    catch(ex)
                    {
                    }
                }
            }
            //判断浏览器是否将XMLHttpRequest作为本地对象实现，针对IE7，Firefox，Opera等浏览器
            else if(window.XMLHttpRequest)
            {
                xmlHttp = new XMLHttpRequest();
            }
        }
        //响应XMLHttpRequest对象状态变化的函数
        function httpStateChange()
        {
            if (xmlHttp.readyState==4)//异步调用完毕
            {
                if (xmlHttp.status==200 || xmlHttp.status==0)//异步调用成功，在本机上调试
                {
                    //获得服务器返回的数据
                    var userNames = xmlHttp.responseText;
                    var arrUserName = userNames.split(";");//把获取到的一个字符串分割成字符串数组。

                    //定义一个变量，用于判断用户名是否已经存在
                    var bFlag = false;

                    for(i=0;i<arrUserName.length;i++)
                    {
                        if (arrUserName[i]==myForm.myName.value)
                        {
                            bFlag = true;//用户名存在
                            break;
                        }
                    }

                    //查找用于显示提示信息的节点
                    var node = document.getElementById("myDiv");
                    //更新数据
                    if (bFlag)
                    {
                        node.firstChild.nodeValue = "用户名已存在";
                        myForm.submitButton.disabled = true;//提交按钮不可用
                    }
                    else 
                    {
                        node.firstChild.nodeValue = "用户名不存在，可以使用";
                        myForm.submitButton.disabled = false;//提交按钮可用
                    }
                }
            }
        }
        //校验用户名是否有效
        function checkName()
        {
            //创建XMLHttpRequest对象，调用前面定义好的函数
            creatXMLHTTP();

            if (xmlHttp!=null)
            {
                //创建响应XMLHttpRequest对象状态变化的函数
                xmlHttp.onreadystatechange = httpStateChange;
                //创建http请求
                xmlHttp.open("get","userName.txt",true);
                //发送http请求
                xmlHttp.send(null);
            }
            else
            {
                alert("您的浏览器不支持XMLHTTP");
            }
        }

注意：需要建一个userName.txt存储已存在的用户名，各个用户名之间用分号隔开。

通过这个小例子，我们从理论阶段向代码实现迈了一步。从代码中很容易发现XMLHttpRequest是Ajax的核心对象。也正是因为各大浏览器对XMLHttpRequest对象的广泛支持，使得Ajax成为一项热门技术。IE浏览器将XMLHttpRequest实现为一个ActiveX对象，其他三大浏览器（Firefox，Opera，netscape）将其实现为一个本地javascript对象，所以在创建XMLHttpRequest对象时要经历一番周旋。虽然创建方式不同，但XMLHttpRequest对象拥有的方法和属性大致相同。下篇博客我们来一起揭开XMLHttpRequest对象的神秘面纱，深入解读上面的代码，敬请期待！

AJAX总结（二），手写AJAX

AJAX总结（二），手写AJAX

前言

博主博客：Stillwater的博客
知乎专栏：前端汪汪
本文为作者原创转载请注明出处：
http://hiztx.top/2017/01/12/a...

在前端面试的时候经常会有如下情景。AJAX会吗？能不能手写个AJAX？第一个问题可以参见我的另一篇博客，AJAX总结（一），AJAX概述。这篇博文我们来回答第二个问题，手写AJAX。

一、手写AJAX的步骤

  手写AJAX并没有一个固定的标准的答案，但是AJAX的关键步骤就那么几步，我会先用文字介绍关键步骤，然后给出两个版本的手写AJAX的代码及注释。帮助大家很好地理解和记忆。

  1. 创建XMLHttpRequest对象

  2. 指定响应函数

  3. 打开连接（指定请求）

  4. 发送请求

  5. 创建响应函数

注：第三步是使用XMLHttpRequest对象的open（）方法，字面意思open是打开的意思，即打开连接。但是准确的说应该是指定Http请求。因为浏览器在使用AJAX技术与服务通信时，发送的是Http请求，那么就要指定Http的请求方法，url等信息。

二、参考代码（W3C）

var xmlhttp=null;//声明一个变量，用来实例化XMLHttpRequest对象
if (window.XMLHttpRequest)
  {
  xmlhttp=new XMLHttpRequest();// 新版本的浏览器可以直接创建XMLHttpRequest对象
  }
  
else if (window.ActiveXObject)
  {
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");// IE5或IE6没有XMLHttpRequest对象，而是用的ActiveXObject对象
  }
  
  
if (xmlhttp!=null)
  {
  xmlhttp.onreadystatechange=state_Change;//指定响应函数为state_Change
  xmlhttp.open("GET","/example/xdom/note.xml",true);//指定请求，这里要访问在/example/xdom路径下的note.xml文件，true代表的使用的是异步请求
  xmlhttp.send(null);//发送请求
  } 
else
  {
  alert("Your browser does not support XMLHTTP.");
  }

//创建具体的响应函数state_Change
function state_Change()
{
if (xmlhttp.readyState==4)
  {
  if (xmlhttp.status==200)
    {
    // 这里应该是函数具体的逻辑
    }
  else
    {
    alert("Problem retrieving XML data");
    }
  }
}

  1. 创建XMLHttpRequest对象 （1-10行代码）

  2. 指定响应函数（第15行代码）

  3. 打开连接（指定请求）（第16行代码）

  4. 发送请求（第18行代码）

  5. 创建响应函数（25-38行代码）

  这个是W3C上讲解AJAX的代码，比较权威，我做了一些注释，方便大家理解。面试的时候写这段代码应该是没有问题的。
W3C原文链接

三、参考代码（MDN）

<!--html部分，创建一个按钮控件-->
<span id="ajaxButton">
  Make a request
</span>


<script type="text/javascript">
(function() {
  var httpRequest;//声明一个变量，用来实例化XMLHttpRequest对象
  document.getElementById("ajaxButton").onclick = function() { makeRequest(''test.html''); }; //这里将AJAX操作封装在makeRequest函数中，函数的参数为要请求的url，即根目录下的test.html文件。
 
  function makeRequest(url) {
    httpRequest = new XMLHttpRequest();//创建XMLHttpRequest对象
    if (!httpRequest) {
      alert(''Giving up :( Cannot create an XMLHTTP instance'');
      return false;
    }
    
    httpRequest.onreadystatechange = alertContents;//指定响应函数为alertContents
    
    httpRequest.open(''GET'', url); //指定请求，方法为GET，url为上面的test.html
   
    httpRequest.send();//发送请求
    
  }
  
  
//创建响应函数alertContents
  function alertContents() {
    if (httpRequest.readyState === XMLHttpRequest.DONE) {
      if (httpRequest.status === 200) {
        alert(httpRequest.responseText);
      } else {
        alert(''There was a problem with the request.'');
      }
    }
  }
})();//这是一个立即执行函数
</script>

  1. 创建XMLHttpRequest对象 （第13行代码）

  2. 指定响应函数（第19行代码）

  3. 打开连接（指定请求）（第21行代码）

  4. 发送请求（第23行代码）

  5. 创建响应函数（29-37行代码）

  这个是MDN上讲解AJAX的代码，我做了一些注释，方便大家理解。
MDN原文链接

四、总结

这篇文章讲解了如何较为规范的手写AJAX，下篇文章我会具体介绍XMLHttpRequest对象的有关知识以及AJAX相关的Http请求的知识。

Ajax调用后台方法的几种写法（二） Ajax.dll

Ajax调用后台方法的几种写法（二） Ajax.dll

使用插件Ajax.dll或者AjaxPro.dll。咱使用了Ajax.dll，需先去网上下载Ajax.dll，然后引用到项目中，并在Web.Config中配置如下：

在system.web的节点下加上这句，

<httpHandlers>
      <add verb="POST,GET" path="ajax/*.ashx" type="Ajax.PageHandlerFactory,Ajax" />
    </httpHandlers>

页面代码： 
  <div id="Div_1"> </div>
<asp:Button ID="btnOK" runat="server" Text="OK" OnClientClick="return Calltest();" />
<br/><asp:Label ID="lblEmpNo" runat="server"></asp:Label>

JS代码： 
 <script>
 //这个方法用户接受并处理服务器端返回的结果。 
        function getGroups_callback(response) {
            var dt = response.value; //这个值就是最终传回来的值，想怎么用就怎么用，反正回前台了。
            document.getElementById("Div_1").innerHTML = dt;
        }

        function Calltest() {
            var EmpName = document.getElementById('txtClientId').value;
            WebFormAjax.Test(EmpName,getGroups_callback);
            return false;
        } 
    </script>


C#后台代码： 
 protected void Page_Load(object sender,EventArgs e)
        {
            Ajax.Utility.RegisterTypeForAjax(typeof(WebFormAjax));      //typeof的参数是该页面所在的类名
            
        }
[Ajax.AjaxMethod]  //必须加上这个标签
        public string Test(string EmpName)
        {
            Thread.Sleep(3000);
            if (lblEmpNo != null)   //前台调用还是无法访问服务器控件Label，该控件为null，遗憾，也就是说明无法在后台给前台的服务器控件赋值
            {
                lblEmpNo.Text = EmpName + "123";
            }
            return EmpName + "abc";
        }

局限性：使用Ajax.dll在调用后台方面确实方便许多，但是无法再后台给前台的服务器控件赋值，只能在后台方法中返回值到前台，在前台通过JS赋值给控件。


其实本人的目的是想试验一个这样的功能，前台的按钮在后台事件中能给其他服务器控件赋值，特别是GridView绑定数据这种，但是由于数据量多，这个过程会比较慢，又想在前台加一个等待的遮罩提示，直到数据完全绑定到GridView上，遮罩层才消失。这就必须用Ajax。

很显然，上面的这种方式无法满足我，因为它无法再后台绑定GridView。但是它可以返回一个DataTable，然后在前台用JS取出DataTable的值，一行一行绑定到GridView上，这个复杂啊，郁闷啊，若再来个分页的，就更麻烦了。


这是从网上看来的一个例子，说明刚才的这种情况。此处用的是AjaxPro.dll，它与Ajax.dll区别不大。

HTML代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ajaxpro-no-refresh-update-gridview.aspx.cs" Inherits="ajaxpro_no_refresh_update_gridview" %>
<!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>
    <Meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>ajaxpro无刷新更新gridview数据</title>
</head>
<body>
<script type="text/javascript">
    function reload() {
        ajaxpro_no_refresh_update_gridview.GridViewSource(callback);
    }
    function callback(r) {
        var rows = r.value.Rows,tb = document.getElementById('gv1'),tr,td;
        while (tb.rows.length > 1) tb.deleteRow(1); //删除除了页头的行，此处保留了表头
        for (var i = 0; i < rows.length; i++) {
            tr = tb.insertRow(tb.rows.length);
            td = tr.insertCell(0); td.innerHTML = rows[i].Id;
            td = tr.insertCell(1); td.innerHTML = rows[i].rndNum;     //一个格子一个格子的赋值，多么悲催啊，况且它还没有分页行，这个例子就暂且参考吧。
        }
    }
</script> <table id="tb1"></table>
<form id="form1" runat="server"><input type="button" value="马上更新" onclick="reload()"/>
<asp:GridView runat="server" ID="gv1"></asp:GridView>
</form><!--一定不能缺少runat为server的表单，要不然ajaxpro不会自动生成对应的脚本和导入相关的框架代码-->
</body>
</html>

C# 后台代码： 
using System;
using System.Data;
public partial class ajaxpro_no_refresh_update_gridview : System.Web.UI.Page
{
    protected void Page_Load(object sender,EventArgs e)
    {
        AjaxPro.Utility.RegisterTypeForAjax(typeof(ajaxpro_no_refresh_update_gridview));
        gv1.DataSource = CreateDataSouce(); gv1.DataBind();   //正是因为第一次Load就绑定了GridView，才有了它的表头。若此处从未绑定，上面的JS就无从找表头了
    }
    private DataTable CreateDataSouce()
    {//创建数据源
        DataTable dt = new DataTable();
        dt.Columns.Add("Id");
        dt.Columns.Add("rndNum");
        Random r = new Random();
        for (int i = 0; i < 20; i++) dt.Rows.Add(i,r.Next(1,1000));
        return dt;
    }
    [AjaxPro.AjaxMethod]
    public DataTable GridViewSource()
    {
        return CreateDataSouce();   //返回了DataTable去前台
    }
}

关于浅谈ajax和二的问题就给大家分享到这里，感谢你花时间阅读本站内容，更多关于Ajax入门（二）Ajax函数封装、Ajax学习（二）—— 一个简单的Ajax实例、AJAX总结（二），手写AJAX、Ajax调用后台方法的几种写法（二） Ajax.dll等相关知识的信息别忘了在本站进行查找喔。

本文标签：

上一篇theme="ajax" : Template /template/ajax/head.ftl not found异常解决（error in the ajax）

下一篇浅谈ajax（一）（ajax的理解）

相关文章