AJAX 前后台数据交互

来源:互联网 发布:ubuntu 打开anaconda 编辑:程序博客网 时间:2024/04/30 11:30
function freshdata() {
        //Ajax获取数据
        var xhr = false;
        xhr = new XMLHttpRequest();
        xhr.open("POST", "GetData.aspx?case=" + document.getElementById("input2").value, true);
        xhr.onreadystatechange = function() {
            if (xhr.status == 200) {
                if (xhr.readyState == 4) {
                    document.getElementById("txtHint").innerHTML = xhr.responseText;
                    
                    //Ajax更新数据后需要重新绑定更新部分的事件
                    $(".table tr").mouseover(function() {
                        //如果鼠标移到class为stripe的表格的tr上时,执行函数    
                        $(this).addClass("over");
                    }).mouseout(function() {
                        //给这行添加class值为over,并且当鼠标一出该行时执行函数    
                        $(this).removeClass("over");
                    }) //移除该行的class
                    $(".table tr:even").addClass("alt");

                    $("table.table tr td img").click(function() {
                        layer.msg('继续学习');
                    });
                    $("#page1 img").mouseover(function() {
                        $(this).css("cursor", "pointer");
                    }).mouseout(function() {
                        //给这行添加class值为over,并且当鼠标一出该行时执行函数

                    }) //移除该行的class
                    $("div#page2 div ul li").mouseover(function() {
                        $("div#page2 div ul li").css("cursor", "pointer");
                        //$(this).addClass("over");
                        //$(this).css("border-width", "2px");
                    }).mouseout(function() {
                        //$(this).removeClass("over");
                        //$(this).css("border-width", "1px");
                    }) //移除该行的class

                    $("div#page2 div ul li").mousedown(function() {
                        setliBackgroundColor(this.id);
                    })                 
                }
            }
        }
        xhr.send(null);

    }



转载http://www.cnblogs.com/qfcndtt/archive/2013/02/27/2935520.html

AJAX--前后台交互

注:ajax通过async参数决定是异步还是同步,false同步,true异步;

  异步执行顺序是先执行后续动作,再执行success里代码;

  同步是先执行success里代码,再执行后续代码;

验证:同步时数据量大是否会卡顿?例如从后台搜索大量数据时,页面是否卡死?

1、(异步)方法调用,后续代码不需要等待它的执行结果
  后台<C#>:

using System.Web.Script.Services; 
 
[WebMethod]
public static string GetStr(string str1, string str2)
{
    return str1 + str2;
}
 
前台<JQuery>:

function Test(strMsg1,strMsg2)
{
    $.ajax({
        type: "Post",
        url: "Demo.aspx/GetStr",
        async: true,
        //方法传参的写法一定要对,与后台一致,区分大小写,不能为数组等,str1为形参的名字,str2为第二个形参的名字
        data: "{'str1':'"+strMsg1+"','str2':'"+strMsg2+"'}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(data) {
            //返回的数据用data.d获取内容
            alert(data.d);
        },
        error: function(err) {
            alert(err);
        }
    });

  //隐藏加载动画
    $("#pageloading").hide();
}

 

2、(同步)方法调用,可用于需要得到返回值是执行后续代码的前提

  后台<C#>:

using System.Web.Script.Services; 
 
[WebMethod]
public static string GetStr(string str1, string str2)
{
    return str1 + str2;
}
 
前台<JQuery>:

function Test(strMsg1,strMsg2)
{

 var str = “”;
    $.ajax({
        type: "Post",
        url: "Demo.aspx/GetStr",
        async: false,
        //方法传参的写法一定要对,与后台一致,区分大小写,不能为数组等,str1为形参的名字,str2为第二个形参的名字
        data: "{'str1':'"+strMsg1+"','str2':'"+strMsg2+"'}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(data) {
            //返回的数据用data.d获取内容 
            str = data.d;
        },
        error: function(err) {
            alert(err);
        }
    });

 return str;


0 0
原创粉丝点击