jQuery ajax源码解析

jquery.unobtrusive-ajax.js源码阅读1 2 3 4 5 6 7 8 9101112131415161718192021222324252627282930313233343536373839404142 /*!** Unobtrusive Ajax support library for jQuery** Copyright (C) Microsoft Corporation. All rights reserved.*//*jslint white: true, browser: true, onevar: true, undef: true, nomen: true, eqeqeq: true, plusplus: true, bitwise: true, regexp: true, newcap: true, immed: true, strict: false *//*global window: false, jQuery: false *//*data-ajax=true //开启绑定data-ajax-mode//更新的形式 BEFORE插入到对象之前 AFTER插入到对象之后为空就是覆盖data-ajax-update//更新的对象data-ajax-confirm//设置一个确定取消弹出框的文字，没有则不设置data-ajax-loading//显示loading的对象data-ajax-loading-duration//持续时间默认是0data-ajax-method//提交方式data-ajax-url//提交urldata-ajax-begin//ajax前触发的函数或者一段程序data-ajax-complete//完成后，此时还没有加载返回的数据，请求成功或失败时均调用data-ajax-success//成功，加载完成的数据data-ajax-failure//失败*/(function ($) {var data_click = "unobtrusiveAjaxClick",data_validation = "unobtrusiveValidation";//第二核心，判断是否函数，不是则构造一个匿名函数function getFunction(code, argNames) {var fn = window, parts = (code || "").split(".");while (fn && parts.length) {fn = fn[parts.shift()];}//查找函数名有时候是命名空间比如xxx.xxxif (typeof (fn) === "function") {return fn;}argNames.push(code);//如果不是函数对象则自己构造一个并返回，吊！return Function.constructor.apply(null, argNames);}function isMethodProxySafe(method) {return method === "GET" || method === "POST";4344454647484950515253545556575859606162636465666768697071727374757677787980818283848586 }//可以添加各种提交方式，应该是为Web Api做的补充function asyncOnBeforeSend(xhr, method) {if (!isMethodProxySafe(method)) {xhr.setRequestHeader("X-HTTP-Method-Override", method);}//注：X-HTTP-Method-Override是一个非标准的HTTP报头。

jq ajax 写法在使用jQuery 的Ajax 功能发送异步请求时，可以使用$.ajax() 方法。

以下是一个常见的jQuery Ajax 的写法示例：javascriptCopy Code$.ajax({url: 'your-url', // 请求的URLmethod: 'POST', // 请求方法，可以是GET、POST等data: { key1: 'value1', key2: 'value2' }, // 请求参数dataType: 'json', // 服务器返回的数据类型，这里设置为JSONsuccess: function(response) {// 请求成功时的回调函数console.log(response); // 输出服务器返回的数据},error: function(xhr, status, error) {// 请求失败时的回调函数console.log(error); // 输出错误信息}});在上述代码中，使用$.ajax() 方法发送一个POST 请求到指定的URL，并传递一些参数。

url 属性指定请求的URL，method 属性指定请求的方法（如GET 或POST），data 属性指定请求的参数。

dataType 属性指定了服务器返回的数据类型，这里设置为JSON。

success 属性指定了请求成功时的回调函数，当服务器成功返回数据时，该函数会被调用。

在示例中，我们将返回的数据打印到控制台。

error 属性指定了请求失败时的回调函数，当请求发生错误时，该函数会被调用。

在示例中，我们将错误信息打印到控制台。

你可以根据自己的需求修改示例代码中的URL、请求方法、参数和回调函数，以及处理返回数据的逻辑。

通过JQuery的Ajax调用一般处理程序通过JQuery的Ajax调用一般处理程序前言：本示例大概功能是前台通过JQuery的Ajax调用一般处理程序(Handler)，获取表格需要显示的信息，然后转换成json格式返回给前台，前台获取到数据后循环构建表格的行，最好把行附加到表里。

目标：a熟悉简单JQueryAjax的使用b了解如何构造基本的`Json格式的数据（构建Json也可以通过第三方的dll）c熟悉下handler的基本用法1简单效果图2前台代码<%@page=""language="C#"autoeventwireup="true"codefile="D ialogAjax.aspx.cs"inherits="JQueryTest_DialogAjax">3Handler代码<%@webhandler=""language="C#"class="TestHandler">usingSy stem;usingSystem.Web;usingSystem.Collections.Generic;usingS ystem.Text;usingDataDAL;usingDataEnity;publicclassTestHandl er:IHttpHandler{HttpRequestRequest;HttpResponseResponse;pub licvoidProcessRequest(HttpContextcontext){//不让浏览器缓存context.Response.Buffer=true;context.Response.ExpiresAbsolu te=DateTime.Now.AddDays(-1);context.Response.AddHeader("pragma","no-cache");context.Response.AddHeader("cache-control","");context.Response.CacheControl="no-cache";context.Response.ContentType="text/plain";Request=co ntext.Request;Response=context.Response;stringmethod=Reques t["Method"].ToString();System.Reflection.MethodInfomethodIn fo=this.GetType().GetMethod(method);methodInfo.Invoke(this, null);}publicvoidGetModuleInfo(){StringBuildersb=newStringB uilder();stringjsonData=string.Empty;ListlsModule=ModuleDAL .GetModuleList();sb.Append("{"Module":[");for(inti=0;i<lsMo dule.Count;i++){jsonData="{"ModuleNum":"+"""+lsModule[i].Mo duleNum+"""+","ModuleName":"+"""+lsModule[i].ModuleName+""" +","ModuleDes":"+"""+lsModule[i].ModuleDes+"""+"},";sb.Appe nd(jsonData);}if(lsModule.Count>0)sb=sb.Remove(sb.Length-1,1);sb.Append("]}");Response.Write(sb);}publicboolIsReusab le{get{returnfalse;}}}以上代码超简单吧，JQueryAjax动态生成Table表格的内容就全部完成了，希望对大家有所帮助。

JQuery中的AJAX详解目录(?)[-]load()方法load(url,[data],[callback])url为被加载的页面地址data表示发送到服务器的数据，格式为key/valuecallback格式为：function(responseText,textStatus,XMLHttpRequest){ }//responseText:请求返回的内容//textStatus:请求状态：success、error、notmodified、timeout这4种//XMLHttpRequest:XMLHttpRequest对象load()方法的传递方式根据参数data来自动指定。

如果没有参数传递，则采用GET方式传递；反之，则自动转换为POST 方式[javascript]view plaincopyprint?1.$("#div1").load(2."jsp/feed.jsp", //如果为" jsp/feed.jsp .filterClass"，则表示获取jsp页面中类名为filterClass的全部元素3.{4. name ：clf, age : 255.//经测试，变量名加引号、单引号、不加引号，后台都能取到值6.//如果含有中文，必须用encodeURI()进行编码，然后再服务器端用decodeURI()解码即可，如7.// {name:encodeURI($("#uName").val()),"password":$("#uPassword").val()},8.}, //也可以用数组传值，{"attr []",["clf","25","male"]}9.function (){10. $("#div2").text("AJAX");11.}12.);[javascript]view plaincopyprint?1.$("div").load("wrongname.xml",function(response,status,xhr){2.if (status=="success")3. {4. $("div").html("<ol></ol>");5. $(response).find("artist").each(function(){6. <span style="white-space:pre"> </span>varitem_text = $(this).text();7. <span style="white-space:pre"> </span>$('<li></li>').html(item_text).appendTo('ol');8. <span style="white-space:pre"> </span> });9. }10.else11. {12. $("div").html("Anerror occured: <br/>" + xhr.status + " " + xhr.statusText)13. }14. });getJSON()方法getJSON(url,[data],[callback])callback格式为function(data,textStatus) { }data是一个返回的json对象[javascript]view plaincopyprint?1.$.getJSON("test.js",{ name: "John", time: "2pm" }, function(json){2. alert("JSON Data: " +ers[3].name);3.});getScript()方法getScript(url,[callback])callback格式为function(response,status)response - 包含来自请求的结果数据status - 包含请求的状态（"success","notmodified", "error", "timeout" 或"parsererror"）通过此函数注入的脚本会自动执行get()方法get(url,data,callback(response,status,xhr),dataType)dataType可能的类型："xml"、"html" 、"text"、"script"、"json"、"jsonp"get() 方法通过远程HTTPGET 请求载入信息。