首頁 後端開發 php教程 實例講解Ajax非同步請求技術

實例講解Ajax非同步請求技術

Dec 19, 2017 pm 01:25 PM
ajax 非同步 請求

ajax是一種用於建立快速動態網頁的技術。透過在後台與伺服器進行少量資料交換。 ajax可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下,對網頁的某個部分進行更新。而傳統的網頁(不使用ajax)如果需要更新內容,必須重載整個網站頁面。本文跟大家分享Ajax非同步請求技術實例講解,非常不錯,具有參考借鑒價值,需要的朋友參考下吧,希望能幫助到大家。

在網路應用程式開發過程中,業界對前後端的分界線似乎一直都沒有確定的概念,不過大多數人以瀏覽器作為前後端的分界線。將瀏覽器中為使用者進行頁面展示的部分稱為前端,而將運行於伺服器,為前端提供業務邏輯和資料準備的所有程式碼統稱為後端。

雖然前後端分離在幾年前就已經開始受到關注,但很多人對它卻是只聞其聲,未見其形,所以對它產生了一些誤解,誤以為前後段分離只是一種Web應用的開發模式,只要在Web應用的開發期進行了前後端開發工作的分工就是前後端分離。

其實並非如此,精確的說,前後端分離不只是開發模式,而是Web應用的一種架構模式。在開發期,前後端工程師可以透過約定好交互接口,實現並行開發;在運行期,前後端分離模式需要對Web應用進行分離部署,前後端之間使用HTTP請求進行交互。

一、JSON解析

JSON(JavaScript Object Notation) 是一種輕量級的資料交換格式。 JSON採用完全獨立於語言的文字格式,這些特性使JSON成為理想的資料交換語言。易於人閱讀和編寫,同時也易於機器解析和生成。簡單地說,JSON 可以將JavaScript 物件中表示的一組資料轉換為字串,然後就可以在函數之間輕鬆地傳遞這個字串,或者在非同步應用程式中將字串從Web 用戶端傳遞給伺服器端程式。

二、Ajax介面呼叫

前後端分離意味著,前後端之間使用JSON 來交流,兩個開發團隊之間使用API​​ 作為契約進行交互, 透過JSON字串,然後在非同步應用程式中將字串從Web 用戶端傳遞給伺服器端程式。這部分學習的是如何從前台向後台發起一個Ajax請求,最後得到伺服器回傳的資料回應之後,進行前端頁面的更新。

三、php後台

PHP是一種流行的通用腳本語言,特別適合於web開發。 php語言有以下特點:

1、跨平台,效能優越,和許多免費的平台結合非常省錢,例如LAMP(Linux /Apache/Mysql/PHP)或FAMP(FreeBSD/Apache/Mysql/ PHP)結合,或是資料應用夠大可以考慮換PostgreSQL或Oracle,支援N種資料庫。 (N >= 10)

2、文法簡單,如果有學習C和Perl的很容易上手,而且跟ASP有部分類似。有成熟的開發工具,像是NuPHPed,或是Zend Studio等等,再Linux平台下可以使用Eclipse等等。

3、目前主流技術都支持,例如WebService、Ajax、XML等等,足夠應用。

4、有很多成熟的框架,例如支援MVC的框架:phpMVC,支援類似ASP.net的事件驅動的框架:Prado,支援類似Ruby On Rails的快速開發的框架:Cake等等,足夠滿足你的應用需求。

5、PHP 5已經有成熟的物件導向體系,能夠適應基本的物件導向要求。適合開發大型專案。

這部分主要學習的如何搭建一個php伺服器,掌握PHP的基本語法,透過php產生一個動態網頁,掌握如何使用php完成一個標準化的接口,最終返回JSON資料給前台。

四、資料庫


資料庫(Database)是依照資料結構來組織、儲存和管理資料的倉庫,每個資料庫都有一個或多個不同的API用於創建,訪問,管理,搜尋和複製所保存的資料。我們也可以將資料儲存在檔案中,但是在檔案中讀寫資料速度相對較慢。

MySQL是一個關聯式資料庫管理系統,由瑞典MySQL AB公司開發,目前屬於Oracle公司。 MySQL是一種關聯資料庫管理系統,關聯資料庫將資料保存在 不同的表中,而不是將所有資料放在一個大倉庫內,這樣就增加了速度並提高了靈活性。

• Mysql是開源的,所以你不需要支付額外的費用。

• Mysql支援大型的資料庫。可以處理擁有上千萬筆記錄的大型資料庫。

• MySQL使用標準的SQL資料語言形式。

• Mysql可以允許於多個系統上,並且支援多種語言。這些程式語言包括C、C++、Python、Java、Perl、PHP、Eiffel、Ruby和Tcl等。

• Mysql對PHP有很好的支持,PHP是目前最受歡迎的Web開發語言。

• MySQL支援大型資料庫,支援5000萬筆記錄的資料倉儲,32位元系統表檔案最大可支援4GB,64位元系統支援最大的表檔為8TB。

這部分主要學習的是資料中的增刪改查操作,最後透過php存取資料中的數據,然後透過回應的處理,發揮給前台使用。

五、Ajax跨域

由於在工作中需要使用AJAX請求其他網域下的請求,但是會出現拒絕存取的情況,這是因為基於安全性的考慮,AJAX只能存取本地的資源,而不能跨網域存取。

解決方式一:

“XHR2” 全稱 “XMLHttpRequest Level2” 是HTML5提供的方法,對跨域訪問提供了很好的支持,並且還有一些新的功能。

