封裝Ajax框架！(前言篇)

Ajax技術(shù)就是利用javascript和xml實(shí)現(xiàn)異步交互的功能。

首先先來介紹一下Ajax相關(guān)知識(shí)點(diǎn)，如果這些你都會(huì)的話，請(qǐng)直接跳轉(zhuǎn)到封裝ajax框架！（代碼篇）

一、Ajax對(duì)象的創(chuàng)建

1、創(chuàng)建Ajax對(duì)象的方式

a、第一種方式是針對(duì)IE瀏覽器

b、第二種方式針對(duì)w3c：在IE的高版本（IE8+），已經(jīng)支持了XMLHttpRequest類

2、解決兼容性

a、創(chuàng)建公共文件 public.js

b、在需要使用ajax對(duì)象的頁面中，包含以上js文件

二、ajax對(duì)象的相關(guān)屬性和方法

方法：

1、初始化ajax對(duì)象 open(method,url)

　　 method：請(qǐng)求方式 get、post

　　 url：請(qǐng)求地址

2、設(shè)置請(qǐng)求頭信息 setRequestHeader(header,value)

　　header：請(qǐng)求頭的名稱

　　value：請(qǐng)求頭的信息

3、開始發(fā)送請(qǐng)求 send(content)

　　只有當(dāng)ajax對(duì)象的send方法被調(diào)用時(shí)，才會(huì)發(fā)送請(qǐng)求

　　content ：post請(qǐng)求時(shí)所傳遞的數(shù)據(jù),get請(qǐng)求時(shí)這里直接設(shè)置為null

屬性：

1、當(dāng)ajax對(duì)象狀態(tài)碼發(fā)生改變時(shí)所觸發(fā)的回調(diào)函數(shù)：onreadystatechange

　　它的值是一個(gè)函數(shù)首地址（匿名函數(shù)）

　　xhr.onreadystatechange = function(){}

2、ajax對(duì)象的狀態(tài)碼（一個(gè)數(shù)字，從0-4）： readyState

3、ajax對(duì)象接收到的響應(yīng)狀態(tài)碼（常用）（200、302、404）：status

4、ajax對(duì)象接收到的http響應(yīng)狀態(tài)文本（不常用）：statusText

5、ajax對(duì)象接收到http響應(yīng)主體字符串（text/html）：responseText

6、ajax對(duì)象接收到的http響應(yīng)主體內(nèi)容（text/xml）：responseXML

三、發(fā)送GET請(qǐng)求

1、向服務(wù)器發(fā)送用戶名，并返回hello,zhangsan

php代碼如下：
return：返回，將結(jié)果返回給php程序本身
echo：輸出，利用http協(xié)議將數(shù)據(jù)響應(yīng)給客戶端

上面代碼不足之處：
a、如果將請(qǐng)求地址改為一個(gè)不存在的頁面地址，那么服務(wù)器仍然會(huì)返回一個(gè)錯(cuò)誤信息，而我們的程序應(yīng)該在得到一個(gè)正確的返回結(jié)果后才去對(duì)數(shù)據(jù)進(jìn)行處理。

2、解決IE緩存問題（將服務(wù)器端的PHP略做修改）

在IE下，仍然輸出hello,zhangsan、其他瀏覽器中是正常輸出
原因：在IE中，默認(rèn)有緩存功能，將每次獲取的php文件的輸出結(jié)果緩存下來，下次ajax對(duì)象請(qǐng)求時(shí)，如果在緩存目錄下，找到對(duì)應(yīng)緩存文件，就直接使用緩存文件。

解決方式：

a、在url后面加隨機(jī)數(shù)：Math,random( );

　　var URL = "demo.php?name=zhangsan&n="+Math.random();

b、在url后面加（毫秒）時(shí)間戳：new Date().getTime();

　　var URL = "demo.php?name=lisi&n="+new Date().getTime();

以上兩種方法確保每次請(qǐng)求的url是唯一的。

