目錄
一、什麼是 Ajax
二、原生JS 實作Ajax
三、JQuery 實作Ajax
首頁 web前端 js教程 什麼是ajax? ajax的幾種實作方法詳解(附使用實例)

什麼是ajax? ajax的幾種實作方法詳解(附使用實例)

Sep 10, 2018 am 11:09 AM
ajax js

本篇文章主要的介紹了關於ajax的實作方法,還有ajax的定義分析。讓大家更能明白ajax怎麼用,明白如何用jQuery實現ajax的。現在就讓我們開始閱讀本篇文章吧

一、什麼是 Ajax

Ajax:Asynchronous javascript and xml,實作了客戶端與伺服器進行資料交流過程同時是非同步傳送請求。 Ajax 不是一種新的程式語言,而是一種用於創建更好更快以及互動性更強的Web應用程式的技術。
使用技術的好處是:不用頁面刷新,並且在等待頁面傳輸資料的同時可以進行其他操作

二、原生JS 實作Ajax

這裡有一個實作的套路,思路大致是這樣的:
1. 根據不同的瀏覽器,建立xmlHttpRequest 物件;
2. 用open 調用,用send 發送請求給Ajax 引擎。
3. 伺服器程式執行完畢後,把結果回傳給客戶端(用xml.readyState == 4 && xml.status == 200 判定發送是否成功,然後用xml. responseText接收後台傳回來的資料)

//返回一个xmlHttpRequest 对象function creathttprequest()
{    if(window.XMLHttpRequest)        var xml=new XMLHttpRequest();    else
        var xml=ActiveXObject("Miscrosoft.XMLHTTP");    return xml;
}//这里是触发 AJAX 的事件(比如是一个按钮的点击事件之类的)function triggerAjax() {   //上面思路步骤1,创建一个xmlHttpRequest 对象
    var xml = creathttprequest();    //上面思路步骤2
    xml.open("POST","result.php",false);   //open() 第二个参数是你后台php文件的相对路径
    xml.setRequestHeader("Content-Type","application/x-www-form-urlencoded");    xml.send(url);    //上面思路步骤3
    if(xml.readyState==4&&xml.status==200)
    {
        alert(xml.responseText);
    }
}
登入後複製
登入後複製

三、JQuery 實作Ajax

JQuery實作Ajax 的方法就簡單很多了,已經封裝好了一個$.ajax 函數,呼叫很方便。

$.ajax({ 
  type: "POST", //发送是以POST还是GET
  url: "ajax.php", //发送的地址
  dataType: "json", //传输数据的格式
  data: {"username": "zwkkkk1","password": 123456}, //传输的数据
  //成功的回调函数
  success: function(msg) { 
    console.log(msg) 
  }, 
  //失败的回调函数
  error: function() { 
    console.log("error") 
  } 
})
登入後複製
登入後複製

一、什麼是 Ajax


Ajax:Asynchronous javascript and xml,實作了客戶端與伺服器進行資料交流過程同時是非同步傳送請求。 Ajax 不是一種新的程式語言,而是一種用於創建更好更快以及互動性更強的Web應用程式的技術。
使用技術的好處是:不用頁面刷新,並且在等待頁面傳輸資料的同時可以進行其他操作

二、原生JS 實作Ajax


這裡有一個實作的套路,想法大致上是這樣的:
1. 根據不同的瀏覽器,建立xmlHttpRequest物件;
2. 用open 調用,用send 發送請求給Ajax 引擎。
3. 伺服器程式執行完畢後,把結果回傳給客戶端(用xml.readyState == 4 && xml.status == 200 判定發送是否成功,然後用xml. responseText接收後台傳回來的資料)(想看更多就到PHP中文網AJAX開發手冊欄位中學習)

//返回一个xmlHttpRequest 对象function creathttprequest()
{    if(window.XMLHttpRequest)        var xml=new XMLHttpRequest();    else
        var xml=ActiveXObject("Miscrosoft.XMLHTTP");    return xml;
}//这里是触发 AJAX 的事件(比如是一个按钮的点击事件之类的)function triggerAjax() {   //上面思路步骤1,创建一个xmlHttpRequest 对象
    var xml = creathttprequest();    //上面思路步骤2
    xml.open("POST","result.php",false);   //open() 第二个参数是你后台php文件的相对路径
    xml.setRequestHeader("Content-Type","application/x-www-form-urlencoded");    xml.send(url);    //上面思路步骤3
    if(xml.readyState==4&&xml.status==200)
    {
        alert(xml.responseText);
    }
}
登入後複製
登入後複製

三、JQuery 實作Ajax

JQuery實作Ajax 的方法就簡單很多了,已經封裝了一個$.ajax函數,呼叫很方便。

$.ajax({ 
  type: "POST", //发送是以POST还是GET
  url: "ajax.php", //发送的地址
  dataType: "json", //传输数据的格式
  data: {"username": "zwkkkk1","password": 123456}, //传输的数据
  //成功的回调函数
  success: function(msg) { 
    console.log(msg) 
  }, 
  //失败的回调函数
  error: function() { 
    console.log("error") 
  } 
})
登入後複製
登入後複製

這篇文章到這就結束了(想看更多就到PHP中文網ajax使用手冊欄位中學習),有問題的可以在下方留言提問。

以上是什麼是ajax? ajax的幾種實作方法詳解(附使用實例)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

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

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

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

建議:優秀JS開源人臉偵測辨識項目 建議:優秀JS開源人臉偵測辨識項目 Apr 03, 2024 am 11:55 AM

建議:優秀JS開源人臉偵測辨識項目

解決jQuery AJAX請求遇到403錯誤的方法 解決jQuery AJAX請求遇到403錯誤的方法 Feb 20, 2024 am 10:07 AM

解決jQuery AJAX請求遇到403錯誤的方法

解決jQuery AJAX請求403錯誤的方法 解決jQuery AJAX請求403錯誤的方法 Feb 19, 2024 pm 05:55 PM

解決jQuery AJAX請求403錯誤的方法

如何使用Ajax從PHP方法取得變數? 如何使用Ajax從PHP方法取得變數? Mar 09, 2024 pm 05:36 PM

如何使用Ajax從PHP方法取得變數?

如何解決jQuery AJAX報錯403的問題? 如何解決jQuery AJAX報錯403的問題? Feb 23, 2024 pm 04:27 PM

如何解決jQuery AJAX報錯403的問題?

PHP 與 Ajax:建立動態載入內容的解決方案 PHP 與 Ajax:建立動態載入內容的解決方案 Jun 06, 2024 pm 01:12 PM

PHP 與 Ajax:建立動態載入內容的解決方案

js和vue的關係 js和vue的關係 Mar 11, 2024 pm 05:21 PM

js和vue的關係

JS 的 AI 時代來了! JS 的 AI 時代來了! Apr 08, 2024 am 09:10 AM

JS 的 AI 時代來了!

See all articles