11-ajax

Ajax

 

一、什麼是ajax

Asynchronous JavaScript and XML（異步JavaScript和XML) 節省用戶操做，時間，提升用戶體驗，減小數據請求 傳輸獲取數據

特色能夠無刷新讀取數據

例如：用戶註冊、在線聊天室

ajax能且僅能 從服務器讀取文件

 

二、Ajax的使用

•基礎：請求並顯示靜態TXT文件

–字符集編碼

–緩存、阻止緩存能夠利用時間戳

•動態數據：請求JS（或json）文件

–eval的使用

  eval就是計算字符串裏的值

var str="function show(){alert('abc');}";
eval(str);
show()

–DOM建立元素

•局部刷新：請求並顯示部分網頁文件

 

三、HTTP請求方法

•GET——用於獲取數據（如：瀏覽帖子）

放到網址URL裏面提交

•POST——用於上傳數據（如：用戶註冊）

不是在放到網址URL裏面提交

•GET、POST的區別：提交的方式不一樣

get是在url裏傳數據：安全性低、容量低

POST 安全性通常 容量幾乎無限

–緩存

  POST：setRequestHeader(類型, 內容)：設置請求頭 "Content-Type","application/x-www-form-urlencoded」

json 

json 是存儲和交換文本信息的語法。他採用鍵值對的方式來組織。是獨立的語言，任何語言只要符合json的規則均可以解析json。

特色：

1.json長度更短

2.json讀寫速度更快

3.json可使用javascript內建的方法直接進行解析，轉換成javascript對象，很是方便

語法規則： http://blog.csdn.net/crper/article/details/45625283

 

json解析和校驗工具

 

eval("("+ jsondata + ")");<br>

JSON.prase(jsondata);

通常不建議單獨使用eval();

實際過程當中用JSON.parse(data)來解析格式

 

http://pro.jsonlint.com/ 校驗工具

 

四、編寫Ajax步驟

第一步：建立Ajax對象 

•ActiveXObject("Microsoft.XMLHTTP") ie6

•XMLHttpRequest() ie6以上

//IE6以上
        /*var oAjax=new XMLHttpRequest();
        
        alert(oAjax);*/
        
        //IE6
        /*var oAjax=new ActiveXObject("Microsoft.XMLHTTP");
        
        alert(oAjax);  */
        //用一個不存在的變量：出錯
       //用一個不存在的屬性：undefined 
       //兼容寫法
        var oAjax=null;
        
        if(window.XMLHttpRequest)
        {
            oAjax=new XMLHttpRequest();
        }
        else
        {
            oAjax=new ActiveXObject("Microsoft.XMLHTTP");
        }

第二步：鏈接服務器

•open(方法, 文件名, 異步傳輸)

–同步和異步

同步：事件一件一件來

異步：多件事情能夠同時進行

//open(方法, url, 是否異步)
        oAjax.open('GET', 'abc.txt', true);

第三步：發送請求

oAjax.send();

第四步：接收返回

//OnReadyStateChange
        oAjax.onreadystatechange=function ()
        {
            if(oAjax.readyState==4)
            {
                if(oAjax.status==200)
                {
                    alert('成功：'+oAjax.responseText);
                }
                else
                {
                    alert('失敗');
                }
            }

 

請求狀態監控

•onreadystatechange事件

–readyState屬性：請求狀態

»0  （初始化）尚未調用open()方法

»1  （載入）已調用send()方法，正在發送請求

»2  （載入完成）send()方法完成，已收到所有響應內容

»3  （解析）正在解析響應內容

»4  （完成）響應內容解析完成，能夠在客戶端調用了

status屬性：服務器(請求資源)的狀態 返回的內容

responseText：返回以文本形式存放的內容

responseXML：返回XML形式的內容

5.例子：

<script>
document.getElementById("search").onclick = function() { 
    var request = new XMLHttpRequest();
    request.open("GET", "serverjson.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() { 
    var request = new XMLHttpRequest();
    request.open("POST", "serverjson.php");
    var data = "name=" + document.getElementById("staffName").value 
                      + "&number=" + document.getElementById("staffNumber").value 
                      + "&sex=" + document.getElementById("staffSex").value 
                      + "&job=" + document.getElementById("staffJob").value;
    request.setRequestHeader("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("createResult").innerHTML = data.msg;
                } else {
                    document.getElementById("createResult").innerHTML = "出現錯誤：" + data.msg;
                }
            } else {
                alert("發生錯誤：" + request.status);
            }
        } 
    }
}
</script>

 

六、封裝ajax

