编写自己的javascript功能库之Ajax(仿jquery方式)，ajaxjquery_PHP教程
- WBOY原創
- 2016-07-12 08:58:311168瀏覽
编写自己的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即可
有什么问题就评论留言我吧,第一次写博客,有点小激动.本菜鸟迈出第一步了.
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn