如何用Ajax

使用 Ajax 技術的目的

概念

  • Ajax 是一種技術的名稱《︽ⅲ“Asynchronous Javascript And XML”(異步 JavaScript 和 XML)

  • 主要價值:無需重新加載整個網頁的情況下,能夠局部更新部分網頁的技術显设。

代碼執(zhí)行過程分析

Ajax代碼執(zhí)行過程分析.png

請求三要素

  • 請求方法

    GET POST

  • 請求地址

    http://xxxx

  • 請求參數

    {heroName : 趙云}

完整URL地址:

http://127.0.0.1:3001/getHeroSkin?heroName=%E5%A8%9C%E5%8F%AF%E9%9C%B2%E9%9C%B2

組成部分:

  • http:// 協(xié)議

  • 127.0.0.1 域

  • :3001 端口

  • /getHeroSkin 資源路徑

  • ?heroName=%E5%A8%9C%E5%8F%AF%E9%9C%B2%E9%9C%B2 查詢參數

查看請求參數

看執(zhí)行結果.png

提高工作效率設置代碼片段

提前在使用的開發(fā)頁面中映入JQ文件


設置代碼片段.png
"ajax結構": {
        "prefix": "ajax",
        "body": [
            "$.ajax({",
            "  method: '',",
            "  url: '',",
            "  data: {},",
            "  success: (res) => {",
            "    $1",
            "  }",
            "})",
        ],
        "description": "ajax結構生成"
    }

Ajax封裝原理

 // 封裝一個自己的 ajax 函數
      function myAjax(options) {
        //對象用于與服務器交互
        const xhr = new XMLHttpRequest()
         // 把對象轉換成查詢參數
        const data = new URLSearchParams(options.data)
        // .toUpperCase()   -  轉換成大寫
        // ?? 處理 GET 請求
        if (options.method.toUpperCase() === 'GET') {
          xhr.open(options.method, `${options.url}?${data}`)
          xhr.send()
        }
        // ?? 處理 POST 請求
        else if (options.method.toUpperCase() === 'POST') {
          xhr.open(options.method, options.url)
          // 考慮到 POST 的兼容問題剪返,添加 Content-Type
          xhr.setRequestHeader(
            'Content-Type',
            'application/x-www-form-urlencoded',
          )
          // 請求參數需要寫到 send 方法中
          xhr.send(data)
        }
        xhr.onload = function () {
          const obj = JSON.parse(xhr.response)
          // ?? 調用 success 函數,把轉換后成對象后的 res 傳遞給形參
          options.success(obj)
        }
      }
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末虑绵,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子闽烙,更是在濱河造成了極大的恐慌翅睛,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,681評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異捕发,居然都是意外死亡疏旨,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評論 3 399
  • 文/潘曉璐 我一進店門爬骤,熙熙樓的掌柜王于貴愁眉苦臉地迎上來充石,“玉大人莫换,你說我怎么就攤上這事霞玄。” “怎么了拉岁?”我有些...
    開封第一講書人閱讀 169,421評論 0 362
  • 文/不壞的土叔 我叫張陵坷剧,是天一觀的道長。 經常有香客問我喊暖,道長惫企,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,114評論 1 300
  • 正文 為了忘掉前任陵叽,我火速辦了婚禮狞尔,結果婚禮上,老公的妹妹穿的比我還像新娘巩掺。我一直安慰自己偏序,他們只是感情好,可當我...
    茶點故事閱讀 69,116評論 6 398
  • 文/花漫 我一把揭開白布胖替。 她就那樣靜靜地躺著研儒,像睡著了一般。 火紅的嫁衣襯著肌膚如雪独令。 梳的紋絲不亂的頭發(fā)上端朵,一...
    開封第一講書人閱讀 52,713評論 1 312
  • 那天,我揣著相機與錄音燃箭,去河邊找鬼冲呢。 笑死,一個胖子當著我的面吹牛招狸,可吹牛的內容都是我干的敬拓。 我是一名探鬼主播,決...
    沈念sama閱讀 41,170評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼瓢颅,長吁一口氣:“原來是場噩夢啊……” “哼恩尾!你這毒婦竟也來了?” 一聲冷哼從身側響起挽懦,我...
    開封第一講書人閱讀 40,116評論 0 277
  • 序言:老撾萬榮一對情侶失蹤翰意,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發(fā)現(xiàn)了一具尸體冀偶,經...
    沈念sama閱讀 46,651評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡醒第,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,714評論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了进鸠。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片稠曼。...
    茶點故事閱讀 40,865評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖客年,靈堂內的尸體忽然破棺而出霞幅,到底是詐尸還是另有隱情,我是刑警寧澤量瓜,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布司恳,位于F島的核電站,受9級特大地震影響绍傲,放射性物質發(fā)生泄漏扔傅。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,211評論 3 336
  • 文/蒙蒙 一烫饼、第九天 我趴在偏房一處隱蔽的房頂上張望猎塞。 院中可真熱鬧,春花似錦杠纵、人聲如沸荠耽。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽骇塘。三九已至,卻和暖如春韩容,著一層夾襖步出監(jiān)牢的瞬間款违,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評論 1 274
  • 我被黑心中介騙來泰國打工群凶, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留插爹,地道東北人。 一個月前我還...
    沈念sama閱讀 49,299評論 3 379
  • 正文 我出身青樓请梢,卻偏偏與公主長得像赠尾,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子毅弧,可洞房花燭夜當晚...
    茶點故事閱讀 45,870評論 2 361

推薦閱讀更多精彩內容