三种ajax解析模式！
生活随笔
收集整理的這篇文章主要介紹了
三种ajax解析模式！
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
一、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()函數(shù)進行轉換* * 使用"()"將其包裹,eval()函數(shù)強制將其轉換為JSON格式(javascript代碼)* * 不使用"()"將其包裹,eval()函數(shù)將其識別為一個空的代碼塊*/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代碼：
<?php// 接收客戶端發(fā)送的請求數(shù)據(jù)$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));// 響應數(shù)據(jù)符合JSON格式的字符串// 1. 手工方式構建//echo '{"name":"zhouzhiruo","pwd":"123456"}';// 2. 使用json_encode()函數(shù)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(){// 實現(xiàn)Ajax的異步交互var xhr = getXhr();xhr.open("post","07.php");xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");/** 如何構建符合XML格式的請求數(shù)據(jù)* * 注意* * 請求數(shù)據(jù)的格式 - key=value 不能改變的* * 將value值構建成符合XML格式的數(shù)據(jù)* * 數(shù)據(jù)類型 - 字符串(string)* * 格式符合XML的語法要求* * 編寫注意* * 定義變量 - 專門構建XML格式的數(shù)據(jù)* * 在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){// 接收服務器端的響應數(shù)據(jù)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// 接收客戶端發(fā)送的請求數(shù)據(jù)$user = $_POST['user'];//符合XML格式要求的string類型//var_dump($user);// 創(chuàng)建DOMDocument對象$doc = new DOMDocument();// 調用loadXML()方法$result = $doc->loadXML($user);//var_dump($doc);// 如何構建符合XML格式的數(shù)據(jù)/* 修改響應頭的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>/** 需要思考哪些事情?* * 在什么時候執(zhí)行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. 執(zhí)行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){// 接收服務器端的數(shù)據(jù)內(nèi)容var data = xhr.responseText;// data是字符串,轉換為數(shù)組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);}}}}}// 定義創(chuàng)建XMLHttpRequest對象的函數(shù)function getXhr(){var xhr = null;if(window.XMLHttpRequest){xhr = new XMLHttpRequest();}else{xhr = new ActiveXObject("Microsoft.XMLHttp");}return xhr;}</script></body></html>php頁面：
<?php// 用于處理客戶端請求二級聯(lián)動的數(shù)據(jù)// 1. 接收客戶端發(fā)送的省份信息$province = $_POST['provcince'];// 2. 判斷當前的省份信息,提供不同的城市信息switch ($province){case '山東省':echo '青島市,濟南市,威海市,日照市,德州市';break;case '遼寧省':echo '沈陽市,大連市,鐵嶺市,丹東市,錦州市';break;case '吉林省':echo '長春市,松原市,吉林市,通化市,四平市';break;}// 服務器端響應的是字符串 ?>?
?
轉載于:https://www.cnblogs.com/xiuber/p/5035754.html
總結
以上是生活随笔為你收集整理的三种ajax解析模式！的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： nodejs中EventEmitter
- 下一篇： c# timer使用