c、設(shè)置ajax對(duì)象的請(qǐng)求頭，if-modified-since，強(qiáng)制讓ajax對(duì)象發(fā)送請(qǐng)求。
　　0：表示文件最后修改時(shí)間會(huì)和服務(wù)器上這個(gè)資源文件最后修改時(shí)間進(jìn)行比較，肯定是不同的，所以服務(wù)器返回了最新數(shù)據(jù)

　　xhr.setRequestHeader("If-Modified-Since","0");

以上三種方式并沒有根本上解決緩存問題，前兩種方式更是緩存下來N個(gè)文件。

d、設(shè)置http響應(yīng)頭中的cache-control選項(xiàng)，告訴瀏覽器不要緩存，必須每次重新請(qǐng)求

實(shí)例：檢查用戶名是否可用

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>檢查用戶名是否存在</title>
 6     <script src="jquery-1.12.4.min.js"></script>
 7     <script src="public.js"></script>
 8     <script>
 9         $(function(){
10             //創(chuàng)建ajax對(duì)象，此時(shí)狀態(tài)碼為0
11             var xhr =creatxhr();
12             $("#name").blur(function () {
13                 var name = $(this).val();
14                 //方法1：隨機(jī)數(shù)
15                 var URL = "demo.php?name="+name+"&n="+new Date().getTime();
16                 //初始化ajax對(duì)象  此時(shí)狀態(tài)碼為1
17                 xhr.open("get",URL);
18                 //ajax對(duì)象狀態(tài)碼發(fā)生改變時(shí)所觸發(fā)的回調(diào)函數(shù)
19                 xhr.onreadystatechange = function(){
20                     //狀態(tài)碼為4說明接收完畢，做進(jìn)一步的處理
21                     if(xhr.readyState == 4 && xhr.status == 200){
22                         if(xhr.responseText == 1){
23                             $(".error").html("用戶名已存在").css({display:"inline-block",color:"red"});
24                         }else{
25                             $(".error").css({display:"none"});
26                             return false;
27                         }
28                     }
29                 };
30                 //發(fā)送請(qǐng)求，此時(shí)狀態(tài)碼為2
31                 xhr.send(null);
32             });
33 
34         })
35     </script>
36 </head>
37 <body>
38 <form>
39     <div class="form-group">
40         <label for="name">用戶名:</label>
41         <span class="error"></span>
42         <input type="text" id="name" placeholder="請(qǐng)輸入用戶名">
43     </div>
44 </form>
45 </body>
46 </html>

驗(yàn)證用戶名是否存在

 1 /**
 2  * Created by 123 on 2017/7/30.
 3  */
 4 //第一種創(chuàng)建ajax對(duì)象
 5 function creatxhr(){
 6     var xhr;
 7     var str = window.navigator.userAgent;
 8     //判斷是否為IE瀏覽器，如果是創(chuàng)建相應(yīng)的ajax對(duì)象
 9     if(str.indexOf("MSIE") >0){
10         xhr = new ActiveXObject();
11     }else{
12         xhr = new XMLHttpRequest();
13     }
14     return xhr;
15 }
16 //另外一種創(chuàng)建ajax對(duì)象
17 function creatxhr1(){
18     try{return new ActiveXObject();}catch(e){}
19     try{
20         return new XMLHttpRequest();
21     }catch(e){
22         alert("請(qǐng)更換瀏覽器！");
23     }
24 }

public.js代碼

 1 <?php
 2 //禁止客戶端緩存數(shù)據(jù)
 3 header("Cache-Control:no-cache,must-revalidate");
 4     $name = $_GET['name'];
 5     //連接數(shù)據(jù)庫服務(wù)器、選擇數(shù)據(jù)庫
 6     mysql_connect("localhost","root","111111");
 7     mysql_select_db("shop");
 8     mysql_query("set names gb2312");
 9     //sql語句
10     $sql = "select * from  users where username = '$name'";
11     $result =mysql_query($sql);
12     $num = mysql_num_rows($result);
13     $num大于表示表中已經(jīng)存在一條記錄
14     mysql_close();
15     //根據(jù)結(jié)果集總行數(shù)返回0或1.0表示用戶名不存在，1表示用戶名已存在
16     if($num > 0){
17         echo 1;
18     }else{
19         echo 0;
20     }
21 ?>

