ajax三種解析模式使用詳解
這次帶給大家ajax三種解析模式使用詳解，ajax三種解析模式使用的注意事項有哪些，下面就是實戰案例，一起來看一下。
一、Ajax中的JSON格式
html程式碼：
<html>
<body>
<input type="button" value="Ajax" id="btn">
<script>
var btn = document.getElementById("btn");
btn.onclick = function(){
var xhr = getXhr();
xhr.open("post","10.php");
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
/*
* 在客户端如何构建JSON格式
* * 构建符合JSON格式的字符串
*/
var user = '{"name":"zhangwuji","pwd":"123456"}';
xhr.send("user="+user);
xhr.onreadystatechange = function(){
if(xhr.readyState==4&&xhr.status==200){
var data = xhr.responseText;
/*
* 使用eval()函数进行转换
* * 使用"()"将其包裹,eval()函数强制将其转换为JSON格式(javascript代码)
* * 不使用"()"将其包裹,eval()函数将其识别为一个空的代码块
*/
var json = eval("("+data+")");
console.log(json);
}
}
}
function getXhr(){
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHttp");
}
return xhr;
}
</script>
</body>
</html><?php
// 接收客户端发送的请求数据
$user = $_POST['user'];
// 就是一个JSON格式的string字符串
//var_dump($user);
$json_user = json_decode($user,true);
//var_dump($json_user['name']);
$json = '{"a":1,"b":2,"c":3,"d":4,"e":5}';
//var_dump(json_decode($json));
// 响应数据符合JSON格式的字符串
// 1. 手工方式构建
//echo '{"name":"zhouzhiruo","pwd":"123456"}';
// 2. 使用json_encode()函数
echo json_encode($json_user);
?>二 Ajax中的XML格式
html頁：
<html>
<body>
<input type="button" value="Ajax" id="btn">
<script>
var btn = document.getElementById("btn");
btn.onclick = function(){
// 实现Ajax的异步交互
var xhr = getXhr();
xhr.open("post","07.php");
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
/*
* 如何构建符合XML格式的请求数据
* * 注意
* * 请求数据的格式 - key=value 不能改变的
* * 将value值构建成符合XML格式的数据
* * 数据类型 - 字符串(string)
* * 格式符合XML的语法要求
* * 编写注意
* * 定义变量 - 专门构建XML格式的数据
* * 在send()方法进行拼串
*/
var user = "<user><name>zhangwuji</name><pwd>123456</pwd></user>";
xhr.send("user="+user);
xhr.onreadystatechange = function(){
if(xhr.readyState==4&&xhr.status==200){
// 接收服务器端的响应数据
var xmlDoc = xhr.responseXML;
var nameEle = xmlDoc.getElementsByTagName("name")[0];
var txtEle = nameEle.childNodes[0];
console.log(txtEle.nodeValue);
}
}
}
function getXhr(){
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHttp");
}
return xhr;
}
</script>
</body>
</html>PHP頁碼：
<?php
// 接收客户端发送的请求数据
$user = $_POST['user'];//符合XML格式要求的string类型
//var_dump($user);
// 创建DOMDocument对象
$doc = new DOMDocument();
// 调用loadXML()方法
$result = $doc->loadXML($user);
//var_dump($doc);
// 如何构建符合XML格式的数据
/* 修改响应头的Content-Type值为"text/xml"
header('Content-Type:text/xml');
echo $user;// 符合XML格式的string类型
*/
header('Content-Type:application/xml');
echo $doc->saveXML();
?>三 Ajax中的HTML格式
HTML頁面：
<html>
<body>
<select id="province">
<option>请选择</option>
<option>山东省</option>
<option>辽宁省</option>
<option>吉林省</option>
</select>
<select id="city">
<option>请选择</option>
</select>
<script>
/*
* 需要思考哪些事情?
* * 在什么时候执行Ajax的异步请求?
* * 当用户选择具体的省份信息时
*/
// 1. 为id为province元素绑定onchange事件
var provinceEle = document.getElementById("province");
provinceEle.onchange = function(){
// 清空
var city = document.getElementById("city");
var opts = city.getElementsByTagName("option");
for(var z=opts.length-1;z>0;z--){
city.removeChild(opts[z]);
}
if(provinceEle.value != "请选择"){
// 2. 执行Ajax异步请求
var xhr = getXhr();
xhr.open("post","06.php");
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send("provcince="+provinceEle.value);
xhr.onreadystatechange = function(){
if(xhr.readyState==4&&xhr.status==200){
// 接收服务器端的数据内容
var data = xhr.responseText;
// data是字符串,转换为数组
var cities = data.split(",");
for(var i=0;i<cities.length;i++){
var option = document.createElement("option");
var textNode = document.createTextNode(cities[i]);
option.appendChild(textNode);
city.appendChild(option);
}
}
}
}
}
// 定义创建XMLHttpRequest对象的函数
function getXhr(){
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHttp");
}
return xhr;
}
</script>
</body>
</html>php頁面：
<?php
// 用于处理客户端请求二级联动的数据
// 1. 接收客户端发送的省份信息
$province = $_POST['provcince'];
// 2. 判断当前的省份信息,提供不同的城市信息
switch ($province){
case '山东省':
echo '青岛市,济南市,威海市,日照市,德州市';
break;
case '辽宁省':
echo '沈阳市,大连市,铁岭市,丹东市,锦州市';
break;
case '吉林省':
echo '长春市,松原市,吉林市,通化市,四平市';
break;
}
// 服务器端响应的是字符串
?>相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
#以上是ajax三種解析模式使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱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)
crystaldiskmark是什麼軟體？ -crystaldiskmark如何使用？
Mar 18, 2024 pm 02:58 PM
CrystalDiskMark是一款適用於硬碟的小型HDD基準測試工具，可快速測量順序和隨機讀取/寫入速度。接下來就讓小編為大家介紹一下CrystalDiskMark，以及crystaldiskmark如何使用吧~一、CrystalDiskMark介紹CrystalDiskMark是一款廣泛使用的磁碟效能測試工具，用於評估機械硬碟和固態硬碟（SSD）的讀取和寫入速度和隨機I/O性能。它是一款免費的Windows應用程序，並提供用戶友好的介面和各種測試模式來評估硬碟效能的不同方面，並被廣泛用於硬體評
foobar2000怎麼下載？ -foobar2000怎麼使用
Mar 18, 2024 am 10:58 AM
foobar2000是一款能隨時收聽音樂資源的軟體，各種音樂無損音質帶給你，增強版本的音樂播放器，讓你得到更全更舒適的音樂體驗，它的設計理念是將電腦端的高級音頻播放器移植到手機上，提供更便捷高效的音樂播放體驗，介面設計簡潔明了易於使用它採用了極簡的設計風格，沒有過多的裝飾和繁瑣的操作能夠快速上手，同時還支持多種皮膚和主題，根據自己的喜好進行個性化設置，打造專屬的音樂播放器支援多種音訊格式的播放，它還支援音訊增益功能根據自己的聽力情況調整音量大小，避免過大的音量對聽力造成損害。接下來就讓小編為大
百度網盤app怎麼用
Mar 27, 2024 pm 06:46 PM
在如今雲端儲存已成為我們日常生活和工作中不可或缺的一部分。百度網盤作為國內領先的雲端儲存服務之一，憑藉其強大的儲存功能、高效的傳輸速度以及便捷的操作體驗，贏得了廣大用戶的青睞。而且無論你是想要備份重要文件、分享資料，還是在線上觀看影片、聽取音樂，百度網盤都能滿足你的需求。但很多用戶可能對百度網盤app的具體使用方法還不了解，那麼這篇教學就將為大家詳細介紹百度網盤app如何使用，還有疑惑的用戶們就快來跟著本文詳細了解一下吧！百度雲網盤怎麼用：一、安裝首先，下載並安裝百度雲軟體時，請選擇自訂安裝選
網易信箱大師怎麼用
Mar 27, 2024 pm 05:32 PM
網易郵箱，作為中國網友廣泛使用的一種電子郵箱，一直以來以其穩定、高效的服務贏得了用戶的信賴。而網易信箱大師，則是專為手機使用者打造的信箱軟體，它大大簡化了郵件的收發流程，讓我們的郵件處理變得更加便利。那麼網易信箱大師該如何使用，具體又有哪些功能呢，下文中本站小編將為大家帶來詳細的內容介紹，希望能幫助到大家！首先，您可以在手機應用程式商店搜尋並下載網易信箱大師應用程式。在應用寶或百度手機助手中搜尋“網易郵箱大師”，然後按照提示進行安裝即可。下載安裝完成後，我們打開網易郵箱帳號並進行登錄，登入介面如下圖所示
BTCC教學：如何在BTCC交易所綁定使用MetaMask錢包？
Apr 26, 2024 am 09:40 AM
MetaMask（中文也叫小狐狸錢包）是一款免費的、廣受好評的加密錢包軟體。目前，BTCC已支援綁定MetaMask錢包，綁定後可使用MetaMask錢包進行快速登錄，儲值、買幣等，且首次綁定還可獲得20USDT體驗金。在BTCCMetaMask錢包教學中，我們將詳細介紹如何註冊和使用MetaMask，以及如何在BTCC綁定並使用小狐狸錢包。 MetaMask錢包是什麼？ MetaMask小狐狸錢包擁有超過3,000萬用戶，是當今最受歡迎的加密貨幣錢包之一。它可免費使用，可作為擴充功能安裝在網絡
教你使用 iOS 17.4「失竊裝置保護」新進階功能
Mar 10, 2024 pm 04:34 PM
Apple在周二推出了iOS17.4更新，為iPhone帶來了一系列新功能和修復。這次更新包含了全新的表情符號，同時歐盟用戶也能夠下載其他應用程式商店。此外，更新還加強了對iPhone安全性的控制，引入了更多的「失竊設備保護」設定選項，為用戶提供更多選擇和保障。 "iOS17.3首次引入了「失竊設備保護」功能，為用戶的敏感資料增加了額外的安全保障。當用戶不在家等熟悉地點時，該功能要求用戶首次輸入生物特徵信息，並在一小時後再次輸入資訊才能存取和更改某些數據，如修改AppleID密碼或關閉失竊設備保護功能
請勿打擾模式在iPhone中不起作用：修復
Apr 24, 2024 pm 04:50 PM
即使在「請勿打擾」模式下接聽電話也可能是一種非常煩人的體驗。顧名思義，請勿打擾模式可關閉來自郵件、訊息等的所有來電通知和警報。您可以按照這些解決方案集進行修復。修復1–啟用對焦模式在手機上啟用對焦模式。步驟1–從頂部向下滑動以存取控制中心。步驟2–接下來，在手機上啟用「對焦模式」。專注模式可在手機上啟用「請勿打擾」模式。它不會讓您的手機上出現任何來電提醒。修復2–更改對焦模式設定如果對焦模式設定中存在一些問題，則應進行修復。步驟1–打開您的iPhone設定視窗。步驟2–接下來，開啟「對焦」模式設
如何使用迅雷下載磁力鏈接
Feb 25, 2024 pm 12:51 PM
隨著網路科技的快速發展，我們的生活也得到了極大的便利，其中之一就是能夠透過網路下載和分享各種資源。而在下載資源的過程中，磁力連結成為了一種非常常見且方便的下載方式。那麼，迅雷磁力連結又是如何使用的呢？下面，我將給大家詳細介紹一下。迅雷是一款非常受歡迎的下載工具，它支援多種下載方式，其中包括磁力連結。磁力連結可以理解為一種下載位址，透過它我們可以取得資源的相關
