AJAX基礎知識點學習
阿新 • • 發佈：2019-03-07
ota color gif ati 規範 json string轉換 必須 idt
版權聲明：本文為博主原創文章，未經博主同意不得轉載。
3、異步載入/AJAX的特點及優勢
4、不能整個頁面所有使用AJAX進行數據申請的原因？
5、AJAX幾個基本API
??6、異步載入的幾個基本步驟
7、AJAX僅僅能處理文本類的文件。對於圖片不能處理
8、innerHTMl中script代碼是不會被運行的，AJAX返回的是字符串
假設每一個tab切換都用一個文本格式來創建則要求創建非常多，這時候須要用到數據格式JSON或者XML
9、?數據格式 JSON 與?XML都是常見的數據格式
10、??JSON優劣勢：
JSON/XML辨析：
11、JSON常見形式：對象、數組
12、JSON數據的內容
13、JSON數據類型轉換
轉載請註明出處：CSDN博客--HTML5自由者??http://blog.csdn.net/html5_
https://blog.csdn.net/huangyibin628/article/details/28281003
1、AJAX（Asynchronous JavaScript and XML）即，異步JavaScript和XML? ? ?
2、同步/異步差別|
同步：
①每次進行整個頁面的刷新 |
3、異步載入/AJAX的特點及優勢
| ① 局部刷新。按需載入。僅僅有頁面中真正改變的部分得到更新。 ② 能夠減少server的數據流量。頁面在更新，用戶能夠繼續工作 ③ 瀏覽器能夠從server端同一時候請求多項內容 ④ 每次傳遞的流量相對是比較小的，瀏覽器請求返回速度快一些 |
4、不能整個頁面所有使用AJAX進行數據申請的原因？
| 由於不利於SEO，標簽內部都是空的，SEO抓取不到，對於頁面中比較重要的信息，通常使用靜態 |
5、AJAX幾個基本API
| ①new XMLHttpRequest()?（IE5 和 IE6 使用 ActiveXObject）。?? ②open() ? ③send() ?? ④onload() ? ⑤responseText() |
老版本號的 Internet Explorer （IE5 和 IE6）使用 ActiveX 對象：variable=new ActiveXObject("Microsoft.XMLHTTP");
為了應對所有的現代瀏覽器，包括 IE5 和 IE6，請檢查瀏覽器是否支持 XMLHttpRequest 對象。假設支持，則創建 XMLHttpRequest 對象。假設不支持，則創建 ActiveXObject ： var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
|
|
open（method，url，asyn） 確定即將鏈接的網址及方式
參數 method：String 採用post/get形式請求 url：String， 要鏈接的網址 asyn:Boolean。是否發起異步請求 |
|
send（data）
參數? |
| <script> ???? var url = ‘2.html‘; ???? // 創建請求 ???? var xhr = new XMLHttpRequest(); ?????? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? ???? // 確定請求的方式以及請求的地址 ???? xhr.open(‘post‘,url,true); ???? // 發生請求 ???? xhr.send(null); ???? // server端載入完畢 ???? xhr.onload = function() {?document.writeln(xhr.responseText);?} </script> |
|
eval的作用：讓字符串當做JS去運行,假設遇到innerHTML中JS不運行的問題,須要使用eval方法,可是,性能不好,同一時候在JS的嚴格模式和非嚴格模式下存在不同,在項目和代碼中盡量少出現.
xhr.onload?= function() { ????????? con.innerHTML=xhr.responseText; ????????? /*con下的script*/ ????????? var cons = con.getElementsByTagName(‘script‘); ????????? for (var i = 0; i < cons.length; i++) { ???????????????eval(cons[i].innerHTML); ????????? }; } |
| /* ?*? a、直接在對象data後面加點。 再加屬性就可以； |
假設每一個tab切換都用一個文本格式來創建則要求創建非常多，這時候須要用到數據格式JSON或者XML
9、?數據格式 JSON 與?XML都是常見的數據格式
| JSON（JavaScript Object Notation）輕量級數據格式。直譯為JavaScript對象符號 XML是一種可擴展標記語言。與HTML都是標記語言 |
10、??JSON優劣勢：
| JSON的優勢 | JSON的劣勢 |
① 輕量級。體積小。節省流量，提高載入速度 ② 解析成原生JS對象，解析比XML更快 ③ 查找數據無需查找標簽，更快 |
在古老的瀏覽器如IE7-中不支持原生JSON解析, 須要引入第三方庫的支持 |
JSON/XML辨析：
| ①可讀性:兩者都有非常長的可讀性,XML數據嚴格遵循XML DOM模型規範,JSON嚴格遵循JS語言語法 ②可擴展性:XML數據通過自己定義標簽，能夠設計更復雜的數據嵌套結構,而JSON能夠通過數組和對象的無窮組合也能夠模擬隨意XML數據結構。 ③編碼難度:XML有豐富的編碼工具（如Dom4j、jDom等）,JSON也有json.org提供的工具,可是JSON編碼明顯比XMLeasy,即使不借助工具也能夠手寫JSON代碼,可是要手寫XML文檔就非常困難。 ④解碼難度:XML數據解析需考慮結構層次及節點關系,解析難度非常大,JSON數據不存在解析難度 ⑤文件大小:相同的數據。XML文件大小大於JSON文件體積大小 |
11、JSON常見形式：對象、數組
| JSON數組的寫法： 數組是一個有序的值的集合  |
JSON對象的寫法： 對象是一個無序的"名/值"對的集合  |
12、JSON數據的內容
| JSON中數據內容通過值來表示：字符串、數值、邏輯值、null、對象、數組 * 字符串必須使用雙引號括起來 * 數值能夠直接引用，不須要加入引號 * 邏輯值僅包括true和false，直接引用，不須要加入引號 * 在JSON數據中，分隔符（空格，制表符和換行符）是不被解析的，因此可在任何位置添加空白 |
13、JSON數據類型轉換
| JSON.parse(string);? 將json字符串string轉換為js對象 JSON.stringify(obj);?將JS對象轉換為JSON字符串 |
轉載請註明出處：CSDN博客--HTML5自由者??http://blog.csdn.net/html5_
AJAX基礎知識點學習