demo.php代碼

四、發(fā)送post請(qǐng)求

1、get和post的區(qū)別

a、get請(qǐng)求將參數(shù)放到請(qǐng)求地址url的后面

b、post請(qǐng)求時(shí)將參數(shù)放在http請(qǐng)求空白行的后面

c、get請(qǐng)求時(shí)參數(shù)大小有限制

d、post請(qǐng)求理論上對(duì)參數(shù)大小無限制

e、postt比get安全一些

2、其他不同

post請(qǐng)求時(shí)，除了參數(shù)格式不同之處，還比get請(qǐng)求多了一個(gè)Content-Type的請(qǐng)求頭，它的值是application-form-urlencoded，表示本次提交的數(shù)據(jù)是字符數(shù)據(jù)，同時(shí)post還可以同時(shí)提交二進(jìn)制數(shù)據(jù)和字符數(shù)據(jù)，如：multipart/form-data

ajax發(fā)送請(qǐng)求其實(shí)就是模擬http請(qǐng)求

ajax對(duì)象的post請(qǐng)求也要加上content-type的請(qǐng)求頭

3、代碼

a、xhr.open("post"，"demo.php") post請(qǐng)求 demo.php后面沒有參數(shù)

b、xhr.setRequestHeader("Content-Type"，"application/x-www-form-urlencoded")

　　設(shè)置請(qǐng)求頭信息：

　　　　content-type：傳遞數(shù)據(jù)的數(shù)據(jù)類型

　　　　application/x-www-form-urlencoded：表示數(shù)據(jù)是字符數(shù)據(jù)

c、xhr.send(data)；data：會(huì)自動(dòng)將參數(shù)放到請(qǐng)求空白行的后面

4、計(jì)算兩個(gè)數(shù)的四則運(yùn)算

如果想做四則運(yùn)算的話，上面的代碼稍微修改下：

如果需要從服務(wù)器返回多個(gè)結(jié)果，可以將結(jié)果拼接一個(gè)字符串，使用一個(gè)指定的分隔符，如："|"，在客戶端程序中，再將字符串按照分隔符進(jìn)行分割。

5、文件上傳

以post形式提交數(shù)據(jù)：method=post

指定提交的數(shù)據(jù)可以是二進(jìn)制數(shù)據(jù)或字符數(shù)據(jù)：enctype="multipart/form-data

相關(guān)代碼：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>文件上傳</title>
 6     <script src="jquery-1.12.4.min.js"></script>
 7     <script src="public.js"></script>
 8     <script>
 9         $(function(){
10             function callback(filename){
11                 $("#filename").val(filename);
12                 $("#photo").hide();
13                 $("#up").val("已上傳")
14             }
15             var xhr =creatxhr();
16             $("#btn").click(function () {
17                 var username = $("#username").val();
18                 var password = $("#pwd").val();
19                 var photo = $("#filename").val();
20                 var data = "username="+username+"&pwd="+password+"&photo="+photo;
21                 xhr.open("post","demo.php");
22                 xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
23                 //ajax對(duì)象狀態(tài)碼發(fā)生改變時(shí)所觸發(fā)的回調(diào)函數(shù)
24                 xhr.onreadystatechange = function(){
25                     if(xhr.readyState == 4 && xhr.status == 200){
26                         $("#photo").show();
27                         $("#up").val("上傳文件");
28                         $("#username").val();
29                         $("#pwd").val();
30                         $("#filename").val();
31                         if(xhr.responseText == "1"){
32                             console.log("注冊(cè)成功");
33                         }else{
34                             console.log("注冊(cè)失敗");
35                         }
36                     }
37                 };
38                 //發(fā)送請(qǐng)求，此時(shí)狀態(tài)碼為2
39                 xhr.send(data);
40             });
41 
42         })
43     </script>
44 </head>
45 <body>
46 <form method="post" action="upload.php" target="ifm" enctype="multipart/form-data">
47     <div class="form-group">
48         <label for="username">用戶名：</label>
49         <input type="text" id="username" placeholder="請(qǐng)輸入用戶名">
50     </div>
51     <div class="form-group">
52         <label for="pwd">密碼：</label>
53         <input type="password" id="pwd" placeholder="請(qǐng)輸入密碼">
54     </div>
55     <input type="hidden" id="filename">
56     <div class="form-group">
57         <label for="photo">照片：</label>
58         <input type="file" id="photo">
59         <input type="submit" id="up" value="文件上傳" name="up">
60     </div>
61     <button id="btn">注冊(cè)</button>
62 </form>
63 <iframe  name="ifm" style="display: none;"></iframe>
64 </body>
65 </html>

