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)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
