在asp.net中javascript ajax的运行过程详讲(非jquery的ajax)

来源：互联网发布：手机运行电脑软件编辑：程序博客网时间：2024/06/07 02:16

其实ajax它一直都有一个自己的运行过程的，不管是在哪一门语言中，它都是一样的，只是某些表示不同了。

以前写java现在我想看看asp.net中是否也可以像java一样去操作ajax，结果是当然的。

首先，我想在我的js文件中去发送ajax请求，然后收到响应的json数组，把json数组中的内容填充到页面的表格中去。

准备工作：

建立一个js文件 :myajax.js

建立两个aspx文件: cotroller.aspx,show.aspx

(ajax直接请求后台，其实也就是一个url的请求，那么我们用一个aspx来模拟一个后台的controller其实是一样的。用一个来显示表格.)

完了，准备工作就这么简单！！！

代码准备工作：

1.在show.aspx的body中插入一个表格:

  <table id="mytable" style="display:none" border="1">       <tr>            <th>Id</th>            <th>名字</th>       </tr>    </table>

2.在show.aspx中引入myajax.js

<script src="Scripts/myajax.js" type="text/javascript"></script>

现在我们要做的就是到myajax.js中去写一个ajax请求,请求controller.aspx，然后，再到controller.aspx中去得到请求的信息，再返回信息给myajax.js

myajax.js中的代码：

1.建立核心对象

 var req = new XMLHttpRequest();  //这里我们假定支持此对象

2.设置url

 var url = "controller.aspx" +"?req=" + 1;

3.打开连接

 req.open("GET", url); // An HTTP GET request for the url

4.状态监听

req.onreadystatechange = function () {        if (req.readyState == 4 && req.status == 200) {              var response = req.responseText;              //得到响应的字符串 其实我们然望的这个字符串是一个json数组。             //但是asp.net中的结果可能会出乎你的意料             //如果是response.write响应的一个json，那么它是包括了html代码            //因为你的json字符串如果没有ajax监听，它就直接会显示在页面上           //所以它会包包含<html>之类的标签          //后面详讲.....    }}

5.发送

 req.send(null);

6.注意你的js代码，放在:

window.onload = function () {    //放到这里面 页面加载过后再执行。 }

现在代码虽然还没有完善，但是你可以发请求了，那么你就要在controller.aspx中去写代码了

1.接收js发送过来的ajax请求

<body><%
   //　我让这个页面充当controller,所以在这个页面中去接收发送过来的ajax请求
    HttpRequest request = Request; 　　　　　　　　　　//得到请求对象    String flag = request.QueryString["req"];       //接收参数    if (flag != null && "" != flag)                 //如果有这个参数，请明是一个ajax请求，这种写法实在太二了，不过能完成功能！！！    {        HttpResponse response = Response;           //如果是ajax请求，我们就要响应，那么就去得到响应对象        response.ContentType = "application/json;charset=utf-8";  //设头类型，java中拿过来的。写上好点        string strJson = "[{'id':1,'name':'张三'},{'id':2,'name':'李四'},{'id':3,'name':'王五'}]"; //创建一个json数组        response.Write(strJson);      //响应        response.End();              //结束                  }  %>    <form id="form1" runat="server">    <div>        </div>    </form></body>

2.上面的代码已经接收了请求，并且给出了一个响应，就是我们的json数组，那么我们的ajax监听，就应该去得到这个json

ok,,,那么，现在回到js文件中:

req.onreadystatechange = function () {        if (req.readyState == 4 && req.status == 200) {                       var response = req.responseText;            alert(response); //你会发现这个json数组是放在<html>的<body>中，除json数组，其它的我们都是不要的！所以要做一定的处理，把json数组截取出来！            var start = response.indexOf("[");            var end = response.indexOf("]") + 1;            var jsons = response.slice(start, end);   //这里才真正地得到json数组。            var lenders = eval(jsons); // 转成js数组            var tables = document.getElementById("mytable"); //得到table元素            var trs = "" ;//拼行。很多行。每一行就是一个json对象转化而来            for (var i = 0; i < lenders.length; i++) {                var trs = (trs + "<tr>" + "<td>" + lenders[i].id + "</td>" + "<td>" + lenders[i].name + "</td>" + "</tr>");            }            tables.innerHTML = trs;  //插入表格            tables.style.display = ""; //显示表格        }    }

完了...整个过程就是这样。现在已经把json数组拼成了table中的行，并且显示出来了....

三个文件完整的代码：

js:

window.onload = function(){  var req = new XMLHttpRequest();    alert(req);    var url = "request.aspx" +     "?req=" + 1;     req.open("GET", url);    req.onreadystatechange = function () {        if (req.readyState == 4 && req.status == 200) {            var response = req.responseText;             var start = response.indexOf("[");            var end = response.indexOf("]") + 1;            var jsons = response.slice(start, end);            var lenders = eval(jsons); // Parse it to a JS array            var tables = document.getElementById("mytable");            var trs = ""            for (var i = 0; i < lenders.length; i++) {                var trs = (trs + "<tr>" + "<td>" + lenders[i].id + "</td>" + "<td>" + lenders[i].name + "</td>" + "</tr>");            }            tables.innerHTML = trs;            tables.style.display = "";        }    }    req.send(null);     }

controller.aspx:

<body><%    HttpRequest request = Request;    String flag = request.QueryString["req"];    if (flag != null && "" != flag)    {        HttpResponse response = Response;        response.ContentType = "application/json;charset=utf-8";        string strJson = "[{'id':1,'name':'张三'},{'id':2,'name':'李四'},{'id':3,'name':'王五'}]";        response.Write(strJson);        response.End();    }  %>    <form id="form1" runat="server">    <div>        </div>    </form></body></html>

show.aspx:

<head runat="server">    <title>ajax测试</title>       <script src="Scripts/myajax.js" type="text/javascript"></script>   </head><body>    <form id="form1" runat="server">        </form>    <label id = "la">    解析json后的数据：    </label>    <table id="mytable" style="display:none" border="1">       <tr>            <th>Id</th>            <th>名字</th>       </tr>    </table></body></html>

这是最基础最基础的，算是ajax入门吧！！