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

首頁

後端開發

php教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jul 12, 2016 am 08:58 AM

jquery

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

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

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

js代码实例（tool.ajax.js）：

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

使用实例(ajax_test.html):

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

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

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

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