AJAX

時間  2019-11-13
標籤 ajax 欄目 Ajax 简体版
原文   原文鏈接

全稱：Asynchronous JavaScript and XML (異步的JavaScript和XML)javascript

不是某種編程語言，是一種在無需從新加載整個網頁的狀況下可以更新部分網頁的技術，異步更新，局部更新；後臺和服務器交換數據，經過XMLHttpRequest對象php

流程：運用HTML和CSS實現頁面，表達信息；運用XMLHttpRequest和web服務器進行數據的異步交換；運用JavaScript操做DOM，實現動態局部刷新html

 

XMLHttpRequest對象：前端

var request;
if (window.XMLHttpRequest){
    request = new XMLHttpRequest();//IE7+,Firefox,Chrome,Opera,Safari..l
}else{
    request = new ActiveXObject("Microsoft.XMLHttp");//IE6,IE5
}

 

HTTP:java

是計算機經過網絡進行通訊的規則，是一種無狀態（不創建持久的鏈接，沒有記憶）協議jquery

一個完整的HTTP請求，7個步驟：1：創建TCP鏈接；2：Web瀏覽器向Web服務器發送請求命令；3.瀏覽器發送請求頭信息；4.服務器應答；5.服務器發送應答頭信息；6.服務器向瀏覽器發送數據；7.服務器關閉TCP鏈接web

 

一個HTTP請求通常由四部分組成：1.請求的方法或動做（GET仍是POST)；2.請求的URL（請求的地址）；3.請求頭，包含一些客戶端環境信息，身份證信息等ajax

4.請求體（請求正文），能夠包含客戶提交的查詢字符串信息，表單信息等編程

 

GET：通常用於信息獲取，使用URL傳遞參數（發送的信息對任何人均可見，全部的變量名和值都顯示在URL中），對所發送信息的數量也有限制，通常在2000字符；冪等（一個GET請求執行一次和一萬次的效果是相同的）；json

POST：通常用於修改服務器上的資源，對所發送信息的數量無限制，更安全

 

HTTP相應通常由三部分組成：1.一個數字和文字組成的狀態碼，用來顯示請求是否成功；2.響應頭，也和請求頭同樣包含許多有用的信息，例如服務器類型，日期和時間，內容類型和長度等；3.響應體，也就是響應正文

 

HTTP狀態碼（request.status）：由3位數字構成，其中首位數字定義了狀態碼的類型

1XX：信息類，表示收到web瀏覽器請求，正在進一步的處理中

2XX：成功，表示用戶請求被正確接收，理解和處理例如：200 OK

3xx:重定向，表示請求沒有成功，客戶必須採起進一步的動做

4XX:客戶端錯誤，表示客戶端提交的請求有錯誤，例如：404 NOT Found,意味着請求中所引用的文檔不存在。

5xx：服務器錯誤，表示服務器不能完成請求的處理

 

XMLHttpRequest發送請求：

open(method,url,async)

send(string)

例子：

request.open("GET","get.php",true);
request.send();

request.open("POST","post.php",true);
request.send();

request.open("POST","create.php",true);
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
request.send("name=王二狗&sex=男");

 

XMLHttpRequest取得響應：

responseText:得到字符串形式的響應數據

responseXML:得到XML形式的響應數據

status和statusText:以數字和文本形式返回HTTP狀態碼

getAllResponseHeader():獲取全部的響應報頭

getResponseHeader():查詢響應中的某個字段的值

 

readyState屬性：(經過request.onreadystatechange來監聽)

0：請求未初始化，open尚未調用

1：服務器鏈接已經創建，open已經調用了

2：請求已經接收，也就是接收到頭信息了

3：請求處理中，也就是接收到響應主體了

4：請求已完成，且響應已就緒，也就是響應完成了

 

var request;
if (window.XMLHttpRequest){
    request = new XMLHttpRequest();//IE7+,Firefox,Chrome,Opera,Safari..l
}else{
    request = new ActiveXObject("Microsoft.XMLHttp");//IE6,IE5
}
request.open("GET","get.php",true);
request.send();
request.onreadystatechange = function(){
    if (request.readyState === 4 && request.status === 200){
        //作一些事情 request.responseText
    }
}

Demo:

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <meta charset="utf-8">
  5     <title>Demo</title>
  6     <style>
  7         #box{
  8             line-height: 1.8;
  9             margin: 10px auto;
 10             width: 350px;
 11         }
 12     </style>
 13 </head>
 14 <body>
 15 <div id="box">
 16     <h1>員工查詢</h1>
 17     <label>請輸入員工編號：</label>
 18     <input type="text" id="keyword"/>
 19     <button id="search">查詢</button>
 20     <p id="searchResult"></p>
 21 
 22     <h1>員工查詢</h1>
 23     <label>請輸入員工姓名：</label>
 24     <input type="text" id="staffName"/><br>
 25     <label>請輸入員工編號：</label>
 26     <input type="text" id="staffNumber"/><br>
 27     <label>請輸入員工性別：</label>
 28     <select name="" id="staffSex">
 29         <option value="">男</option>
 30         <option value="">女</option>
 31 
 32     </select><br>
 33     <label>請輸入員工職位：</label>
 34     <input type="text" id="staffJob"/><br>
 35     <button id="save">保存</button>
 36     <p id="createResult"></p>
 37 
 38 </div>
 39 
 40 <script type="text/javascript">
 41 document.getElementById("search").onclick = function(){
 42     //發送Ajax查詢請求處理
 43     var request;
 44     if (window.XMLHttpRequest){
 45         request = new XMLHttpRequest();//IE7+,Firefox,Chrome,Opera,Safari..l
 46     }else{
 47         request = new ActiveXObject("Microsoft.XMLHttp");//IE6,IE5
 48     }
 49     request.open("GET","service.php?number="+document.getElementById("keyword").value);
 50     request.send();
 51     request.onreadystatechange = function(){
 52         if(request.readyState===4){
 53             if(request.status===200){
 54                 var data = JSON.parse(request.responseText);
 55                 if(data.success){
 56                     document.getElementById("searchResult").innerHTML=data.msg;
 57                 }else{
 58                     document.getElementById("searchResult").innerHTML="出現錯誤：" + data.msg;
 59                 }
 60             }else{
 61                 alert("發生錯誤："+request.status);
 62             }
 63         }
 64     }
 65 }
 66 
 67 document.getElementById("save").onclick = function(){
 68     //發送Ajax查詢請求處理
 69     var request;
 70     if (window.XMLHttpRequest){
 71         request = new XMLHttpRequest();//IE7+,Firefox,Chrome,Opera,Safari..l
 72     }else{
 73         request = new ActiveXObject("Microsoft.XMLHttp");//IE6,IE5
 74     }
 75     request.open("POST","service.php");
 76     var data = "name=" +document.getElementById("staffName").value
 77                 +"&number=" +document.getElementById("staffNumber").value
 78                 +"&sex=" +document.getElementById("staffSex").value
 79                 +"&job=" +document.getElementById("staffJob").value;
 80     request.serRequestHeader("Content-Type","application/x-www-form-urlencoded");
 81     request.send(data);
 82     request.onreadystatechange = function(){
 83         if(request.readyState===4){
 84             if(request.status===200){
 85                 var data = JSON.parse(request.responseText);
 86                 if(data.success){
 87                     document.getElementById("creatResult").innerHTML=data.msg;
 88                 }else{
 89                     document.getElementById("creatResult").innerHTML="出現錯誤：" + data.msg;
 90                 }
 91             }else{
 92                 alert("發生錯誤："+request.status);
 93             }
 94         }
 95     }
 96 }
 97 
 98 
 99 /*var jsondata = '{"staff":[{"name":"洪七","age":70},{"name":"郭靖","age":35},{"name":"黃蓉","age":30}]}'
100 var jsonobj = eval('('+ jsondata + ')');
101 alert(jsonobj.staff[0].name);
102 
103 var jsondata = '{"staff":[{"name":"洪七","age":70},{"name":"郭靖","age":35},{"name":"黃蓉","age":30}]}'
104 var jsonobj = JSON.parse(jsondata);
105 alert(jsonobj.staff[0].name);*/
106 
107 </script>
108 
109 </body>
110 </html>
View Code

 

JSON:JavaScript對象表示法（JavaScript Object Notation);JSON是存儲和交換文本信息的語法，相似XML。它採用鍵值對的方式來組織，易於人們閱讀和編寫，同時也易於機器解析和生成；JSON是獨立於語言的，也就是說無論什麼語言，均可以解析JSON，只要按照JSON的規則來就行。

相比XML的有點：JSON的長度更短小，讀寫速度更快，可使用JavaScript內建的方法直接進行解析，轉換成JavaScript對象，很是方便

JSON數據的書寫格式：名稱/值對；名稱寫在前面（在雙引號中），值對寫在後面（一樣的雙引號中），中間用冒號隔開   例如："name":"郭靖"

JSON的值能夠是下面這些類型：數字（整數或浮點數）；字符串（在雙引號中）；邏輯值（true或false);數組（在方括號中）；對象（在花括號中）；null;

JSON例子：

{
    "staff":[
        {"name":"洪七","age":70},
        {"name":"郭靖","age":35},
        {"name":"黃蓉","age":30}
    ]
}

 

JSON解析：eval和JSON.parse