文件上傳代碼

 1 <?php
 2 //禁止客戶端緩存數(shù)據(jù)
 3 header("Cache-Control:no-cache,must-revalidate");
 4    if(isset($_POST['submit'])){
 5         //獲取文件擴(kuò)展名(jpg、png等)
 6         $extname = strrchr($_FILES['photo']['name'],'.')
 7         //生成新的文件名
 8         $filename = time().$extname;
 9         //文件上傳
10         copy($_FILES['tmp_name'],'upload/'.$filename);
11         //如果上傳成功的話，$filename返回的是120675321.jpg
12         將js語句輸?shù)絠frame中，在iframe中執(zhí)行parent.callback
13         //調(diào)用父窗口中的callback函數(shù)
14         echo "<script>parent.callback($filename);</script>";
15    }
16 ?>

upload.php代碼

 1 <?php
 2 //禁止客戶端緩存數(shù)據(jù)
 3 header("Cache-Control:no-cache,must-revalidate");
 4     $username = $_POST['username'];
 5     $password = $_POST['pwd'];
 6     $photo = $_POST['photo'];
 7     //連接數(shù)據(jù)庫服務(wù)器、選擇數(shù)據(jù)庫
 8     mysql_connect("localhost","root","111111");
 9     mysql_select_db("shop");
10     mysql_query("set names gb2312");
11     //sql語句
12     $sql = "insert into users (username,password,photo) values("$username","$password","$photo");
13     $result =mysql_query($sql);
14     mysql_close();
15     echo "1";
16 ?>

無刷新是Ajax技術(shù)最大的特點(diǎn)，但不是Ajax技術(shù)出現(xiàn)的目的。

針對(duì)登錄說明

如果使用傳統(tǒng)的web應(yīng)用程序，用戶在登錄時(shí)，整個(gè)頁面重新刷新并請(qǐng)求新的頁面地址，新的頁面在驗(yàn)證之后，再重新跳轉(zhuǎn)回來，但是對(duì)用戶而言，除了登錄頁面之外，其他版本沒有發(fā)生變化。

使用ajax程序，可以異步發(fā)送請(qǐng)求，改變的僅僅是登錄頁面，其他版塊沒有重新請(qǐng)求和刷新，所以節(jié)省網(wǎng)絡(luò)傳輸?shù)牧髁浚梢钥焖佾@取服務(wù)器端數(shù)據(jù)。

五、利用xml實(shí)現(xiàn)數(shù)據(jù)傳輸

1、為什么是xml

主要是解決從服務(wù)器返回大量復(fù)雜的數(shù)據(jù)。

用戶名是否可用返回1/0

返回兩個(gè)數(shù)的和 400

登錄是否成功 true/false

數(shù)據(jù)是否插入成功 true/false

需要服務(wù)器端返回少量的、單一的數(shù)據(jù)

如果需要從服務(wù)器返回大量、復(fù)雜的數(shù)據(jù)，如何實(shí)現(xiàn)？

xml：服務(wù)器端返回xml數(shù)據(jù)

json：服務(wù)器端返回json數(shù)據(jù)

2、格式：

a、php解析xml

$dom = new DOMDocument();
$dom->loadXML($str);
$nd=$dom->getElementsByTagName("tagname");
$value = $nd->item(0)->nodeValue;

$xml = simplexml_load_string($str);
$first = $xml->first;
$second = $xml->second;

