jQuery：AJAX知识点及async同步异步的区别

举个栗子
alert("setp 1");
$.ajax({
url: "admin/PfmOptionRuleItem.do",
async: false,
success: function(data){ alert("hello ajax"); //① }
});
alert("setp 2"); //②

当把asyn设为false时，这时ajax的请求时同步的，也就是说，这个时候ajax块发出请求后，

他会等待在①这个地方，不会去向下执行②，直到①执行完毕

此时依次执行顺序为

setp 1

hello ajax

setp 2

如果async为true 则执行顺序为

setp 1

setp 2

hello ajax

async，默认设置下async为true，所有请求均为异步请求。

-------------------------------------------------------------

$.ajax()　　最底层的jQuery AJAX函数

语法：$.ajax([options])　　其中[options]为可选参数，对应的意思参见下表。

参数名　　类型　　　　描述　　　　

url　　　 String　　发送请求的地址

type　　 String　　数据请求方式(post或get),默认为get

data　　 String　发送到服务器上的数据，如果不是字符

串格式则自动转i字符串格式，get方法则

附在html请求地址后面。

dataType　String　　服务器返回的数据类型，如果不指定，

jQuery自动根据HTTP包判断。

可为:html、script、text、xml、json。

beforeSend　Function　该函数用于发送请求前修改XMLHttpRequest

对象。其中参数就是XMLHttpRequest对象，

由于该函数本身是jQuery事件，因此，

如果函数返回false，则表示取消本次事件。

complete　Function　请求完成后调用的回调函数，该函数无论数据发

送成功或失败都会调用，该函数有两个参数，

一个是XMLHttpRequest对象，另一个是strStatus，

用于描述成功请求类型的字符串。

success　 Function　　请求成功后调用的回调函数，该函数有三个参数。

第一个是XMLHttpRequest对象，第二个是strError，

第三个是捕捉到的错误对象strObject

error　 Function　　请求失败后调用的回调函数，该函数有三个参数，

第一个是XMLHttpRequest对象，第二个是出错信息strError，

第三个是捕捉到的错误对象strObject。

timeout　Number　请求超时的时间(毫秒)，该设置将覆盖$.ajaxSetup()

方法中同样的设置。

global　 Boolean　　是否相应全局事件，默认是true,表示响应，如果设置成false,

表示不响应，那么全局事件$.ajaxStart等将不响应。例如：全局

时间设定了清除缓存 $.ajaxSetup({ cache:false; });

但启动了global:false;将忽略全局中的设置,继续使用缓存，

同时不触发全局事件。

async　 Boolean　是否为异步请求，默认是true,表示是异步，如果设置成false，

表示是同步请求。

cache Boolean　是否进行页面缓存，true表示进行缓存，false表示

不进行页面缓存。　　

traditional　Boolean 是否使用传统的方式传递参数。目前知道的默认

传递数组，后面会加[]。

前台JS代码：

        $(function () {
            $("#btnLogin").click(function () {
                $.ajax({
                    url: "userinfo.aspx",
                    dataType: "html",
                    data: {
                        txtName: encodeURI($("#txtName").val()),
                        txtPass: encodeURI($("#txtPass").val())
                    },
                    success: function (response) {
                        alert(response.length);
                        if (response == "True") {
                            $(".clsShow").html("登录成功");
                        }
                        else {
                            $("#divError").html("用户名或密码错误");
                        }
                    }
                })
            })
        })

参数名	类型	描述
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;//theoptionsforthisajaxrequest}
cache	Boolean	(默认:true)jQuery1.2新功能，设置为false将不会从浏览器缓存中加载请求信息。
complete	Function	请求完成后回调函数(请求成功或失败时均调用)。参数：XMLHttpRequest对象，成功信息字符串。 function(XMLHttpRequest,textStatus){this;//theoptionsforthisajaxrequest}
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;//theoptionsforthisajaxrequest}
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){//datacouldbexmlDoc,jsonObj,html,text,etc...this;//theoptionsforthisajaxrequest}

jQuery的Ajax状态码

　　"success":请求已成功完成

　　"notmodified":请求已正常完成，但服务器返回的响应内容是HTTP304 "Not Modified"

　　"error":请求没有成功完成，原因是某些HTTP错误

　　"timeout":如果Ajax请求没有指定的超时区间内完成，会调用错误回调，并传入该状态码

　　"parsererror":HTTP请求已经完成，但jQuery无法按照期望的方式解析。

例如服务器响应的是不符合格式的xml文档或不符合格式的JSON文本时，就会出现该状态码

dataType的选项列表

　　"text"　　将服务器的响应作为纯文本返回，不做任何处理。

　　"html"　　该类型与"text"一样，响应是纯文本。load()方法使用该类型，

将返回的文本插入到文档自身中。

　　"xml"　　请求的URL被认为指向XML格式的数据，jQuery使用xmlHttpRequest

对象的responseXML属性来替代responseText属性，传给回调函数的

值是一个表示该XML文档的Document对象，而不是保存文档文本的字符串。

　　"script"　请求的URL被认为指向javascript文件，返回的文本在传入回调函数前，

会被当做脚本执行。$.getScript()使用该类型。

　　"json"　　请求的URL被认为指向JSON格式的数据文件，会使用

jQuery.parseJSON()来解析返回的内容(parseJSON是把JSON转成对象的。)，

得到JSON对象后才传入回调函数。jQuery.getJSON()使用该类型。

如果类型是"json"，同时URL或数据字符串含有"=?"。该类型会被转成"jsonp"。

　　"jsonp"　请求的URL被认为指向服务器脚本，该脚本支持"jsonp"协议，

可以将JSON格式的数据作为参数传递给客户端指定的函数。

如果调用$.get(),$.post(),$.ajax()函数时没有指定以上类型中的任何一个，则jQuery会检查HTTP响应中的Content-type头。如果该头部信息包含"xml"字符串，则传入回调函数中的是XML文档，如果头部包含"json"字符串，则数据被解析成JSON并把解析后的对象传给回调函数。如果头部含有"javascript"字符串，则数据被当做脚本执行。如果以上都不符合，则数据会被当做纯文本处理。

同步ajax（前台代码如下）：

<!DOCTYPE html>
<html>
<head>
    <title>同步AJAX</title>
    <script src="/Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
 $(function () {
 var str;
 $.ajax({
 url: "/Home/GetName",
 dataType: "text",
 type: "post",
 success: function (response) {
 str = response;　　//此行代码后执行
 }
 })
  alert(str);　　//此行代码先执行
 })
 </script>
</head>
</html>

　　猜下以上代码弹出什么？

　　弹出如下：

　　为什么呢？需要特别注意AJAX是异步，因为有可能后面的alert弹出代码比前面的success函数的代码先执行，此时str还没有被赋值。

　　如果想获取到值怎么办？这就要留意到jQuery提供的另一个重要属性啦。async，默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。

　　因此修改一下就正确了：

    <script type="text/javascript">
 $(function () {
 var str;
 $.ajax({
 url: "/Home/GetName",
 dataType: "text",
 async: false,
 type: "post",
 success: function (response) {
 str = response;
 }
 })
  alert(str);
 })
 </script>

　　显示结果如下：

jQuery AJAX传递数组

jQuery AJAX传递数组时，会在参数后面增加[]，这个问题可以通过扩展ModleBinder解决，也可以将数组转为字符串，然后后台再split解决。但是感觉都不爽，仅仅这样一个小问题，就需要这么多的操作，有没有更好的方法呢？经检查，发现根本原因在于jQuery，是jQuery在后面增加了[]，据说是为了适应PHP，如果不希望增加这样一个[]，那只需要增加一个属性。

        $(function () {
  var ids = [28,29];
 alert(typeof (ids));
 $.ajax({
 url: "/Home/Index",
 type: "post",
 dataType: "text",
 data: {
  id: ids
 },
 success: function (response) {
 alert(123);
 }
 })
 })

　　增加属性后：

        $(function () {
  var ids = [28,29];
 alert(typeof (ids));
 $.ajax({
 url: "/Home/Index",
 type: "post",
 dataType: "text",
 traditional:true,
 data: {
  id: ids
 },
 success: function (response) {
 alert(123);
 }
 })
 })

　　提交的参数：

更多相关文章

随机推荐