* IE10以下的版本都不支援

* 只需要在伺服器端頭部加上下面兩句程式碼:

header( "Access-Control-Allow-Origin:*" );
header( "Access-Control-Allow-Methods:POST,GET" );
登入後複製

解決方式二:

JSONP(JSON with Padding)是一個非官方的協議,它允許在伺服器端整合Script tags返回到客戶端,透過javascript callback的形式實現跨域存取(這僅僅是JSONP簡單的實作形式)。

由於同源策略的限制,XmlHttpRequest只允許請求目前來源(網域名稱、協定、連接埠)的資源,為了實現跨網域請求,可以透過script標籤實現跨網域請求,然後在服務端輸出JSON資料並執行回調函數,從而解決了跨域的資料請求。

相關推薦:

XMLHttpRequest物件中關於Ajax非同步請求的問題

ajax非同步請求post方式

談談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脫衣器

Video Face Swap

Video Face Swap

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

熱門文章

<🎜>:泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系統,解釋
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora:巫婆樹的耳語 - 如何解鎖抓鉤
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)

熱門話題

Java教學
1665
14
CakePHP 教程
1423
52
Laravel 教程
1321
25
PHP教程
1269
29
C# 教程
1249
24
PHP 與 Ajax:建立一個自動完成建議引擎 PHP 與 Ajax:建立一個自動完成建議引擎 Jun 02, 2024 pm 08:39 PM

使用PHP和Ajax建置自動完成建議引擎:伺服器端腳本:處理Ajax請求並傳回建議(autocomplete.php)。客戶端腳本:發送Ajax請求並顯示建議(autocomplete.js)。實戰案例:在HTML頁面中包含腳本並指定search-input元素識別碼。

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

標題:解決jQueryAJAX請求出現403錯誤的方法及程式碼範例403錯誤是指伺服器禁止存取資源的請求,通常會導致出現這個錯誤的原因是請求缺少權限或被伺服器拒絕。在進行jQueryAJAX請求時,有時會遇到這種情況,本文將介紹如何解決這個問題,並提供程式碼範例。解決方法:檢查權限:首先要確保請求的URL位址是正確的,同時驗證是否有足夠的權限來存取該資

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

jQuery是一個受歡迎的JavaScript函式庫,用來簡化客戶端端的開發。而AJAX則是在不重新載入整個網頁的情況下,透過發送非同步請求和與伺服器互動的技術。然而在使用jQuery進行AJAX請求時,有時會遇到403錯誤。 403錯誤通常是伺服器禁止存取的錯誤,可能是由於安全性原則或權限問題導致的。在本文中,我們將討論如何解決jQueryAJAX請求遭遇403錯誤

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

如何解決jQueryAJAX報錯403的問題?在開發網頁應用程式時,經常會使用jQuery來發送非同步請求。然而,有時在使用jQueryAJAX時可能會遇到錯誤代碼403,表示伺服器禁止存取。這種情況通常是由伺服器端的安全性設定所導致的,但可以透過一些方法來解決這個問題。本文將介紹如何解決jQueryAJAX報錯403的問題,並提供具體的程式碼範例。一、使

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

使用Ajax從PHP方法取得變數是Web開發中常見的場景,透過Ajax可以實作頁面無需刷新即可動態取得資料。在本文中,將介紹如何使用Ajax從PHP方法中取得變量,並提供具體的程式碼範例。首先,我們需要寫一個PHP檔案來處理Ajax請求,並傳回所需的變數。下面是一個簡單的PHP檔案getData.php的範例程式碼:

Python asyncio 進階指南:從初學者到專家 Python asyncio 進階指南:從初學者到專家 Mar 04, 2024 am 09:43 AM

並發和非同步編程並發編程處理同時執行的多個任務,非同步編程是一種並發編程,其中任務不會阻塞線程。 asyncio是python中用於非同步程式設計的函式庫,它允許程式在不阻塞主執行緒的情況下執行I/O操作。事件循環asyncio的核心是事件循環,它監控I/O事件並調度相應的任務。當一個協程準備好時,事件循環會執行它,直到它等待I/O操作。然後,它會暫停協程並繼續執行其他協程。協程協程是可暫停和恢復執行的函數。 asyncdef關鍵字用於建立協程。協程使用await關鍵字等待I/O作業完成。 asyncio的基礎以下

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

Ajax(非同步JavaScript和XML)允許在不重新載入頁面情況下新增動態內容。使用PHP和Ajax,您可以動態載入產品清單:HTML建立一個帶有容器元素的頁面,Ajax請求載入資料後將資料加入到該元素中。 JavaScript使用Ajax透過XMLHttpRequest向伺服器傳送請求,從伺服器取得JSON格式的產品資料。 PHP使用MySQL從資料庫查詢產品數據,並將其編碼為JSON格式。 JavaScript解析JSON數據,並將其顯示在頁面容器中。點選按鈕觸發Ajax請求,載入產品清單。

Java異常處理中的非同步與非阻塞技術 Java異常處理中的非同步與非阻塞技術 May 01, 2024 pm 05:42 PM

非同步和非阻塞技術可用於補充傳統異常處理,允許創建更具響應性和高效的Java應用程式:非同步異常處理:在另一個執行緒或進程中處理異常,讓主執行緒繼續執行,避免阻塞。非阻塞異常處理:涉及I/O操作出錯時事件驅動的異常處理,避免阻塞線程,由事件循環處理異常。

See all articles