Jquery. unobtrusive-ajax.js source code reading, jquery. unobtrusive
/*! ** 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 // enable Binding data-ajax-mode // The updated form BEFORE is empty AFTER it is inserted into the object. Is to overwrite the data-ajax-update // updated object data-ajax-confirm // set a text in the confirm to cancel the pop-up box, if not, do not set data-ajax-loading // display the loading object data-ajax-loading-duration // The default duration is 0data-ajax-method // The data-ajax-url submission method // after you submit a function triggered before urldata-ajax-begin // ajax or a program data-ajax-complete, at this time, no returned data has been loaded. If the request succeeds or fails, data-ajax-success is called. // The request is successful, loaded data-ajax-failure // failed */(function ($) {var data_click = "unobtrusiveAjaxClick", data_validation = "unobtrusiveVal Idation "; // second core, judge whether a function is used. If not, construct an anonymous function getFunction (code, argNames) {var fn = window, parts = (code | ""). split (". "); while (fn & parts. length) {fn = fn [parts. shift ()];} // find the function name. Sometimes it is a namespace such as xxx. xxx if (typeof (fn) = "function") {return fn;} argNames. push (code); // if it is not a function object, construct one and return it! Return Function. constructor. apply (null, argNames);} function isMethodProxySafe (method) {return method = "GET" | method = "POST ";} // you can add various submission methods. This should be a complementary function asyncOnBeforeSend (xhr, method) {if (! IsMethodProxySafe (method) {xhr. setRequestHeader ("X-HTTP-Method-Override", method);} // Note: X-HTTP-Method-Override is a non-standard HTTP header. // This is designed for clients that cannot send certain HTTP request types (such as PUT or DELETE)} // function asyncOnSuccess (element, data, contentType) {var mode after completion; if (contentType. indexOf ("application/x-javascript ")! =-1) {// jQuery already executes JavaScript for us return;} mode = (element. getAttribute ("data-ajax-mode") | ""). toUpperCase (); $ (element. getAttribute ("data-ajax-update ")). each (function (I, update) {var top; switch (mode) {case "BEFORE": top = update. firstChild; $ ("<div/>" pai.html (data ). contents (). each (function () {update. insertBefore (this, top) ;}); break; case "AFTER": $ ("<div/>" example .html (da Ta ). contents (). each (function () {update. appendChild (this) ;}); break; default: vertex (update0000.html (data); break ;}}) ;}// main function // The bound object and Parameter function asyncRequest (element, options) {var confirm, loading, method, duration; confirm = element. getAttribute ("data-ajax-confirm"); if (confirm &&! Window. confirm (confirm) {return;} loading = $ (element. getAttribute ("data-ajax-loading"); // duration = element. getAttribute ("data-ajax-loading-duration") | 0; // The default value is 0 $. extend (options, {type: element. getAttribute ("data-ajax-method") | undefined, url: element. getAttribute ("data-ajax-url") | triggered before undefined, beforeSend: function (xhr) {// ajax. xhr here will be passed out var result using apply below; asyncOnBeforeSend (xhr, Method); // determine whether to add a special submission method result = getFunction (element. getAttribute ("data-ajax-begin"), ["xhr"]). apply (this, arguments); // argument: replaces one of the attribute objects in the function object and stores the parameters. Here, the original parameters are passed out! If (result! = False) {loading. show (duration) ;}return result ;}, complete: function () {loading. hide (duration); getFunction (element. getAttribute ("data-ajax-complete"), ["xhr", "status"]). apply (this, arguments) ;}, success: function (data, status, xhr) {asyncOnSuccess (element, data, xhr. getResponseHeader ("Content-Type") | "text/html"); getFunction (element. getAttribute ("data-ajax-success"), ["data", "statu S "," xhr "]). apply (this, arguments) ;}, error: getFunction (element. getAttribute ("data-ajax-failure"), ["xhr", "status", "error"])}); options. data. push ({name: "X-Requested-With", value: "XMLHttpRequest"}); method = options. type. toUpperCase (); // uppercase if (! IsMethodProxySafe (method) {options. type = "POST"; options. data. push ({name: "X-HTTP-Method-Override", value: method});} // call jquery's ajax $. ajax (options);} function validate (form) {// you can cancel var validationInfo = $ (form ). data (data_validation); return! ValidationInfo |! ValidationInfo. validate | validationInfo. validate () ;}$ (document ). on ("click", "a [data-ajax = true]", function (evt) {evt. preventDefault (); asyncRequest (this, {url: this. href, type: "GET", data: []}) ;}); $ (document ). on ("click", "form [data-ajax = true] input [type = image]", function (evt) {// This is not commonly used var name = evt.tar get. name, $ target = centers (evt.tar get), form = $ target. parents ("form") [0], offset = $ target. Offset (); $ (form ). data (data_click, [{name: name + ". x ", value: Math. round (evt. pageX-offset. left)}, {name: name + ". y ", value: Math. round (evt. pageY-offset. top)}]); setTimeout (function () {$ (form ). removeData (data_click) ;}, 0) ;}); $ (document ). on ("click", "form [data-ajax = true]: submit", function (evt) {var name = evt.tar get. name, form = certificate (evt.tar get ). parents ("form") [0]; $ (form ). data (dat A_click, name? [{Name: name, value: evt.tar get. value}]: []); setTimeout (function () {$ (form ). removeData (data_click) ;}, 0) ;}); $ (document ). on ("submit", "form [data-ajax = true]", function (evt) {var clickInfo = $ (this ). data (data_click) | []; evt. preventDefault (); if (! Validate (this) {return;} asyncRequest (this, {url: this. action, type: this. method | "GET", data: clickInfo. concat ($ (this ). serializeArray () // well written. serialize and splice the form. ajax can be used in the future for convenience.}) ;}( jQuery ));
I have commented out all the comments, and I was taken down by the 180 lines of code. Great!