b、javascript解析xml
要求服務(wù)器返回的是text/xml
var xml = xmlHttp.responseXML;
node = xml.getElementsByTagName("tagname");
node[0].chlidNodes[0].nodeValue;

3、實(shí)現(xiàn)兩個(gè)數(shù)的四則運(yùn)算：

得到結(jié)果后，需要使用字符串連接成一個(gè)xml格式的字符串，如：需要一個(gè)根元素，下面子元素，最后是具體的值，連接時(shí)也可以使用<<<str創(chuàng)建xml字符串。

輸出這個(gè)字符串，默認(rèn)響應(yīng)內(nèi)容類型：text/html，也就是說客戶端仍然把代碼當(dāng)做html類進(jìn)行解析，ajax對(duì)象的responeXML是不能得到一個(gè)xmldom對(duì)象，必須設(shè)置響應(yīng)頭類型為text/xml；

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>四則運(yùn)算</title>
 6     <script src="jquery-1.12.4.min.js"></script>
 7     <script src="public.js"></script>
 8     <script>
 9         $(function(){
10             $("#btn").click(function(){
11                 var firstValue = $("#first").val();
12                 var secondsValue = $("#seconds").val();
13                 var data = "first="+firstValue+"&seconds="+secondsValue;//生成參數(shù)字符串
14                 //創(chuàng)建ajax對(duì)象，此時(shí)狀態(tài)碼為0
15                 var xhr =creatxhr();
16                 //初始化ajax對(duì)象  此時(shí)狀態(tài)碼為1
17                 xhr.open("post","demo.php");
18                 xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
19                 //ajax對(duì)象狀態(tài)碼發(fā)生改變時(shí)所觸發(fā)的回調(diào)函數(shù)
20                 xhr.onreadystatechange = function(){
21                     //狀態(tài)碼為4說明接收完畢，做進(jìn)一步的處理
22                     if(xhr.readyState == 4 && xhr.status == 200){
23                        //xml->xmldom對(duì)象
24                         var xml = xhr.responseXML;//得到ajax返回的xmldom對(duì)象
25                         //xml.getElementsByTagName('jia')[0] 表示獲取jia這個(gè)元素
26                         //xml.getElementsByTagName('jia')[0].childNodes 表示獲取jia元素下的所有子節(jié)點(diǎn)
27                         //xml.getElementsByTagName('jia')[0].childNodes[0] 表示獲取jia元素下的唯一文本節(jié)點(diǎn)。
28                         //xml.getElementsByTagName('jia')[0].childNodes[0].nodeValue 表示獲取jia元素下的唯一文本節(jié)點(diǎn)的值。
29                         var str =xml.getElementsByTagName('jia')[0].childNodes[0].nodeValue;
30                         var str1 =xml.getElementsByTagName('jian')[0].childNodes[0].nodeValue;
31                         var str2 =xml.getElementsByTagName('cheng')[0].childNodes[0].nodeValue;
32                         var str3 =xml.getElementsByTagName('chu')[0].childNodes[0].nodeValue;
33                     }
34                 };
35                 //發(fā)送請(qǐng)求，此時(shí)狀態(tài)碼為2
36                 xhr.send(data);
37             })
38         })
39     </script>
40 </head>
41 <body>
42 <form>
43     第一個(gè)數(shù)：<input type="text" id="first"><br>
44     第二個(gè)數(shù)：<input type="text" id="seconds"><br>
45     <button id="btn">結(jié)果</button>
46     <span id="result" class="result"></span>
47 </form>
48 </body>
49 </html>

四則運(yùn)算代碼

 1 <?php
 2 //禁止客戶端緩存數(shù)據(jù)
 3 header("Cache-Control:no-cache,must-revalidate");
 4     $first = $_POST['$first'];
 5     $seconds = $_POST['$seconds'];
 6     $result1 = $first+$seconds;
 7     $result2 = $first-$seconds;
 8     $result3 = $first*$seconds;
 9     $result4 = $first/$seconds;
10     //要想返回xml，首先連接一個(gè)xml格式的字符串
11     $str="<root>";
12     $str.="<jia>.$result1.</jia>";
13     $str.="<jian>.$result2.</jian>";
14     $str.="<cheng>.$result3.</cheng>";
15     $str.="<chu>.$result4.</chu>";
16     $str.="</root>";
17     header("Content-type:text/xml");
18     echo $str;
19 ?>

