Write your own JavaScript library of Ajax (in the form of jquery)

Source: Internet
Author: User

I am learning PHP, so I use PHP and JS to demonstrate the code, mainly to exercise their ability to write JS, practice practiced hand just.


Here's what I've written to do with Ajax code, which I'm barely allowed to call a library.

JS code example (tool.ajax.js):

1 /**2 * JS Library using AJAX3 * @author jlb4  */5 if (typeof tool = = ' undefined ') {6 var tool = function () {};7 }8 Tool.ajax = function () {};9 Ten  One /** A * Get Ajax objects - * @return successfully returned Ajax object -  */ the tool.ajax.getAjaxObject = function () { - Try{return New XMLHttpRequest ()}catch (e) {} - Try{return New Activexoject (' Microsoft.XMLHTTP ')}catch (e) {} - alert (' Your browser version is too low! Please upgrade your browser '); + } -  +  A /** at * Ajax Submission Data - * @param parameter list - * @return void -  */ - tool.ajax.formSubmit = function (options) { - var allow_param,//list of allowed parameters in HTTP,//ajax object - URL,//requested address to data; Data to carry +  - Allow_param = [' method ', ' url ', ' Data ', ' success ', ' type ']; the //Set default values * if (!options[' type ']) { $ options[' type '] = = ' text ';Panax Notoginseng     } -  the //processing URLs and data, merging data with URLs + var disposeparam = function (list) { A var data = {url:list[' url '],data: '}; the if (list[' method '] = = ' get ') { + data[' data ' + = '? '; - For (var i in list[' data ') { $ data[' data ' + = i + ' = ' + list[' data '][i] + ' & '; $             } -         } - if (list[' method '] = = ' post ') { the For (var i in list[' data ') { - data[' data ' + = i + ' = ' + list[' data '][i] + ' & ';Wuyi             } the         } - Return Data Wu     } - data = Disposeparam (options); About HTTP = Tool.ajax.getAjaxObject (); $ //ajax callback function - Http.onreadystatechange = function () { - if (http.readystate = = 4 && Http.status = =) { - if (options[' type '] = = ' text ') { A options[' success '] (Http.responsetext); +             } the else if (options[' type '] = = ' json ') { - options[' Success ' (eval (' (' + http.responsetext + ') '); $             } the         } the     } the  the if (options[' method '] = = ' get ') { - url = data[' url '] + data[' data '); in Http.open (options[' method '],url); the //Set the request header to resolve the Get commit cache problem by modifying the file last modified time resolved the http.setrequestheader (' If-modified-since ', 0); About http.send (null); the return; the     } the      + if (options[' method '] = = ' post ') { - Http.open (options[' method '], data[' url '); the //Set the request headerBayi http.setrequestheader (' Content-type ', ' application/x-www-form-urlencoded '); the http.send (data[' data '].replace (/(&*$)/g, ')); the return; -     } -}

Use instance (ajax_test.html):

1 <!DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd ">2 <HTMLLang= "en">3 <Head>4     <Metahttp-equiv= "Content-type"content= "Text/html;charset=utf-8">5     <title>Simple AJAX feature Library usage examples</title>6 </Head>7 <Body>8     <!--introduction of well-written tool.ajax.js files -9     <Scriptsrc= "Tool.ajax.js"></Script>Ten     <Script> One         //ajax_test.html A         -         //Ajax request in imitation of jquery style -         varOptions= { the URL:"ajax_test.php", //the requested script address - Method:"Get", //is GET or post, note must be lowercase oh. Too lazy to turn ... - data: {name:"Mo asked the source ,", Age: -}, //data to be carried, supported only in JSON format - Success:function(msg) {//after the request is complete, the callback function : + alert (msg); -             }, + Type:'text', //The default is text, which means that the callback function carries data that is a string. The other is JSON. A         }; at          - tool.ajax.formSubmit (options); -     </Script> - </Body> - </HTML>

The script code for the AJAX request (ajax_test.php):

1 <? PHP 2 // ajax_test.php 3 Echo "Name: {$_get[' Name '}}: {$_get[' Age ']}";

In the browser open ajax_test.html this file, the browser displays:

Name: Mo-Q Source, age: 20

If the returned data is in JSON format, change the value of the Type property in option to JSON

If you have any questions, please leave a comment on my blog, the first time to write a little excitement. This rookie has taken the first step.

Write your own JavaScript library of Ajax (in the form of jquery)

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.