Jquery. unobtrusive-ajax.js source code reading, jquery. unobtrusive

Source: Internet
Author: User

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!

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.