ASPX中ajax以及angularJs的使用

ajax异步请求是web开发中常用的一种技术，在这里介绍以下原生ajax和jquery中ajax在ASPX中的使用：

<div>
    <input type="button" value="ajax请求" id="test" onclick="t();">
    <input type="button" value="jqueryAJAX" onclick="testAjax('TP0001')" />
    <div id="content">
        空内容
    </div>
</div>

<div ng-app="test" ng-controller="ngctrl">
    <ul>
        <li>
            {{x}}
        </li>
    </ul>
    <input type="text" id="tt"  ng-model="name" />
    <input type="button" value="提交" ng-click="save()"/>
</div>

 以上是对应的html，下面是对应原生ajax的js代码：

 function createAjax() {//创建ajax对象
        var ajax = null;
        try {
            //IE浏览器
            ajax = new ActiveXObject("microsoft.xmlhttp");
        } catch (ex) {
            try {
                ajax = new XMLHttpRequest();
            } catch (ex1) {
                alert("浏览器不支持异步请求对象！");
            }
        }
        return ajax
    }

    function t() {
        var ajax = createAjax();
        var method = "GET";
        var url = "WebTest.aspx/GetStr";
        ajax.open(method, url, true);
        ajax.setRequestHeader("Content-type", "application/json; charset=utf-8");
        ajax.send(JSON.stringify({"fangjie":"name"}));
        ajax.onreadystatechange = function() {

            if (ajax.readyState == 4) {
                if (ajax.status == 200) {
                    var con = ajax.responseText;
                    var obj = eval("(" + con + ")");
                    document.getElementById("content").innerHTML = obj.d;
                }
            }
        }
    }

 以下是对应的jQuery中ajax的js代码：

    function testAjax() {
        var prdCode = $("#tt").val();
        $.ajax({
            type: "POST",
            url: "/WebTest.aspx/GetRpts",
            contentType: "application/json; charset=utf-8",
            dataType: 'json',
            data: JSON.stringify({ "prdCode": prdCode }), //此处只能提交json字符串
            success: function(data) {
                var dict = data;
                var dict1 = data.d;
                console.log(data.d);
                alert(data.d);
            },
            error: function(xml, stat, err) {
                console.log(xml);
                console.log(stat);
                console.log(err);

            }
        });
    }

angularJs的异步请求js代码：

 var app = angular.module("test", []);
        app.controller("ngctrl", function($scope, $http) {
            $http({
                method: "POST",
                url: "http://localhost:31853/WebTest.aspx/GetStr",
                headers: { "Content-type": "application/json;charset=utf-8" }, //application/json
                data: ""
            }).then(function successCallback(response) {
                $scope.x = response.data.d;
                console.log(response);
            }, function errorCallback() {
            });
            $scope.save = function() {
                $http({
                    method: "POST",
                    url: "http://localhost:31853/WebTest.aspx/GetData",
                    headers: { "Content-type": "application/json;charset=utf-8" }, //application/json
                    data: { name: $scope.name }
                }).then(function successCallback(response) {
                    var data = response.data.d;
                    $scope.x = response.data.d;
                    console.log(response.data.d);
                    console.log(typeof (data));
                    data = '"' + data + '"';
                    console.log(data);
                    var json = JSON.parse(data); //eval("(" + data + ")") //angular.fromJson('" ' + data + '"');
                    console.log(typeof (json));
                    console.log(json.name);
                }, function errorCallback() {
                });

            };
        });

对应的.cs文件中对应的方法前都需要加上webmethod注解（通过webservice来实现调用）如下： 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;

namespace ajax
{
    public partial class WebTest : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {         
            string data = Server.UrlDecode((new System.IO.StreamReader(Request.InputStream)).ReadToEnd());//序列化为json字符串
            string t = data;
        }

        [WebMethod]
        public static string GetRpts(string prdCode)
        {
            return prdCode;
        }

        [WebMethod]
        public static string GetStr()
        {
            DateTime time = DateTime.Now;
            string content = "";
            if (time == null)
            {
                content = "时间为空";
            }
            else
            {
                content = time.ToString("yyyy-MM-dd:hh:mm:ss");
            }
            return content;
        }

        [WebMethod]
        public static string GetData(string name)
        {           
            return "{name:[fangjie,xiaowang]}";
        }
    }
}