欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  后端开发

编写自己的javascript功能库之Ajax(仿jquery方式),ajaxjquery_PHP教程

程序员文章站 2022-04-08 18:29:51
...

编写自己的javascript功能库之Ajax(仿jquery方式),ajaxjquery

本人学习的是php,所以就用php跟js来演示代码了,主要是锻炼自己写js的能力,练练手而已。


下面这是我编写的操作ajax的代码功能,勉强让我称之为库吧。。

js代码实例(tool.ajax.js):

 1 /**
 2  * JS库  使用ajax
 3  * @author  jlb
 4  */
 5 if(typeof tool == 'undefined') {
 6     var tool = function(){};
 7 }
 8 tool.ajax = function(){};
 9 
10 
11 /**
12  * 获取ajax对象
13  * @return 成功返回ajax对象
14  */
15 tool.ajax.getAjaxObject = function () {
16     try{return new XMLHttpRequest()}catch(e){}
17     try{return new ActiveXOject('Microsoft.XMLHTTP')}catch(e){}
18     alert('您的浏览器版本过低!请升级您的浏览器');
19 }
20 
21 
22 /**
23  * ajax提交数据
24  * @param 参数列表
25  * @return void
26  */
27 tool.ajax.formSubmit = function (options) {
28     var allow_param, //允许的参数列表
29             HTTP,    //ajax对象
30             url,     //请求的地址
31             data;    //携带的数据
32 
33     allow_param = ['method', 'url', 'data', 'success', 'type'];
34     //设置默认值
35     if(!options['type']) {
36         options['type'] == 'text';
37     }
38 
39     //处理url与数据,  将数据与URL合并
40     var disposeParam = function (list) {
41         var data = {url:list['url'],data:''};
42         if(list['method'] == 'get') {
43             data['data'] += '?';
44             for (var i in list['data']) {
45                 data['data'] +=  i + '=' + list['data'][i] + '&';
46             }
47         }
48         if(list['method'] == 'post') {
49             for (var i in list['data']) {
50                 data['data'] += i + '=' + list['data'][i] + '&';
51             }
52         }
53         return data
54     }
55     data = disposeParam(options);
56     HTTP = tool.ajax.getAjaxObject();
57     //ajax回调函数
58     HTTP.onreadystatechange = function () {
59         if(HTTP.readyState == 4 && HTTP.status == 200) {
60             if(options['type'] == 'text') {
61                 options['success'](HTTP.responseText);
62             }
63             else if(options['type'] == 'json') {
64                 options['success'](eval('(' + HTTP.responseText + ')'));
65             }
66         }
67     }
68 
69     if(options['method'] == 'get') {
70         url = data['url'] + data['data'];
71         HTTP.open(options['method'],url);
72         //设置请求头解决get提交有缓存问题,通过修改文件最后修改时间解决
73         HTTP.setRequestHeader('If-Modified-Since', 0);
74         HTTP.send(null);
75         return;
76     }
77     
78     if(options['method'] == 'post') {
79         HTTP.open(options['method'], data['url']);
80         //设置请求头
81         HTTP.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
82         HTTP.send(data['data'].replace(/(&*$)/g,''));
83         return;
84     }
85 }

使用实例(ajax_test.html):

 1 DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 2 html lang="en">
 3 head>
 4     meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 5     title>简单ajax功能库用法示例title>
 6 head>
 7 body>
 8     
 9     script src="tool.ajax.js">script>
10     script>
11         //ajax_test.html
12        
13         //仿jquery方式ajax请求
14         var options = {
15             url : "ajax_test.php", //请求的脚本地址
16             method : "get", //是get还是post,注意必须是小写哦..懒得转了...
17             data : {name:"莫问出处丶",age: 20}, // 要携带的数据,只支持json格式
18             success : function (msg) {  //请求完毕后回调函数..
19                 alert(msg);
20             },
21             type : 'text', //不写默认就是text,也就是说回调函数携带的数据是字符串.另外就是json
22         };
23         
24         tool.ajax.formSubmit(options);
25     script>
26 body>
27 html>

ajax请求的脚本代码(ajax_test.php):

1 php
2 //ajax_test.php
3 echo "名字:{$_GET['name']} 年龄: {$_GET['age']}";

在浏览器打开ajax_test.html这文件,浏览器显示:

名字:莫问出处丶 年龄: 20

如果返回的数据是json格式将option 中的 type 属性的值改为 json即可

有什么问题就评论留言我吧,第一次写博客,有点小激动.本菜鸟迈出第一步了.

www.bkjia.comtruehttp://www.bkjia.com/PHPjc/1103619.htmlTechArticle编写自己的javascript功能库之Ajax(仿jquery方式),ajaxjquery 本人学习的是php,所以就用php跟js来演示代码了,主要是锻炼自己写js的能力,练练手而已...
相关标签: jquery