四則運(yùn)算php代碼

4、在頁面加載之后，將goods表中所有數(shù)據(jù)顯示在表格中。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>把數(shù)據(jù)顯示在表中</title>
 6     <script src="jquery-1.12.4.min.js"></script>
 7     <script src="public.js"></script>
 8     <script>
 9         $(function(){
10                 //創(chuàng)建ajax對(duì)象，此時(shí)狀態(tài)碼為0
11                 var xhr =creatxhr();
12                 xhr.open("post","table.php");
13                 xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
14                 xhr.onreadystatechange = function(){
15                     if(xhr.readyState == 4 && xhr.status == 200){
16                        //xml->xmldom對(duì)象
17                         var xml = xhr.responseXML;//得到ajax返回的xmldom對(duì)象
18                         var goods = xml.getElementsByTagName('goods');
19                         var $tr ="<tr></tr>";
20                         for(var i=0;i<goods.length;i++){
21                             var strName =goods[i].childNodes[0].childNodes[0].nodeValue;
22                             var strPrice =goods[i].childNodes[1].childNodes[0].nodeValue;
23                             var $td0 = "<td>"+(i+1)+"</td>";
24                             var $td1 = "<td>"+strName+"</td>";
25                             var $td2 = "<td>"+strPrice+"</td>";
26                             $tr.append($td0).append($td1).append($td2);
27                             $("#table tbody").append($tr);
28                         }
29                 }
30                 xhr.send(null);
31             }
32         })
33     </script>
34 </head>
35 <body>
36 <table id="table">
37     <tr>
38         <td>編號(hào)</td>
39         <td>姓名</td>
40         <td>價(jià)格</td>
41     </tr>
42 </table>
43 </body>
44 </html>

把數(shù)據(jù)顯示在表中

查詢goods表中所有數(shù)據(jù)，連接xml格式的字符串，表中有多少條數(shù)據(jù)，xml字符串就有幾對(duì)goods標(biāo)簽

其中，name字段出現(xiàn)中文，需要進(jìn)行轉(zhuǎn)碼，將gb2312->utf-8

最后輸出xml字符串

 1 <?php
 2 //禁止客戶端緩存數(shù)據(jù)
 3 header("Cache-Control:no-cache,must-revalidate");
 4     $name = $_GET['name'];
 5     //連接數(shù)據(jù)庫服務(wù)器、選擇數(shù)據(jù)庫
 6     mysql_connect("localhost","root","111111");
 7     mysql_select_db("shop");
 8     mysql_query("set names utf-8");
 9     //sql語句
10     $sql = "select name,price from  goods order by id desc;
11     $result =mysql_query($sql);
12     //總行數(shù)
13     $num = mysql_num_rows($result);
14     mysql_close();
15     $str = "<root>";
16     for($i=0;$i<$num;$i++){
17         $row = mysql_fetch_assoc($result);
18         $str.="<goods>";
19         $str.="<name>".$row['name']."</name>";
20         $str.="<price>".$row['price']."</price>";
21         $str.="</goods>";
22     }
23     str.="</root>";
24     header("Content-Type:text/xml");
25     echo $str;
26 ?>

數(shù)據(jù)顯示php代碼

六、利用json傳輸數(shù)據(jù)

1、為什么使用json傳輸數(shù)據(jù)

xml數(shù)據(jù)生成過于復(fù)雜、xml數(shù)據(jù)解析過于復(fù)雜。

2、關(guān)于json介紹

對(duì)象是屬性的無序集合，在js中，可以使用{}模擬這個(gè)集合

語法：var json = {屬性名：屬性值，屬性名：屬性值}（屬性名可以不加引號(hào)，也可以加單引號(hào)或雙引號(hào)）；

　　　var json = [{ },{ },{ }];

3、用json表示具體的信息

a、表示一個(gè)人的信息

　　var person = {name:"zhangsan","age":18}; console.log("姓名："+person.name+person.age)

