Home  >  Article  >  php教程  >  编写自己的javascript功能库之Ajax(仿jquery方式),ajaxjquery

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

WBOY
WBOYOriginal
2016-06-13 08:45:391494browse

编写自己的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这文件,浏览器显示:

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

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

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

  

 

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn