jQuery之ajax学习总结

     项目开始了几天了，项目中我用到了自学了的jQuery，但是对jQuery的ajax方法不太熟，因为它是基于Httprequest实现的，也觉得插件AjaxPro能更好的实现ajax异步调用，ajaxPro调用ajax可以直接传datatable、ilist等对象，能够方便的实现功能。

 

     不过昨天下午发现了问题，IE里，当jQuery、AjaxPro同时使用时，出现了BUG，只要注册了AjaxPro的页面，jQuery的事件就会报错，我测试了很多次，问题是出现在AjaxPro的core.ashx文件里，网上找了很多资料没有什么结果，但经过了我的测试我断定这是BUG，他们内部的js起了冲突。

 

     这是core.ashx文件里js错误截图，报出的错误为“无法得到 type 属性。参数无效” 或者 “对象不支持此操作”

    

     但是在Firefox里，运行没问题，但会也有点小问题，按钮触发ajax事件，触发完了，按钮就变成文本框了。

 

     没办法，jQuery里不能用事件，让我觉得很郁闷，今天我项目没怎么做，专门去学学jQuery里的ajax，一般的调用我还懂，比如dataType为xml、html的还能马马虎虎，今天看了点资料，找到了好东西，其实jQuery调用集合有个很好的办法--json，开始我也试过这样的测试，但是由于时间原因一直没通过，呵呵，今天晚上呆公司好好找了找，不错，先记下。。。下面是部分代码：

$("div").load()方式：

Code
$("div").load("login.html"); //加载其他文件内容到div上，适合做模式登录

 

$.get()方式：

Code
$.get('test.aspx', {index:4}, function (data) { 
     $("#result").html(data); 
}); 

 

$.post()方式：

Code
$.post('test.aspx', {index:4}, function (data){
    $("#result").html(data); 
}); 

 

$.post()方式：(获取json)

 

Code
ajax.ashx.cs文件:

Response.ContentType = "application/json";
Response.Write("{name:'lidi',age:20}");

调用
$.post("ajax.ashx",{},function(data){
    alert(data.name);
},"post");  //注意这里

 

$.ajax()方式：（dataType：xml）

Code
$.ajax({
    type:"get",
    dataType:"xml",
    url:"http://www.cnblogs.com/rss",  //返回xml格式信息
    beforeSend:function(xmlhttprequest){
        $("img").show();
    },
    success:function(data,status){
        $("div").html("");
        $("item",data).each(function(i, domEle){
            $("div").append("<li>"+$(domEle).children("title").text()+"</li>");
        });
    },
    complete:function(){
        $("img").hide();
    },
    error:function(xmlhttprequest,error){
        alert(error);
    }
});

 

 

$.ajax()方式：（dataType：html）

 

Code
        $.ajax({
           type:"post",
           url:"test.aspx",  //返回xml格式字符串，如:<ul><li>aa</li><li>bb</li></ul>
           data:"index=3&name="+$("#name").val()+"&age="+$("#age").val()+"&sex="+$("input:radio:checked").val(),
           dataType:"html",
           timeout:50000,
           beforeSend:function(xmlhttprequest){
               $("div").html("<img id='imgid' src='http://www.cnblogs.com/imges/loading.gif' />");
           },
           success:function(xml,status){
               $(xml).each(function(){
                   $(this).children().each(function(){
                       $("<li></li>").html($(this).text()).appendTo("div");
                   });
               });
           },
           error:function(xmlhttprequest,error){
               alert(error);
           },
           complete:function(){
               $("#imgid").hide();
           }
        });

 

$.ajax()方式：（dataType：script）

 

Code
$.ajax({
    type: "post",      
    url: "ajax.aspx",  //返回格式如："var a = {name:'lidi',age:20};"    
    data: "index=5",      
    dataType: "script",
    success:function(){
        alert(a.name);
    }
});

 

$.ajax()方式：（dataType：json）

 

Code
$.ajax({
    type: "post",      
    url: "ajax.aspx",  //返回格式如："{name:'lidi',age:20}"    
    data: "index=5",      
    dataType: "json",
    success:function(data){
        alert(data.name);
    }
});

 

嘿嘿，现在开发就可以完全用我自学的jQuery了。真不错！