b、表示多個(gè)人的信息

4、在php中如何使用json

a、json編碼：json_encode();

b、json解碼：json_decode();

生成json字符串

json表示大量數(shù)據(jù)，在php中表示多個(gè)、大量的數(shù)據(jù)可以數(shù)組、對(duì)象來表示

也就是說在php如果想生成json字符串，必須從數(shù)組、對(duì)象上生成。

解析json字符串：

json_decode函數(shù)可以將一個(gè)json格式的字符串進(jìn)行解析，其中，這個(gè)函數(shù)的第二個(gè)參數(shù)表示解析方式。

true：解析到數(shù)組中

false：解析到對(duì)象中

默認(rèn)為false

關(guān)于json保存中文的問題

目前，json只支持utf-8，如果想保存中文，必須進(jìn)行轉(zhuǎn)碼。

5、JavaScript解析json

如果服務(wù)器端返回的是字符串，js中需要把字符串轉(zhuǎn)換成json對(duì)象。

方法：eval（"("+str+")"）;

var str = xmlHttp.responseText;比如服務(wù)器返回的是"{name：'zhangsan'，age：30}"；

//將字符串轉(zhuǎn)換成json對(duì)象

var json = eval("("+str+")");

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>使用json把數(shù)據(jù)顯示在表中</title>
 6     <style>
 7         table{
 8             border-collapse: collapse;
 9             width:300px;
10             height:200px;
11             margin:0 auto;
12             text-align: center;
13         }
14        tr,td{
15            border:1px solid #ccc;
16        }
17     </style>
18     <script src="jquery-1.12.4.min.js"></script>
19     <script src="public.js"></script>
20     <script>
21         $(function(){
22             //創(chuàng)建ajax對(duì)象，此時(shí)狀態(tài)碼為0
23             var xhr =creatxhr();
24             xhr.open("post","table.php");
25             xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
26             xhr.onreadystatechange = function(){
27                 if(xhr.readyState == 4 && xhr.status == 200){
28                     var value = xhr.responseText;//返回字符串
29                     var $data = eval('('+value+')');//把返回的字符串轉(zhuǎn)換為json對(duì)象
30                     var $tr ="<tr></tr>";
31                     for(var i=0;i<$data.length;i++){
32                         var $td0 = "<td>"+(i+1)+"</td>";
33                         var $td1 = "<td>"+$data[i].name+"</td>";
34                         var $td2 = "<td>"+$data[i].price+"</td>";
35                         $tr.append($td0).append($td1).append($td2);
36                         $("tbody").append($tr);
37                     }
38                 }
39                 xhr.send(null);
40             }
41         })
42     </script>
43 </head>
44 <body>
45 <table>
46     <tr>
47         <td>編號(hào)</td>
48         <td>姓名</td>
49         <td>價(jià)格</td>
50     </tr>
51     <tr>
52         <td>1</td>
53         <td>蘋果</td>
54         <td>5</td>
55     </tr>
56     <tr>
57         <td>2</td>
58         <td>梨子</td>
59         <td>3</td>
60     </tr>
61     <tr>
62         <td>3</td>
63         <td>草莓</td>
64         <td>15</td>
65     </tr>
66 </table>
67 </body>
68 </html>

使用json把數(shù)據(jù)顯示在表格中

 1 <?php
 2     //連接數(shù)據(jù)庫服務(wù)器、選擇數(shù)據(jù)庫
 3     mysql_connect("localhost","root","111111");
 4     mysql_select_db("shop");
 5     mysql_query("set names utf-8");
 6     //sql語句
 7     $sql = "select name,price from  goods order by id desc;
 8     $result =mysql_query($sql);
 9     //總行數(shù)
10     $num = mysql_num_rows($result);
11     $data = array();
12     for($i=0;$i<$num;$i++){
13         $row = mysql_fetch_assoc($result);
14         $row['name'] = iconv('gb2312','utf-8',$row['name']);
15         $data[] = $row;
16     }
17     //關(guān)閉數(shù)據(jù)庫
18      mysql_close();
19     //輸出json數(shù)據(jù)
20     echo json_encode($data);
21 ?>

