关于js实现的Ajax调用,webService,一般处理程序,aspx

来源：互联网发布：如何检测域名被墙编辑：程序博客网时间：2024/05/18 03:31

记得以前学的时候,网上的资料一大堆,就是没几个看的懂,都是理论,包括我目前看的mvc书都是一样,废话一堆,其实东西没那么难,让作者把某个技术吹上天了.

下面是一些初学者,比较实用的代码,欢迎大虾指导....

<ajax调用一般处理程序,并解析json数据>

<因为是测试代码,没有命名>

创建一个静态页面default.html

//下面是default.html的代码,直接考过去就可以了...

<!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>
<title>异步调用一般处理程序</title>

　　//尝试创建XMLHttpRequest对象　　
        function RetuenAjaxXmlHttp() {
            var xmlhttp;
            try {

　　//创建不是ie浏览器的对象
                xmlhttp = new XMLHttpRequest();
            }
            catch (e) {
                try {

//创建是 ie6 ie7 ie8 浏览器的对象
                    xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
                }
                catch (e) {
                    try {
                        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                    }
                    catch (e) {
                        alert("您的浏览器不支持Ajax");
                        return false;
                    }
                }
            }

//返回一个对象
return xmlhttp;
}

//这个是请求的方法
        function AnysHandler() {
            var xmlHttp = RetuenAjaxXmlHttp();
            xmlHttp.onreadystatechange = function() {
                if (xmlHttp.readyState == 4) {
                    if (xmlHttp.status == 200) {

//返回的json数据,实用eval转换, 大家可以下个断点解析前的数据格式,和解析后的格式
var list = eval(xmlHttp.responseText);

//循环遍历把值扔给一个div标签
                        for (var i = 0; i < list.length; i++) {
                            $("d1").innerHTML += "</br>姓名：" + list[i].Name + " 年龄：" + list[i].Age;
                        }
                    }
                }
            }

这是post请求, xmlHttp.send(null);你可以send键值对过去,通过Request["键"]解析

            xmlHttp.open("post", "ReturnJosn.ashx?" + Math.random(), true);
            //post请求需要这句话
            xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xmlHttp.send(null);

下面在写一个get的方式吧

其实好简单一看就会

　　// xmlHttp.open("get", "ReturnJosn.ashx?" + Math.random(), true);

　　//xmlHttp.send(null);

哈哈,少写一句话就可以了
Math.random(), 这句话,主要的作用就是,自己想吧,试试,不加会怎么样
}

//就是一个方法不是jquery啊

        function $(id) {
            return document.getElementById(id);
        }
    </script>

</head>
<body>
    <a href="#" onclick="AnysHandler()">ajax异步调用Handler的返回数据</a><br />
     <div id="d1" style="border: solid 1px #ff0000">
    </div>
</body>
</html>

好了,第一步完成了,创建一个一般处理程序 ReturnJosn.ashx

这个没什么说得,直接考过去,就可以用了,改下命名空间就行了,....

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.UI.MobileControls;
using System.Web.Script.Serialization;
using System.Web.SessionState;

namespace Ajax简单运用
{
    /// <summary>
    /// $codebehindclassname$ 的摘要说明
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    public class ReturnJosn : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            List<Person> persons = new List<Person>();
            persons.Add(new Person() { Name = "陈猛", Age = 21 });
            persons.Add(new Person() { Name = "陈猛", Age = 21 });
            persons.Add(new Person() { Name = "陈猛", Age = 21 });
            //返回json序列
            JavaScriptSerializer jsSer = new JavaScriptSerializer();
            context.Response.Write(jsSer.Serialize(persons));
        }

        public bool IsReusable
        {
            get
            {
                return true;
            }
        }
    }
    public class Person
    {
        public string Name { get; set; }
        public int Age { get; set; }
    }
}
相信大家学到这里,做一个异步的刷新时间,异步的注册验证,异步登陆,都可以了吧

下面在写一个调用webService 调用aspx页面就不写了,其实都一样

<ajax调用webService >

创建default.html吧

