ajax实战用法详解

时间：2022-01-28 03:58:09

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

以下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参数详细列表

参数名 类型 描述
url String (默认: 当前页地址) 发送请求的地址。
type String (默认: "GET") 请求方式 ("POST" 或 "GET")， 默认为 "GET"。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。
timeout Number 设置请求超时时间（毫秒）。此设置将覆盖全局设置。
async Boolean (默认: true) 默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。
beforeSend Function 发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头。XMLHttpRequest 对象是唯一的参数。
function (XMLHttpRequest) {
  this; // the options for this ajax request
}
cache Boolean (默认: true) jQuery 1.2 新功能，设置为 false 将不会从浏览器缓存中加载请求信息。
complete Function 请求完成后回调函数 (请求成功或失败时均调用)。参数： XMLHttpRequest 对象，成功信息字符串。
function (XMLHttpRequest, textStatus) {
  this; // the options for this ajax request
}
contentType String (默认: "application/x-www-form-urlencoded") 发送信息至服务器时内容编码类型。默认值适合大多数应用场合。
data Object,
String		 发 送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。
dataType String

预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息返回 responseXML 或 responseText，并作为回调函数参数传递，可用值:

"xml": 返回 XML 文档，可用 jQuery 处理。

"html": 返回纯文本 HTML 信息；包含 script 元素。

"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。

"json": 返回 JSON 数据 。

"jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
error Function (默认: 自动判断 (xml 或 html)) 请求失败时将调用此方法。这个方法有三个参数：XMLHttpRequest 对象，错误信息，（可能）捕获的错误对象。
function (XMLHttpRequest, textStatus, errorThrown) {
  // 通常情况下textStatus和errorThown只有其中一个有值 
  this; // the options for this ajax request
}
global Boolean (默认: true) 是否触发全局 AJAX 事件。设置为 false 将不会触发全局 AJAX 事件，如 ajaxStart 或 ajaxStop 。可用于控制不同的Ajax事件
ifModified Boolean (默认: false) 仅在服务器数据改变时获取新数据。使用 HTTP 包 Last-Modified 头信息判断。
processData Boolean (默认: true) 默认情况下，发送的数据将被转换为对象(技术上讲并非字符串) 以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。
success Function 请求成功后回调函数。这个方法有两个参数：服务器返回数据，返回状态
function (data, textStatus) {
  // data could be xmlDoc, jsonObj, html, text, etc...
  this; // the options for this ajax request
}

 

标签：

相关文章