function ajax(url, fnSucc, fnFaild)
{
    //1.建立ajax對象
    var oAjax=null;
    
    if(window.XMLHttpRequest)
    {
        oAjax=new XMLHttpRequest();
    }
    else
    {
        oAjax=new ActiveXObject("Microsoft.XMLHTTP");
    }
    
    //2.鏈接服務器
    //open(方法, url, 是否異步)
    oAjax.open('GET', url, true);
    
    //3.發送請求
    oAjax.send();
    
    //4.接收返回
    //OnReadyStateChange
    oAjax.onreadystatechange=function ()
    {
        if(oAjax.readyState==4)
        {
            if(oAjax.status==200)
            {
                //alert('成功：'+oAjax.responseText);
                fnSucc(oAjax.responseText);
            }
            else
            {
                if(fnFaild)
                {
                    fnFaild();
                }
            }
        }
    };
}

七、 jQuery中的AJAX

 1 <script>
 2 $(document).ready(function(){ 
 3     $("#search").click(function(){ 
 4         $.ajax({ 
 5             type: "GET",     
 6             url: "http://127.0.0.1:8080/ajaxdemo/serverjson2.php?number=" + $("#keyword").val(),
 7             dataType: "json",
 8             success: function(data) {
 9                 if (data.success) { 
10                     $("#searchResult").html(data.msg);
11                 } else {
12                     $("#searchResult").html("出現錯誤：" + data.msg);
13                 }  
14             },
15             error: function(jqXHR){     
16                alert("發生錯誤：" + jqXHR.status);  
17             },     
18         });
19     });
20 
21     $("#save").click(function(){ 
22         $.ajax({ 
23             type: "POST",     
24             url: "serverjson.php",
25             data: {
26                 name: $("#staffName").val(), 
27                 number: $("#staffNumber").val(), 
28                 sex: $("#staffSex").val(), 
29                 job: $("#staffJob").val()
30             },
31             dataType: "json",
32             success: function(data){
33                 if (data.success) { 
34                     $("#createResult").html(data.msg);
35                 } else {
36                     $("#createResult").html("出現錯誤：" + data.msg);
37                 }  
38             },
39             error: function(jqXHR){     
40                alert("發生錯誤：" + jqXHR.status);  
41             },     
42         });
43     });
44 });
45 </script>

 

ajax跨域請求限制

 

一、什麼是跨域？

跨域：也能夠說是跨域名，

簡單理解爲：一個域名下的文件去請求了和他不同的域名下的資源文件，那麼就會產生跨域請求。

 

二、域名地址的組成

http://img.mukewang.com/57023d51000114b712800720.jpg

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

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

當協議，子域名，主域名，端口號中任意一個不相同時，都算做不一樣域。

JS出於安全方面的考慮，不容許跨域調用其餘頁面的對象

  

 

事實上HTTP和HTTPS兩個協議的url看上去均可以省略端口號，可是他們訪問的默認端口不一樣

HTTP默認訪問80端口

HTTPS默認訪問443端口

因此http訪問https確定是跨域

 

Ajax跨域--跨域的解決

通常來講有兩種方法：

方法一：建立代理，經過在同域名的web服務器端建立一個代理 這是後臺的方法

方法二：使用jsonp全稱是JSON with Padding 。做用主要是用於解決主流瀏覽器的跨域數據訪問問題

jsonp的原理

主要是利用了 <script/> 標籤對 javascript 文檔的動態解析來實現。

jsonp只能改造get請求不能改造post請求。

jsonp跨域過程的實現

在資源加載進來以前定義好一個函數，這個函數接收一個參數（數據），函數裏面利用這個參數作一些事情 ，而後須要的時候經過script標籤加載對應遠程文件資源，當遠程的文件資源被加載進來的時候，就會去執行咱們前面定義好的函數，而且把數據看成這個函數的參數傳入進去。

栗子：百度下拉提示

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>無標題文檔</title>
 6 <style>
 7 #q {width: 300px; height: 30px; padding: 5px; border:1px solid #f90; font-size: 16px;}
 8 #ul1 {border:1px solid #f90; width: 310px; margin: 0;padding: 0; display: none;}
 9 li a { line-height: 30px; padding: 5px; text-decoration: none; color: black; display: block;}
