Share the three parsing modes of ajax,
I. JSON format in Ajax
Html code:
<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 "); /** how to build a JSON format on the client ** construct a JSON-format string */var user = '{"name": "zhangwuji", "pwd ": & quot; 123456 & quot;} '; xhr. send ("user =" + user); xhr. onreadystatechange = function () {if (xhr. readyState = 4 & xhr. status = 200) {var data = xhr. responseText;/** use the eval () function for conversion ** use "()" to wrap it, And the eval () function forcibly converts it to JSON format (javascript code) ** if you do not use "()" to wrap it, the eval () function recognizes it as an empty code block */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>
PHP code:
<? Php // receives the request data sent by the client $ user =$ _ POST ['user']; // It is a string in JSON format // 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 )); // The response data conforms to the JSON Format String // 1. constructed manually // echo '{"name": "zhouzhiruo", "pwd": "123456"}'; // 2. use the json_encode () function echo json_encode ($ json_user);?>
Ii. XML format in Ajax
Html page:
<Html> <body> <input type = "button" value = "Ajax" id = "btn"> <script> var btn = document. getElementById ("btn"); btn. onclick = function () {// asynchronous Ajax interaction var xhr = getXhr (); xhr. open ("post", "07.php"); xhr. setRequestHeader ("Content-Type", "application/x-www-form-urlencoded "); /** how to construct request data in XML format ** note ** the format of request data-key = value cannot be changed ** the value is constructed into data in XML format * * Data Type-string (string) ** the format meets the XML syntax requirements ** note **: define variables-specially construct data in XML format ** in send () method. */var user = "<user> <name> zhangwuji </name> <pwd> 123456 </pwd> </user>"; xhr. send ("user =" + user); xhr. onreadystatechange = function () {if (xhr. readyState = 4 & xhr. status = 200) {// receives the response data from the server 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>
PHP page code:
<? Php // receive the request data sent by the client $ user =$ _ POST ['user']; // string type that meets the XML format requirements // var_dump ($ user ); // create a DOMDocument object $ doc = new DOMDocument (); // call the loadXML () method $ result = $ doc-> loadXML ($ user ); // var_dump ($ doc); // how to construct data in XML format/* modify the Content-Type value of the response header to "text/xml" header ('content-Type: text/xml'); echo $ user; // string Type conforming to xml format */header ('content-Type: application/xml '); echo $ doc-> saveXML ();?>
3. HTML format in Ajax
HTML page:
<Html> <body> <select id = "province"> <option> select </option> <option> Shandong </option> <option> Liaoning </option> <option> Jilin Province </option> </select> <select id = "city"> <option> select </option> </select> <script>/** considerations what are the issues? ** When Will Ajax asynchronous requests be executed? ** When you select a specific province * // 1. bind the onchange event var provinceEle = document. getElementById ("province"); provinceEle. onchange = function () {// clear 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! = "Select") {// 2. execute Ajax asynchronous request 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) {// receives data from the server. var data = xhr. responseText; // data is a string and is converted to an array 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) ;}}}// defines the function getXhr () {var xhr = null for creating the XMLHttpRequest object; if (window. XMLHttpRequest) {xhr = new XMLHttpRequest ();} else {xhr = new ActiveXObject ("Microsoft. XMLHttp ") ;}return xhr ;}</script> </body>
Php page:
<? Php // data used to process the second-level Association of client requests // 1. receive province information sent by the client $ province =$ _ POST ['propcince ']; // 2. determine the current province information and provide different city information switch ($ province) {case 'shandong province ': echo 'qingdao, Jinan, Weihai, Rizhao, Dezhou'; break; case 'liaoning province ': echo 'shenyang city, Dalian city, Tieling City, Dandong City, Jinzhou City'; break; case 'Jilin province ': echo 'changchun city, Songyuan City, Jilin City, Tonghua City, Siping City '; break;} // is the response string from the server?>
The above content is a small Editor to share with you the three ajax parsing modes, I hope you like it.
Articles you may be interested in:
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