<有几个调用方式,大家看看吧,主要麻烦在解析上面,webService返回的是xml数据>

//这个方法是,webService直接返回,一个字符串,不需要解析
function showService() {
var xmlHttp = returnxmlhttp();

//调用webService就是路径不一样

//路径最好这样学, 把webService在浏览器查看,调用你想调用的方法,然后就把路径考过来使用,
            var url = "http://localhost:1472/ajax%E8%B0%83%E7%94%A8webService/WebService1.asmx/HelloWorld";
            xmlHttp.onreadystatechange = function() {
                if (xmlHttp.readyState == 4) {
                    if (xmlHttp.status == 200) {
                        var tmp = xmlHttp.responseText;
                        $("d1").innerHTML = tmp;
                    }
                }
            }
            xmlHttp.open("Post", url, true);
            xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xmlHttp.send(null);
        }

//这个是传过去一个参数,然后我没处理直接返回来,就是演示传参....
        function showName() {
            var xmlHttp = returnxmlhttp();
            var poststr = "name=" + $("text1").value;
            var url = "http://localhost:1472/ajax%E8%B0%83%E7%94%A8webService/WebService1.asmx/ShowName";
            xmlHttp.onreadystatechange = function() {
                if (xmlHttp.readyState == 4) {
                    if (xmlHttp.status == 200) {
                        var tmp = xmlHttp.responseText;
                        $("d1").innerHTML = tmp;
                    }
                }
            }
            xmlHttp.open("Post", url, true);
            xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xmlHttp.send(poststr);
        }

//这个方法是返回一个json数据,经过处理,就变成了xml文件,太恶心了....,我发现,用我自己写的(字符串)方法解析,还是比较容易理解,
        function jsonList() {
            var xmlHttp = returnxmlhttp();
            var url = "http://localhost:1472/ajax%E8%B0%83%E7%94%A8webService/WebService1.asmx/ShowJson";
            xmlHttp.onreadystatechange = function() {
                if (xmlHttp.readyState == 4) {
                    if (xmlHttp.status == 200) {
                        //还有一种解析方式用XMLDOM

//这是字符串解析方式,比较容易理解,下面还有就是用xmlDOM解析,在后面我会,把处理后的xml文件直接拿出来,用xmldom解析,
                        var tmp = xmlHttp.responseText;
                        var startIndex = tmp.indexOf("[");
                        var endIndex = tmp.indexOf("]");
                        var list_info = tmp.substring(startIndex, endIndex + 1);
                        var list = eval(list_info);
                        for (var i = 0; i < list.length; i++) {
                            $("d1").innerHTML += "</br>姓名：" + list[i].Name + " 年龄：" + list[i].Age;
                        }
                    }
                }
            }
            xmlHttp.open("Post", url, true);
            xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xmlHttp.send(null);
        }
        function $(id) {
            return document.getElementById(id);
        }
    </script>

</head>
<body>
    <div>
        <input type="button" id="btn_show" name="btn_show" value="ajax调用webService" onclick="showService()" /><br />
        <input type="text" id="text1" name="text1" /><br />
        <input type="button" id="btn_name" name="btn_name" value="ajax有参调用webService" onclick="showName()" /><br />
        <input type="button" id="json_list" name="json_list" value="返回的json数据" onclick="jsonList()" /><br />
    </div>
    <div id="d1">
    </div>
</body>
</html>

<下面写出webService文件,就差不多了>

哈哈,后面我还准备讲一下简单的回调,和一个比较常用的借口
创建一个WebService1.asmx文件

<代码直接扔出来>

不会同学,看看就好了......会的过去,下面还有 xmldom解析webService处理的xml文件,简单回调,常用的一个接口

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Script.Serialization;

namespace Ajax简单运用.ajax调用webService
{
    /// <summary>
    /// WebService1 的摘要说明
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    // 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消对下行的注释。
    [System.Web.Script.Services.ScriptService]
    public class WebService1 : System.Web.Services.WebService
    {

        [WebMethod]
        public string HelloWorld()
        {
            return "Hello World";
        }