在代碼中使用eval是很危險的！特別是用它執行第三方的JSON數據（其中可能包含惡意代碼）時，儘量使用JSON.parse()方法解析字符串自己，該方法還能夠捕捉JSON中的語法錯誤。

var jsondata = '{"staff":[{"name":"洪七","age":70},{"name":"郭靖","age":35},{"name":"黃蓉","age":30}]}'
var jsonobj = eval('('+ jsondata + ')');
alert(jsonobj.staff[0].name);

var jsondata = '{"staff":[{"name":"洪七","age":70},{"name":"郭靖","age":35},{"name":"黃蓉","age":30}]}'
var jsonobj = JSON.parse(jsondata);
alert(jsonobj.staff[0].name);

在線的JSON字符串校驗：JSONLint.com

 

使用JSON的Demo:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Demo</title>
    <style>
        #box{
            line-height: 1.8;
            margin: 10px auto;
            width: 350px;
        }
    </style>
</head>
<body>
<div id="box">
    <h1>員工查詢</h1>
    <label>請輸入員工編號：</label>
    <input type="text" id="keyword"/>
    <button id="search">查詢</button>
    <p id="searchResult"></p>

    <h1>員工查詢</h1>
    <label>請輸入員工姓名：</label>
    <input type="text" id="staffName"/><br>
    <label>請輸入員工編號：</label>
    <input type="text" id="staffNumber"/><br>
    <label>請輸入員工性別：</label>
    <select name="" id="staffSex">
        <option value="">男</option>
        <option value="">女</option>

    </select><br>
    <label>請輸入員工職位：</label>
    <input type="text" id="staffJob"/><br>
    <button id="save">保存</button>
    <p id="createResult"></p>

</div>

<script type="text/javascript">
document.getElementById("search").onclick = function(){
    //發送Ajax查詢請求處理
    var request;
    if (window.XMLHttpRequest){
        request = new XMLHttpRequest();//IE7+,Firefox,Chrome,Opera,Safari..l
    }else{
        request = new ActiveXObject("Microsoft.XMLHttp");//IE6,IE5
    }
    request.open("GET","service.php?number="+document.getElementById("keyword").value);
    request.send();
    request.onreadystatechange = function(){
        if(request.readyState===4){
            if(request.status===200){
                var data = JSON.parse(request.responseText);
                if(data.success){
                    document.getElementById("searchResult").innerHTML=data.msg;
                }else{
                    document.getElementById("searchResult").innerHTML="出現錯誤：" + data.msg;
                }
            }else{
                alert("發生錯誤："+request.status);
            }
        }
    }
}

document.getElementById("save").onclick = function(){
    //發送Ajax查詢請求處理
    var request;
    if (window.XMLHttpRequest){
        request = new XMLHttpRequest();//IE7+,Firefox,Chrome,Opera,Safari..l
    }else{
        request = new ActiveXObject("Microsoft.XMLHttp");//IE6,IE5
    }
    request.open("POST","service.php");
    var data = "name=" +document.getElementById("staffName").value
                +"&number=" +document.getElementById("staffNumber").value
                +"&sex=" +document.getElementById("staffSex").value
                +"&job=" +document.getElementById("staffJob").value;
    request.serRequestHeader("Content-Type","application/x-www-form-urlencoded");
    request.send(data);
    request.onreadystatechange = function(){
        if(request.readyState===4){
            if(request.status===200){
                var data = JSON.parse(request.responseText);
                if(data.success){
                    document.getElementById("creatResult").innerHTML=data.msg;
                }else{
                    document.getElementById("creatResult").innerHTML="出現錯誤：" + data.msg;
                }
            }else{
                alert("發生錯誤："+request.status);
            }
        }
    }
}


/*var jsondata = '{"staff":[{"name":"洪七","age":70},{"name":"郭靖","age":35},{"name":"黃蓉","age":30}]}'
var jsonobj = eval('('+ jsondata + ')');
alert(jsonobj.staff[0].name);

var jsondata = '{"staff":[{"name":"洪七","age":70},{"name":"郭靖","age":35},{"name":"黃蓉","age":30}]}'
var jsonobj = JSON.parse(jsondata);
alert(jsonobj.staff[0].name);*/

</script>

</body>
</html>
View Code

 

用jQuery實現Ajax:

jQuery.ajax([settings])

type:類型，」POST"或「GET」，默認爲「GET」

url:發送請求的地址

data:是一個對象，連同請求發送到服務器的數據

dataType:預期服務器返回的數據類型。若是不指定，jQuery將自動根據HTTP包MIME信息來智能判斷，通常咱們採用json格式，能夠設置爲「json"

success:是一個方法，請求成功後的回調函數。傳入返回後的數據，以及包含成功代碼的字符串

