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

(12)、jsonp (String) : 在一个jsonp请求中重写回调函数的名字。这个值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分,比如{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。

(13)、password (String) : 用于响应HTTP访问认证请求的密码

(14)、processData (Boolean) : (默认: true) 默认情况下,发送的数据将被转换为对象(技术上讲并非字符串) 以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息,请设置为 false。

(15)、scriptCharset (String) : 只有当请求时dataType为"jsonp"或"script",并且type是"GET"才会用于强制修改charset。通常在本地和远程的内容编码不同时使用。

(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:上述红色标出的部分是大多数ajax调用常用的参数设置,利用这几个参数就可以成功实现ajax调用了.

示例

//jQTest.js function jqAjaxTest() { var jqRequestUrl = "AjaxHandler.ashx"; //1、 加载并执行一个 JS 文件 $.ajax({ type: "GET", url: "js/jqLoadJs.js", dataType: "script" }); //2、装载一个 HTML 网页最新版本 $.ajax({ url: "test.htm", cache: false, //没有缓存的说 success: function(html) { //alert(html); $("#spanGetHtml").css("display", "block"); $("#spanGetHtml").css("color", "red"); $("#spanGetHtml").append(html); } }); //3、获取并解析一个xml文件(从服务端获取xml) $.ajax({ type: 'GET', dataType: 'xml', //这里可以不写,但千万别写text或者html url: jqRequestUrl + "?action=jquerGetXmlRequest", success: function(xml) { //正确解析服务端的xml文件 $(xml).find("profile").each(function(i) { var name = $(this).children("userName").text(); //取对象文本 var location = $(this).children("location").text(); alert("Xml at SERVER is gotten by CLIENT:" + name + " is living in " + location); }); }, error: function(xml) { alert('An error happend while loading XML document '); } }); //4、发送 XML 数据至服务器(客户端发送xml到服务端) var xmlDocument = "<profile>" + " <userName>jeff wong</userName>" + " <location>beijing</location>" + "</profile>"; $.ajax({ url: jqRequestUrl + "?action=jqueryXmlRequest", processData: false, //设置 processData 选项为 false,防止自动转换数据格式。 //type: "xml", cache: false, type: "xml", data: xmlDocument, success: function(html) { alert(html); //弹出提示 $("#spanResult").css("display", "block"); $("#spanResult").css("color", "red"); $("#spanResult").html(html); //给当前dom的一个span元素赋值 }, error: function(oXmlHttpReq, textStatus, errorThrown) { alert("jquery ajax xml request failed"); $("#spanResult").css("display", "block"); $("#spanResult").css("color", "red"); $("#spanResult").html("jquery ajax xml request failed"); //提示出错 } }); //5、同步加载数据。发送请求时锁住浏览器。需要锁定用户交互操作时使用同步方式。 var html = $.ajax({ //没有type 默认为GET方式 url: jqRequestUrl + "?action=syncRequest", async: false }).responseText; alert(html); //6、显式get测试 $.ajax({ type: "GET", url: jqRequestUrl + "?action=jquery&userName=" + $("#txtUserName").val(), cache: false, success: function(html) { // alert(html); //弹出提示 $("#spanResult").css("display", "block"); $("#spanResult").css("color", "red"); $("#spanResult").html(html); //给当前dom的一个span元素赋值 }, error: function(oXmlHttpReq, textStatus, errorThrown) { alert("jquery ajax request failed"); $("#spanResult").css("display", "block"); $("#spanResult").css("color", "red"); $("#spanResult").html("jquery ajax request failed"); //提示出错 } }); //7、显式POST测试 $.ajax({ type: "POST", url: jqRequestUrl, data: "action=jquerySaveData&userName=jeffwong&location=beijing", success: function(html) { alert(html); } }); }

几个相关文件:

a、处理ajax请求的服务端文件:AjaxHandler.ashx,对应的cs文件:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgzgwd.html