        [WebMethod]
        public string ShowName(string name)
        {
            return name;
        }

        [WebMethod]
        public string ShowJson()
        {
            List<Stu> list_stu = new List<Stu>();
            list_stu.Add(new Stu() { Name = "陈猛", Age = 21 });
            list_stu.Add(new Stu() { Name = "陈猛", Age = 21 });
            list_stu.Add(new Stu() { Name = "陈猛", Age = 21 });
            list_stu.Add(new Stu() { Name = "陈猛", Age = 21 });
            JavaScriptSerializer js = new JavaScriptSerializer();
            return js.Serialize(list_stu);
        }
    }
    public class Stu
    {
        public string Name { get; set; }
        public int Age { get; set; }
    }
}

<下面是xmldom解析webService处理后的xml文件>

创建一个xml文件 XMLInfo.xml

假如这是一个webService处理后的xml文件,不信你可以看上面的webService返回的xml文件

<?xml version="1.0" encoding="utf-8"?>
<string xmlns="http://tempuri.org/">
[{"Name":"陈猛","Age":21},{"Name":"陈猛","Age":21},{"Name":"陈猛","Age":21},{"Name":"陈猛","Age":21}]
</string>

在创建一个html页面吧,我直接写出代码,大家比较一下

<注意><注意>

这个解析仅限于解析webService处理后的xml文件<很多局限性>(比如,这个webService返回的还必须是json数据,处理的后的格式才是这样,)(不是很绝对,因为我喜欢这样解析,这样返回, 真没试过别的返回格式....

<后面还有一个,简单的回调和一个接口了>,5分钟搞定.....

<!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>
<title></title>

            try {
                xmldoc = new ActiveXObject("Microsoft.XMLDOM");
            }
            catch (e) {
                try {
                    xmldoc = document.implementation.createDocument("", "", null);
                }
                catch (e) {
                    alert(e.message);
                }
            }
            xmldoc.async = false;

            xmldoc.load("XMLInfo.xml");
            return xmldoc;
        }
        function showXML() {
            var xmldom = returnxmldomObj();
            var tmp = xmldom.text;
            var tmp1 = eval(tmp);
            for (var i = 0; i < tmp1.length; i++) {
                document.getElementById("d1").innerHTML += "姓名:" + tmp1[i].Name + " 年龄:" + tmp1[i].Age + "</br>";
            }
        }
    </script>

</head>
<body>
    <input type="button" id="btn_show" name="btn_show" value="显示XML文件" onclick="showXML()" />
    <div id="d1">
    </div>
</body>
</html>

<一个简单的回调,希望同学们明白,回调的处理机制....>

创建一个webForm1.aspx页面

我把代码写上

<就写一个控件,什么都没有>,下面是后台代码

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Ajax简单运用.WebForm1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<后台代码,OK了,>

下面就一个接口了,还不用实现,O(∩_∩)O哈哈~

代码就不讲了,大家看看你,多看看,在看几眼,你就知道回调的处理机制了,

就是这句话, this.a1.Attributes.Add("onclick",this.GetPostBackClientEvent(this,"aaaa"));
然后就是在实现一个接口

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

namespace Ajax简单运用
{
    public partial class WebForm1 : System.Web.UI.Page,IPostBackEventHandler
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            this.a1.Attributes.Add("onclick",this.GetPostBackClientEvent(this,"aaaa"));
        }

#region IPostBackEventHandler 成员

        public void RaisePostBackEvent(string eventArgument)
        {
            string jsStr = "alert('" + eventArgument + "')";
            ClientScript.RegisterStartupScript(this.GetType(), "cm", jsStr, true);
        }

#endregion
}
}

<说了,讲这个接口,就一定讲,>

//在这样的情况下你需要这个接口,比如比如你在一般处理程序需要找到某个Session的值你就需要

直接写出代码

对了,就是这个接口,无需实现,,,,IReadOnlySessionState
这个是只读,还有一个是读写,自己找找...

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.SessionState;

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            context.Response.Write("Hello World");
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}