本人学习的是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即可
有什么问题就评论留言我吧,第一次写博客,有点小激动.本菜鸟迈出第一步了.