AJax技术

jQuery学习笔记之Ajax用法详解(2)

字号+ 作者:H5之家 来源:H5之家 2017-11-18 09:08 我要评论( )

(16)、success (Function): 请求成功后的回调函数。参数:由服务器返回,并根据dataType参数进行处理后的数据;描述状态的字符串。 Ajax 事件。 function (data, textStatus) { // data 可能是 xmlDoc, jsonObj,

    (16)、success (Function): 请求成功后的回调函数。参数:由服务器返回,并根据dataType参数进行处理后的数据;描述状态的字符串。 Ajax 事件。

      function (data, textStatus) {       // data 可能是 xmlDoc, jsonObj, html, text, 等等       this; // 调用本次AJAX请求时传递的options参数       }

    (17)、timeout (Number): 设置请求超时时间(毫秒)。此设置将覆盖全局设置。

    (18)、type (String): (默认: "GET") 请求方式 ("POST" 或 "GET"), 默认为 "GET"。注意:其它 HTTP 请求方法,如 PUT 和 DELETE 也可以使用,但仅部分浏览器

        支持。

    (19)、url (String): (默认: 当前页地址) 发送请求的地址。

    (20)、username (String) : 用于响应HTTP访问认证请求的用户名

    (21)、xhr (Function) : 需要返回一个XMLHttpRequest 对象。默认在IE下是ActiveXObject 而其他情况下是XMLHttpRequest 。用于重写或者提供一个增强的

        XMLHttpRequest 对象。这个参数在jQuery 1.3以前不可用。

    ps:上述的部分是urltypedataTypedatasuccess调用常用的参数设置,利用这几个参数就可以成功实现ajax调用了.

    示例

1 //jQTest.js 2 function jqAjaxTest() { 3 var jqRequestUrl = "AjaxHandler.ashx"; 4 //1、 加载并执行一个 JS 文件 5 $.ajax({ 6 type: "GET", 7 url: "js/jqLoadJs.js", 8 dataType: "script" 9 }); 10 //2、装载一个 HTML 网页最新版本 11 $.ajax({ 12 url: "test.htm", 13 cache: false, //没有缓存的说 14 success: function(html) { 15 //alert(html); 16 $("#spanGetHtml").css("display", "block"); 17 $("#spanGetHtml").css("color", "red"); 18 $("#spanGetHtml").append(html); 19 } 20 }); 21 //3、获取并解析一个xml文件(从服务端获取xml) 22 $.ajax({ 23 type: 'GET', 24 dataType: 'xml', //这里可以不写,但千万别写text或者html 25 url: jqRequestUrl + "?action=jquerGetXmlRequest", 26 success: function(xml) { 27 //正确解析服务端的xml文件 28 $(xml).find("profile").each(function(i) { 29 var name = $(this).children("userName").text(); //取对象文本 30 var location = $(this).children("location").text(); 31 alert("Xml at SERVER is gotten by CLIENT:" + name + " is living in " + location); 32 }); 33 }, 34 error: function(xml) { 35 alert('An error happend while loading XML document '); 36 } 37 }); 38 //4、发送 XML 数据至服务器(客户端发送xml到服务端) 39 var xmlDocument = "<profile>" + 40 " <userName>jeff wong</userName>" + 41 " <location>beijing</location>" + 42 "</profile>"; 43 $.ajax({ 44 url: jqRequestUrl + "?action=jqueryXmlRequest", 45 processData: false, //设置 processData 选项为 false,防止自动转换数据格式。 46 //type: "xml", 47 cache: false, 48 type: "xml", 49 data: xmlDocument, 50 success: function(html) { 51 alert(html); //弹出提示 52 $("#spanResult").css("display", "block"); 53 $("#spanResult").css("color", "red"); 54 $("#spanResult").html(html); //给当前dom的一个span元素赋值 55 }, 56 error: function(oXmlHttpReq, textStatus, errorThrown) { 57 alert("jquery ajax xml request failed"); 58 $("#spanResult").css("display", "block"); 59 $("#spanResult").css("color", "red"); 60 $("#spanResult").html("jquery ajax xml request failed"); //提示出错 61 } 62 }); 63 //5、同步加载数据。发送请求时锁住浏览器。需要锁定用户交互操作时使用同步方式。 64 var html = $.ajax({ 65 //没有type 默认为GET方式 66 url: jqRequestUrl + "?action=syncRequest", 67 async: false 68 }).responseText; 69 alert(html); 70 //6、显式get测试 71 $.ajax({ 72 type: "GET", 73 url: jqRequestUrl + "?action=jquery&userName=" + $("#txtUserName").val(), 74 cache: false, 75 success: function(html) { 76 // alert(html); //弹出提示 77 $("#spanResult").css("display", "block"); 78 $("#spanResult").css("color", "red"); 79 $("#spanResult").html(html); //给当前dom的一个span元素赋值 80 }, 81 error: function(oXmlHttpReq, textStatus, errorThrown) { 82 alert("jquery ajax request failed"); 83 $("#spanResult").css("display", "block"); 84 $("#spanResult").css("color", "red"); 85 $("#spanResult").html("jquery ajax request failed"); //提示出错 86 } 87 }); 88 //7、显式POST测试 89 $.ajax({ 90 type: "POST", 91 url: jqRequestUrl, 92 data: "action=jquerySaveData&userName=jeffwong&location=beijing", 93 success: function(html) { 94 alert(html); 95 } 96 }); 97 }

2、load(url,[data],[callback])

  载入远程 HTML 文件代码并插入至 DOM 中。

  默认使用 GET 方式 - 传递附加参数时自动转换为 POST 方式。jQuery 1.2 中,可以指定选择符,来筛选载入的 HTML 文档,DOM 中将仅插入筛选出的 HTML 代码。语法形如 "url #some > selector"。

  返回值 jQuery

  参数

    url (String) : 待装入 HTML 网页网址。

    data (Map,String): (可选) 发送至服务器的 key/value 数据。在jQuery 1.3中也可以接受一个字符串了。

    callback (Callback): (可选) 载入成功时回调函数。

  示例

1 function jqAjaxTest() { 2 $("#spanResult").load("test.htm"); 3 $("#spanResult").css("display", "block"); 4 $("#spanResult").css("color", "red"); 5 }

3、jQuery.get(url,[data],[callback],[type])

  通过远程 HTTP GET 请求载入信息。

  这是一个简单的 GET 请求功能以取代复杂 .ajax。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用.ajax。

  返回值 XMLHttpRequest

  参数

    url (String) : 待载入页面的URL地址

    data (Map): (可选) 待发送 Key/value 参数。

    callback (Function) : (可选) 载入成功时回调函数。

    type (String) : (可选) 返回内容格式,xml, html, script, json, text, _default。

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • News: Ajax and JQuery autocomplete integration with Spring M

    News: Ajax and JQuery autocomplete integration with Spring M

    2017-11-17 18:00

  • Laravel+jQuery实现AJAX分页效果

    Laravel+jQuery实现AJAX分页效果

    2017-11-16 08:06

  • jQuery AJAX异步请求访问和加载片段视频教程

    jQuery AJAX异步请求访问和加载片段视频教程

    2017-11-14 17:00

  • javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】

    javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】

    2017-11-13 13:00

网友点评