使用json顯示數(shù)據(jù)的php代碼

php代碼說明如下：

$row：一維數(shù)組生成一個(gè)json格式的字符串

$data：二維數(shù)組生成一個(gè)json數(shù)組格式的字符串

js代碼說明如下：

一種返回的是："{name：'zhangsan'，'password'：'123456'}"； eval("("+str+")")；

一種返回的是："[{name：'zhangsan'，'password'：'123456'}，{name：'lisi'，password：'111111'}]"； eval(str)；

posted @ 2017-07-30 23:56 小Q的博客閱讀(1256) 評(píng)論(1) 收藏舉報(bào)

刷新頁面返回頂部

小七的博客

封裝Ajax框架！(前言篇)

Ajax技術(shù)就是利用javascript和xml實(shí)現(xiàn)異步交互的功能。

首先先來介紹一下Ajax相關(guān)知識(shí)點(diǎn)，如果這些你都會(huì)的話，請(qǐng)直接跳轉(zhuǎn)到封裝ajax框架！（代碼篇）

一、Ajax對(duì)象的創(chuàng)建

1、創(chuàng)建Ajax對(duì)象的方式

2、解決兼容性

二、ajax對(duì)象的相關(guān)屬性和方法

三、發(fā)送GET請(qǐng)求

1、向服務(wù)器發(fā)送用戶名，并返回hello,zhangsan

2、解決IE緩存問題（將服務(wù)器端的PHP略做修改）

實(shí)例：檢查用戶名是否可用

四、發(fā)送post請(qǐng)求

1、get和post的區(qū)別

2、其他不同

3、代碼

4、計(jì)算兩個(gè)數(shù)的四則運(yùn)算

5、文件上傳

五、利用xml實(shí)現(xiàn)數(shù)據(jù)傳輸

1、為什么是xml

2、格式：

3、實(shí)現(xiàn)兩個(gè)數(shù)的四則運(yùn)算：

4、在頁面加載之后，將goods表中所有數(shù)據(jù)顯示在表格中。

六、利用json傳輸數(shù)據(jù)

1、為什么使用json傳輸數(shù)據(jù)

2、關(guān)于json介紹

3、用json表示具體的信息

4、在php中如何使用json

5、JavaScript解析json

php代碼說明如下：

js代碼說明如下：

公告

小七的博客

封裝Ajax框架！(前言篇)

Ajax技術(shù)就是利用javascript和xml實(shí)現(xiàn)異步交互的功能。

首先先來介紹一下Ajax相關(guān)知識(shí)點(diǎn)，如果這些你都會(huì)的話，請(qǐng)直接跳轉(zhuǎn)到封裝ajax框架！（代碼篇）

一、Ajax對(duì)象的創(chuàng)建

1、創(chuàng)建Ajax對(duì)象的方式

2、解決兼容性

二、ajax對(duì)象的相關(guān)屬性和方法

三、發(fā)送GET請(qǐng)求

1、 向服務(wù)器發(fā)送用戶名，并返回hello,zhangsan

2、解決IE緩存問題（將服務(wù)器端的PHP略做修改）

實(shí)例：檢查用戶名是否可用

四、發(fā)送post請(qǐng)求

1、get和post的區(qū)別

2、其他不同

3、代碼

4、計(jì)算兩個(gè)數(shù)的四則運(yùn)算

5、文件上傳

五、利用xml實(shí)現(xiàn)數(shù)據(jù)傳輸

1、為什么是xml

2、格式：

3、實(shí)現(xiàn)兩個(gè)數(shù)的四則運(yùn)算：

4、在頁面加載之后，將goods表中所有數(shù)據(jù)顯示在表格中。

六、利用json傳輸數(shù)據(jù)

1、為什么使用json傳輸數(shù)據(jù)

2、關(guān)于json介紹

3、用json表示具體的信息

4、在php中如何使用json

5、JavaScript解析json

php代碼說明如下：

js代碼說明如下：

公告

1、向服務(wù)器發(fā)送用戶名，并返回hello,zhangsan