error：是一個方法，請求失敗時調用此函數。傳入XMLHttpRequest對象

 

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>Demo</title>
 6     <style>
 7         #box{
 8             line-height: 1.8;
 9             margin: 10px auto;
10             width: 350px;
11         }
12     </style>
13 </head>
14 <body>
15 <div id="box">
16     <h1>員工查詢</h1>
17     <label>請輸入員工編號：</label>
18     <input type="text" id="keyword"/>
19     <button id="search">查詢</button>
20     <p id="searchResult"></p>
21 
22     <h1>員工查詢</h1>
23     <label>請輸入員工姓名：</label>
24     <input type="text" id="staffName"/><br>
25     <label>請輸入員工編號：</label>
26     <input type="text" id="staffNumber"/><br>
27     <label>請輸入員工性別：</label>
28     <select name="" id="staffSex">
29         <option value="">男</option>
30         <option value="">女</option>
31 
32     </select><br>
33     <label>請輸入員工職位：</label>
34     <input type="text" id="staffJob"/><br>
35     <button id="save">保存</button>
36     <p id="createResult"></p>
37 
38 </div>
39 <!-- 引入jquery -->
40 <script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.js"></script>
41 <script type="text/javascript">
42 $(document).ready(function(){
43     $("#search").click(function(){
44         $.ajax({
45             type:"GET",
46             url:"service.php?number="+ $("#keyword").val(),
47             dataType:"json",
48             success:function(data){
49                 if(data.success){
50                     $("#searchResult").html(data.msg);
51                 }else{
52                     $("#searchResult").html("出現錯誤：" + data.msg);
53                 }
54             },
55             error:function(jqXHR){
56                 alert("發生錯誤："+jqXHR.status);
57             }
58         });
59     });
60 
61     $("#save").click(function(){
62         $.ajax({
63             type:"POST",
64             url:"service.php",
65             dataType:"json",
66             data:{
67                 name:$("#staffName").val(),
68                 number:$("#staffNumber").val(),
69                 sex:$("#staffSex").val(),
70                 job:$("#staffJob").val(),
71             },
72             success:function(data){
73                 if(data.success){
74                     $("#createResult").html(data.msg);
75                 }else{
76                     $("#createResult").html("出現錯誤：" + data.msg);
77                 }
78             },
79             error:function(jqXHR){
80                 alert("發生錯誤："+jqXHR.status);
81             }
82         });
83     });
84 });
85 
86 </script>
87 
88 </body>
89 </html>
View Code

 

跨域：

一個域名地址的組成：

http://      www      .      abc.com       :        8080         /        script/jquery.js

協議         子域名             主域名                   端口號                 請求資源地址

 

當協議、子域名、主域名、端口號中任意一個不相同時，都算做不一樣域;不一樣域之間相互請求資源，就算作」跨域「;好比：http://www.abc.com/index.html請求http://www.efg.com/service.php

 

JS處於安全方面的考慮，不容許跨域調用其餘頁面的對象。什麼是跨域呢，簡單地說就是由於JS同源策略的限制，a.com域名下的 js沒法操做b.com或是c.a.com域名下的對象。

 

  • 跨域方法一：代理

經過在同域名的web服務器端建立一個代理：

北京服務器（域名：www.beijing.com),上海服務器（域名：www.shanghai.com);

好比在北京的web服務器的後臺（www.beijing.com/proxy-shanghaiservice.php)來調用上海服務器（www.shanghai.com/service.php)的服務，而後再把相應結果返回給前端，這樣前端調用北京同域名的服務器就和調用上海的服務效果相同了。

 

  • 跨域處理方法二：JSONP

JSONP可用於解決主流瀏覽器中跨域數據訪問的問題。

在www.aaa.com頁面中：

<script>
    function jsonp(json){
        alert(json["name"]);
    }

</script>
<script src="http://www.bbb.com/jsonp.js"></script>

在www.bbb.com頁面中：

jsonp({'name':'洪七','age':24});

 

須要將原有代碼dataType的值從json改成jsonp,再增長一行：

jsonp:"callback"'//任意值

後端要增長

$jsonp = $_GET["callback"];

而且返回值須要用'（）'括起來，前面加上$jsonp的值，用逗號鏈接，例如：

$result=$jsonp.'({"success":false,"msg":"沒有找到員工」})';

 

jsonp只能支持「GET」請求，不支持「POST」請求

 

  • 跨域處理方法三：XHR2

HTML5提供的XMLHttpRequest Level2已經實現了跨域訪問以及其餘的一些新功能

IE10如下的版本都不支持

在服務器端作一些小小的改動便可： 增長下面兩行代碼

header("Access-Control-Allow-Origin:*");
header("Access-Control-Allow-Methods:POST,GET");
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程