10 li a:hover{ background: #f90; color: white; }
11 </style>
12 <script>
13 function baidu(data) {
14     var oUl = document.getElementById('ul1');
15     var html = '';
16     if (data.s.length) {
17         oUl.style.display = 'block';
18         for (var i=0; i<data.s.length; i++) {
19             html += '<li><a target="_blank" href="http://www.baidu.com/s?wd='+data.s[i]+'">'+ data.s[i] +'</a></li>';
20         }
21         oUl.innerHTML = html;
22     } else {
23         oUl.style.display = 'none';
24     }
25 }
26 window.onload = function() {
27     var oQ = document.getElementById('q');
28     var oUl = document.getElementById('ul1');
29     oQ.onkeyup = function() {
30         if ( this.value != '' ) {
31             var oScript = document.createElement('script');
32             oScript.src = 'http://suggestion.baidu.com/su?wd='+this.value+'&cb=baidu';
33             document.body.appendChild(oScript);
34         } else {
35             oUl.style.display = 'none';
36         }
37     }
38 }
39 </script>
40 </head>
41 
42 <body>
43     <input type="text" id="q" />
44     <ul id="ul1"></ul>
45 </body>
46 </html>

豆瓣

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>無標題文檔</title>
 6 <style>
 7 #q {width: 300px; height: 30px; padding: 5px; border:1px solid #f90; font-size: 16px;}
 8 dl {border-bottom: 1px dotted #000;}
 9 dt {font-weight: bold;}
10 </style>
11 <script>
12 function fn1(data) {
13 
14     var oMsg = document.getElementById('msg');
15     var oList = document.getElementById('list');
16     
17     console.log(data);
18     
19     oMsg.innerHTML = data.title.$t + ' : ' + data['opensearch:totalResults'].$t;
20     
21     var aEntry = data.entry;
22     var html = '';
23     for (var i=0; i<aEntry.length; i++) {
24         
25         html += '<dl><dt>'+ aEntry[i].title.$t +'</dt><dd><img src="'+ aEntry[i].link[2]['@href'] +'" /></dd></dl>';
26         
27     }
28     
29     oList.innerHTML = html;
30     
31 }
32 window.onload = function() {
33     
34     var oQ = document.getElementById('q');
35     var oBtn = document.getElementById('btn');
36     var oMsg = document.getElementById('msg');
37     var oList = document.getElementById('list');
38     
39     oBtn.onclick = function() {
40 
41         if ( oQ.value != '' ) {
42             var oScript = document.createElement('script');
43             oScript.src = 'http://api.douban.com/book/subjects?q='+oQ.value+'&alt=xd&callback=fn1';
44             document.body.appendChild(oScript);
45         }
46         
47         //http://api.douban.com/book/subjects?q='+oQ.value+'&alt=xd&callback=fn1&start-index=(當前頁*每頁顯示的條數)&max-results=10(每頁顯示的條數)
48         
49     }
50     
51 }
52 </script>
53 </head>
54 
55 <body>57     <input type="text" id="q" /><input type="button" id="btn" value="搜索" />
58     <p id="msg"></p>
59     <hr />
60     <div id="list"></div>
61 </body>
62 </html>

 

 

說明總結：

1.ajax和jsonp其實本質上是不一樣的東西。ajax的核心是經過XmlHttpRequest獲取非本頁內容，而jsonp的核心則是動態添加<script>標籤來調用服務器提供的js腳本。

2.可是ajax和jsonp在數據傳輸的過程當中都是能夠用json格式的數據。

3.其實ajax與jsonp的區別不在因而否跨域，ajax經過服務端代理同樣能夠實現跨域，jsonp自己也不排斥同域的數據的獲取。

4.ajax和jsonp這兩種技術在調用方式上「看起來」很像，目的也同樣，都是請求一個url，而後把服務器返回的數據進行處理，所以jquery和ext等框架都把jsonp做爲ajax的一種形式進行了封裝；

 

總結Ajax基礎

1. 什麼是AJAX
2. 什麼是服務器
3. 使用AJAX，讀取服務器環境下的文件
4. 讀取文件時注意編碼一致
5. 運用AJAX讀取服務器文件實例
6. 緩存及其影響
7. 用 new Date().getTime() 方式消除緩存的影響
8. 讀取服務器文件中的數據全是字符串
9. eval() 方法
10. 用eval() 方法解析字符串
11. 文件的擴展名與AJAX的關係
12. 讀取數組裏的json
13. AJAX 分頁實例，建立數據
14. 佈局、ajax 讀取、生成 li 元素，讀取數據，預先清空數據
15. AJAX 原理、http請求：GET \ POST，兩種方式的區別

Ajax中級

1. 編寫 Ajax 庫，AJAX 請求步驟2. 建立 ajax 對象：XMLHttpRequest3. 在 IE6 下兼容 XMLHttpRequest 的解決方案：ActiveXObject("Microsoft.XMLHTTP")4. window屬性與變量的關係5. 用 window 屬性來處理 IE6 的兼容性問題6. 鏈接服務器：oAjax.open()7. 同步與異步的區別8. 發送請求：oAjax.send()9. 接收返回：oAjax.onreadystatechange、readyState 屬性、oAjax.status、oAjax.responseText10. 封裝 AJAX 函數