ajax实战用法详解

标签：

谦虚使人进步，总结使人提高！

以下5个方法执行一般Ajax请求的简短形式，在处理复杂的Ajax请求时应该使用jQuery.ajax()

1.load(url,[data],[callback])
载入远程HTML文件代码并插入至DOM中，默认使用GET方式，传递参数时自动转换为POST方式。

示例代码如下：
//无参数、无回调函数
$("#showload").load("load.htm");
//无回调函数
$("#showload").load("load.htm", { "para": "para-value" });
$("#showload").load("load.htm", { "para": "para-value" },
function() {
//处理
})

2.jQuery.get(url, [data], [callback])
使用get方式从服务器端获取数据。

$.get("jqueryget.htm", { "id": this.id },
function(req) {
//成功时的回调方法
$("#showget").html(req);
});
})

3.jQuery.post(url, [data], [callback])
使用POST方式来进行异步请求。同jQuery.get()相比，差别在于请求的方式，所以这里不做特别的说明了，使用方法同jQuery.get()相似。

4.jQuery.getScript(url,[callback])
通过 GET 方式请求载入并执行一个JavaScript文件。这个技术在前边文章中已经提到过，也是jQuery.ajax的一种简单的使用方法，可以看看ajax加载js，所以在这里也不做特别的说明了。

5.jQuery.getJSON(url,[data],[callback])
通过get方式获取json格式的数据。

示例代码如下：
$.getJSON("http://api.baidu.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?", function(req) {
$.each(req.items, function(i, item) {
if (i == vnum) {
$("<img src="" + item.media.m + "" title="" + item.title + "" />").appendTo("#showjson");
}
});
});

6.jQuery.ajax()
使用jQuery.ajax()方法获取数据，下边给个常用写法，并做了相应的注释。
//代码如下
$.ajax({
url: "http://www.cnblogs.com", //请求的url地址
dataType: "json", //返回格式为json
async: true, //请求是否异步，默认为异步，这也是ajax重要特性
data: { "id": "value" }, //参数值
type: "GET", //请求方式
beforeSend: function() {
//请求前的处理
},
success: function(req) {
//请求成功时处理
},
complete: function() {
//请求完成的处理
},
error: function() {
//请求出错处理
}
});

实际应用：

<script>
$(document).ready(function() {
    //$("#img").load("/weixin/act/act4.php");
    //$(‘#myimg‘).load("http://www.163.com/newsapp/#f=toplogo");
    //jQuery("#clearCac").click(function() {
    jQuery.ajax({
        //url: "/handle/do.php",    
        url: "ajax_act.php?type=user",
        //type用get时要注意缓存，URL+"&"+"t="+Math.random();或new Date();
        type: "post",
        //get去缓存的一个办法就是 cache:false,而post因为参数不同，不会产生缓存问题。
        cache:false,
        //data: { id: ‘0‘ },
        data: { "uid":‘oZE7SjqjC_A41aGfaj_X8tJDCGEQ‘},
        dataType: "json",
        //防止乱码是需要加上 charset=UTF-8 或别的编码
        contentType: "application/x-www-form-urlencoded; charset=UTF-8",
        //请求前的处理。
        beforeSend:function(){
            //alert("before:show loading");
            },
        //请求成功时处理。注意连接成功才会有返回值
        success: function(msg) {
            //alert("msg:"+msg);
            $(‘#msg‘).html(msg);
        },
        //请求出错处理。注意：有差错时才执行程序体，才会出现alert弹框
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            //如果没有url中的文件，会报404-未找到
            //alert("status:"+XMLHttpRequest.status);
            //4 － （完成）响应内容解析完成，可以在客户端调用了
            //alert("readyState:"+XMLHttpRequest.readyState);
            //如果发生了错误，错误信息（第二个参数）除了得到null之外，还可能是"timeout", "error", "notmodified" 和 "parsererror"。
            //alert("textStatus:"+textStatus);//error
        },
        //请求完成的处理。不论成功与否，末尾complete都会执行
        complete: function(XMLHttpRequest, textStatus) {
            this; // 调用本次AJAX请求时传递的options参数
            alert("complete textStatus:"+textStatus);//error 或  success
            //alert("complete:hide loading");
        }
    });
    });
    //});
</script>

Jquery中AJAX参数介绍，各个参数各有用法，要彻底理解才能用好！
一、error：function (XMLHttpRequest, textStatus, errorThrown)
(默认: 自动判断 (xml 或 html)) 请求失败时调用时间。参数有以下三个：XMLHttpRequest 对象、错误信息、（可选）捕获的错误对象。

如果发生了错误，错误信息（第二个参数）除了得到null之外，还可能是"timeout", "error", "notmodified" 和 "parsererror"。
textStatus: "timeout", "error", "notmodified" 和 "parsererror"。
二、error事件返回的第一个参数XMLHttpRequest有一些有用的信息：
XMLHttpRequest.readyState:
状态码：
0 － （未初始化）还没有调用send()方法
1 － （载入）已调用send()方法，正在发送请求
2 － （载入完成）send()方法执行完成，已经接收到全部响应内容
3 － （交互）正在解析响应内容
4 － （完成）响应内容解析完成，可以在客户端调用了
三、data:"{}", data为空也一定要传"{}"；不然返回的是xml格式的。并提示parsererror.
四、parsererror的异常和Header 类型也有关系。及编码header(‘Content-type: text/html; charset=utf8‘);
五、XMLHttpRequest.status:略

附：Jquery中AJAX参数详细列表

function (XMLHttpRequest) {
  this; // the options for this ajax request
}

function (XMLHttpRequest, textStatus) {
  this; // the options for this ajax request
}

function (XMLHttpRequest, textStatus, errorThrown) {
  // 通常情况下textStatus和errorThown只有其中一个有值 
  this; // the options for this ajax request
}

function (data, textStatus) {
  // data could be xmlDoc, jsonObj, html, text, etc...
  this; // the options for this ajax request
}

ajax实战用法详解

标签：

原文地址：http://www.cnblogs.com/wellsoho/p/4978218.html