JQuery真的不难～第六回 JQ中的异步调用方式

前言

今天主要讲一下JQ中的异步编程，它将ajax进行封装，在进行异步请求时显得非常容易，无论是GET，POST方式，还是text,xml,javascript,json等数据通讯都是那么的自然

现在，我们就走入jq的ajax的殿堂吧。

 GET请求获取数据

    <script src="http://img1.c2cedu.com/Scripts/jquery/jquery-1.4.2.min.js" type="text/javascript"></script>
    <script type="text/javascript"> $.ajax({

            type: "GET",

            dataType: "html",

            url: "ajaxData.htm",

            data: {}, //参数信息，采用ＪＳ对象的形式，也可以使用URL地址比较传统的&将参数分隔

            error: function () {

                alert("获取数据失败");

            },

            beforeSend: function () {

                alert("发送请求之前出现错误");

            },

            success: function (data) {

                $("#list").html(data)

            }

        });
    </script>

ajaxData.htm的内容为：

<ul>
    <li>data:zzl</li>
    <li>infomation:better man</li>
</ul>

 

POST请求操作数据

$.ajax({
  type:'POST',

data:{name:'zzl',email:'bfyxzls@sina.com',addr:'beijing'},
  url: '/ajax/insert.ashx',
  success: function(data) {
   if(data.res)｛
     alert('操作成功‘);
    ｝
  }
});

注意：AJAX可以跨域发GET请求，来读取数据，但不可以发POST请求，这是正常的，要不就太危险了，呵呵。

$.ajax({
 type:'GET',
 dataType:'jsonp',
 jsonp: "jsonpcallback", //需要与服务端的jsonp字符匹配

url: 'http://www.sina.com/ajax/test.',
 success: function(data) {
    $('#result').html(data);
  }
});

对于JQ为AJAX的封装，还有几个简洁的写法，等下次再写，写个续集！

本文转自博客园张占岭（仓储大叔）的博客，原文链接：JQuery真的不难～第六回 JQ中的异步调用方式，如需转载请自行联系原博主。