初学Ajax(.net)笔记

最新推荐文章于 2024-11-02 16:30:36 发布

daw4564

最新推荐文章于 2024-11-02 16:30:36 发布

阅读量99

点赞数

文章标签： json xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/fishtreeyu/archive/2010/12/30/1921558.html

版权

以下内容是看了杨中科(传智播客)老师的.net视频及牛腩老师的新闻发布系统视频相关Ajax章节所做大概记录，初学理解能力有限，因此笔记可能有误。

一、用JS原始代码实现Ajax（不用任何Ajax框架）

1、新建AjaxText.html

-点击Button1按钮获取服务器时间并显示到Text1文本框中

<!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>用JS原始代码实现Ajax,面试经常会要求写</title>
    </head>
<body>
获取服务器时间：<br/>
    <input id="Text1" type="text" />
    <input id="Button1" type="button" value="获取" οnclick="btnClick()" />
</body>
</html>

2、添加JS代码，该JS用于实现Ajax

-这里要注意，如果把JS或JQuery写在单独的JS文件中，ashx页面url要相对于html或aspx页面，而不是相对于js页面

<script type="text/javascript">
        function btnClick() {
            var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //创建XMLHTTP对象,相当于WebClient(注意，这是微软IE下的方法，在其他浏览器是不支持的)
            if (!xmlhttp) {
                alert("创建xmlhttp对象异常!");
                return false;
            }
            //准备向服务器的GetDate.ashx页面发出POST请求，并传递参数id，&ts=new Date().getTime()为预防页面有缓存
        xmlhttp.open("POST", "GetDate.ashx?id="+encodeURI("中国")+" &ts="+new Date().getTime(), false); 
            //XMLHTTP默认(也推荐)不是同步请求的，也就是open方法并不像WebClient的DownLoadString那样把服务器返回数据拿到才返回，是异步的，因此需要监听onreadystatechange事件
        xmlhttp.onreadystatechange = function() {
                if (xmlhttp.readyState == 4) {  //服务器请求完成
                    if (xmlhttp.status == 200) {  //如果状态码为200，则是请求成功
                        document.getElementById("Text1").value = xmlhttp.responseText; //★responseText属性为服务器返回的文本
                    }
                    else {
                        alert("AJAX服务器返回错误！");
                    }
                }
            }
            xmlhttp.send();//这时才开始发送请求        
     }
    
</script>

3、新建一般处理程序页面GetDate.ashx

public void ProcessRequest(HttpContext context)
{
     context.Response.ContentType = "text/plain";
     string id = context.Request["id"];
     context.Response.Write(DateTime.Now.ToString()+"--页面传过来的参数id="+id);//获取服务器时间,★通过context.Response.Write()返回数据
}

注：ashx通过context.Response.Write()来返回数据

二、用JQuery实现Ajax（一般都是用JQuery来实现Ajax，比较方便）

　　引出JQuery.js文件，并将第一步中的Js代码改为JQuery代码

 function btnClick() {
     $.post("GetDate.ashx", { "id": "中国"}, function(data, status) {
          if (status = "success") {   // 第二个参数status为服务器返回状态码，success表示返回成功
              $("#Text1").val(data); // 第一个参数data为服务器返回的内容
          }
          else {   //如果返回失败
              alert("AJAX错误!");
          }
      });
  }

JQuery中提供了简化ajax使用的方法。$.ajax()函数是JQuery中提供的ajax访问函数，一般不直接调用$.ajax()函数，

$.post()是对$.ajax()的post方式提交ajax查询的封装，$.get()对$.ajax()的get方式提交ajax查询的封装。推荐用post方式，因为post方式没有缓存的问题。

如果需要在出错时执行函数，请使用 $.ajax。

$.post(url,[data],[callback],[type])：第234参数为可选

url：为发送请求的地址，如上面的GetDate.ashx(注意，这里的ashx页面路径，是相对于页面的路径，而不是相对于JS文件的路径)

data：待发送的key/value参数，为字典数组，如{"id":idText , "name":nameText},也可把url写成"GetDate.ashx?id="+idText+"&name="+nameText形式，而省略改参数，该post方法会自动对传进来的中文参数进行编码；

（★注意：如果用$.get()则必须解决缓存问题，可加参数"t":new Date().getTime()；还必须考虑编码问题，如果传入的参数value是中文，存到数据库会有乱码，因此必须进行二次转码，如"name":encodeURI(encodeURI(nameText))，然后在ashx中再对该参数值进行解码context.Server.UrlDecode(context.request["name"]，因此推荐使用$.post())　　

calback：发送成功时回调函数，如上面的function(data,status){}，回调函数中data(可省略)为服务器返回的数据，status(可省略)为服务器返回状态码status = "success"表示返回成功

三、上面方法回传的数据都是单字符串，可用Json实现传数组

1、新建JsonTest.html文件，在html文件中加入一下JQuery代码

<script type="text/javascript">
        $(function() {
            $.post("JsonTest.ashx", function(data, status) {
                //alert(data);//弹出字典数组行式的字符串{"Name":"tom","Age":30}
                var person = $.parseJSON(data);//反序列，直接得到一个字典数组
            alert(person.Name);//相当于person["Name"]
            });
        });
</script>

2、新建一般处理程序页面JsonTest.ashx

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Script.Serialization; //引入该命名空间

namespace Ajax
{
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    public class JsonTest: IHttpHandler
    {
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            //JavaScriptSerializer为启用 AFAX 的应用程序提供序列化和反序列化功能。
        JavaScriptSerializer jss = new JavaScriptSerializer();
            //Serialize():当在派生类中重写时，生成名称/值对的字典数组。
        string json = jss.Serialize(new Person() { Name = "tom", Age = 30 });
            context.Response.Write(json);//返回一个字典数组形式的字符串：{"Name":"tom","Age":30}
        }

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

    public class Person 
    {
        public string Name { get; set; }
        public int Age { get; set; }
    }
}

转载于:https://www.cnblogs.com/fishtreeyu/archive/2010/12/30/1921558.html