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

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

登入後複製

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

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

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學

1664

CakePHP 教程

1423

Laravel 教程

1321

PHP教程

1269

C# 教程

1249

Related knowledge

jQuery引用方法詳解：快速上手指南 Feb 27, 2024 pm 06:45 PM

jQuery引用方法詳解：快速上手指南jQuery是一個受歡迎的JavaScript庫，被廣泛用於網站開發中，它簡化了JavaScript編程，並為開發者提供了豐富的功能和特性。本文將詳細介紹jQuery的引用方法，並提供具體的程式碼範例，幫助讀者快速上手。引入jQuery首先，我們需要在HTML檔案中引入jQuery函式庫。可以透過CDN連結的方式引入，也可以下載

jQuery中如何使用PUT請求方式？ Feb 28, 2024 pm 03:12 PM

jQuery中如何使用PUT請求方式？在jQuery中，發送PUT請求的方法與發送其他類型的請求類似，但需要注意一些細節和參數設定。 PUT請求通常用於更新資源，例如更新資料庫中的資料或更新伺服器上的檔案。以下是在jQuery中使用PUT請求方式的具體程式碼範例。首先，確保引入了jQuery庫文件，然後可以透過以下方式發送PUT請求：$.ajax({u

深度剖析：jQuery的優勢與劣勢 Feb 27, 2024 pm 05:18 PM

jQuery是一款廣泛應用於前端開發的快速、小巧、功能豐富的JavaScript庫。自2006年發布以來，jQuery已成為眾多開發者的首選工具之一，但在實際應用中，它也不乏一些優點和缺點。本文將深度剖析jQuery的優勢與劣勢，並結合具體的程式碼範例進行說明。優點：1.簡潔的語法jQuery的語法設計簡潔明了，可以大幅提升程式碼的可讀性和編寫效率。比如，

jQuery小技巧：快速修改頁面所有a標籤的文本 Feb 28, 2024 pm 09:06 PM

標題：jQuery小技巧：快速修改頁面所有a標籤的文字在網頁開發中，我們經常需要對頁面中的元素進行修改和操作。使用jQuery時，有時候需要一次修改頁面中所有a標籤的文字內容，這樣可以節省時間和精力。以下將介紹如何使用jQuery快速修改頁面所有a標籤的文本，同時給出具體的程式碼範例。首先，我們需要引入jQuery庫文件，確保在頁面中引入了以下程式碼：&lt

使用jQuery修改所有a標籤的文字內容 Feb 28, 2024 pm 05:42 PM

標題：使用jQuery修改所有a標籤的文字內容jQuery是一款受歡迎的JavaScript庫，被廣泛用於處理DOM操作。在網頁開發中，經常會遇到需要修改頁面上連結標籤（a標籤）的文字內容的需求。本文將介紹如何使用jQuery來實現這個目標，並提供具體的程式碼範例。首先，我們需要在頁面中引入jQuery庫。在HTML檔案中加入以下程式碼：

jQuery如何移除元素的height屬性？ Feb 28, 2024 am 08:39 AM

jQuery如何移除元素的height屬性？在前端開發中，經常會遇到需要操作元素的高度屬性的需求。有時候，我們可能需要動態改變元素的高度，而有時候又需要移除元素的高度屬性。本文將介紹如何使用jQuery來移除元素的高度屬性，並提供具體的程式碼範例。在使用jQuery操作高度屬性之前，我們首先需要了解CSS中的height屬性。 height屬性用於設定元素的高度

了解jQuery中eq的作用及應用場景 Feb 28, 2024 pm 01:15 PM

jQuery是一種流行的JavaScript庫，被廣泛用於處理網頁中的DOM操作和事件處理。在jQuery中，eq()方法是用來選擇指定索引位置的元素的方法，具體使用方法和應用場景如下。在jQuery中，eq()方法選擇指定索引位置的元素。索引位置從0開始計數，即第一個元素的索引是0，第二個元素的索引是1，依此類推。 eq()方法的語法如下：$("s

使用jQuery為表格新增一行的方法介紹 Feb 29, 2024 am 08:12 AM

jQuery是一個受歡迎的JavaScript函式庫，廣泛用於網頁開發。在網頁開發過程中，經常需要透過JavaScript動態地在表格中新增一行。本文將介紹如何使用jQuery為表格新增一行，並提供具體的程式碼範例。首先，我們需要在HTML頁面中引入jQuery函式庫。可以透過以下程式碼在標籤中引入jQuery庫：

See all articles

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

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

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題