來簡單聊聊原生ajax和json

What is AJAX（asynchronous javascript and xml）

是一種用來改善用戶體驗的技術，其本質是利用瀏覽器內置的特殊對象（XMLHttpRequest，也就是Ajax對象），向服務器發送異步請求，服務器返回部分數據（一般不會是整個頁面），瀏覽器利用這些數據對頁面作部分更新，整個訪問服務器的過程沒有存在月面的刷新，不會打斷用戶的操做

異步請求：發送請求的同時，流浪其不會銷燬當前頁面，用戶仍然能夠對當前頁面作其餘操做

如何得到ajax對象

兼容性問題：

• ie使用的是ActiveXObject
  

• 其餘瀏覽器是XMLHttpRequest
  這裏就有兼容性問題，對於不一樣的瀏覽器有不一樣的解決辦法，底層的解決辦法是：
  

  function getxhr() { var xhr = null; if(window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else { xhr = new ActiveXObject("Microsoft.XMLHttp"); } return xhr; }

ajax對象的屬性

• onReadyStateChange
  用來綁定一個事件處理函數，用來處理readyStateChange事件
  當ajax對象中的readyState屬性值發生從0到1的改變的時候，就會產生readystatechange事件
  
• readyState
  有五個值（0，1，2，3，4）
  表示ajax對象和服務器通訊的狀態
  若是值爲4的時候，表示ajax對象已經獲取了服務器返回的全部數據
  這個事件事件處理函數就能夠從對象中讀取數據
• responseText
  返回的對象中的文本數據
• responseXML
  返回的對象中的xml數據
• status
  得到狀態碼
  500服務器出錯
  200服務器正常
  404請求路徑沒法找到
  302重定向
  

編程步驟

獲取ajax對象

例如:
var xhr = getXhr();

發生請求

• 發送get請求
  

---

1. xhr.open("get","check_uname.do?uname=tom&age=18", true);
   
   第一個參數是請求方式
   第二個參數是請求地址
   第三個參數是是否發送異步請求，通常都是true
   若是是false，發送請求的時候，頁面不會消失，但是瀏覽器會鎖定當前頁面，用戶不可以對當前頁面作其餘操做
   
   

2. xhr.onreadystatechange=function1;
   綁定一個事件，在狀態轉換的時候會調用這個函數

3. xhr.send(null);

---

• 發送post請求
  

---

xhr.open("post", "get_luckyNum.do", true);
複製代碼

三個參數和get差很少同樣，不過在請求地址中，再也不加入參數，這個參數會加載在最後的send裏面

xhr.send("name=mackyhuang");
複製代碼

這是第一個不一樣點
而後須要加上一個請求頭
（按照http協議，若是發送的是post請求，那麼在請求數據包中應該帶有conntent-type請求頭）默認狀況下，ajax不會帶有請求頭，因此須要

xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
複製代碼

---

編寫服務器端的程序

一般不須要返回完整的頁面，只須要返回部分數據

編寫function1()；

就是那個事件處理函數

function function1()
{
	//獲取服務器返回的數據
	if(xhr.readyState == 4  && xhr.status == 200)
	{
		var txt = xhr.responseText();
		用txt的文件修改頁面內容
	}
    	
}
複製代碼

整個的基本代碼

設置響應函數

<input id="username" type="text" name="username" onblur="check_name();">
複製代碼

get請求方式函數具體代碼

function check_name() {
        var username = document.getElementById("username").value;
        var msg = document.getElementById("msg");
        var xhr = getxhr();
        xhr.open("get", "check_login.do?username=" + username, true);
        xhr.onreadystatechange = function () {
            if(xhr.readyState == 4 && xhr.status == 200)
            {
                var txt = xhr.responseText;
                msg.innerHTML = txt;
            }
        };
        xhr.send(null);
    }
複製代碼

####post請求方式函數具體代碼

function get_num()
    {
        var pLable = document.getElementById("lucky");
        var xhr = getxhr();
        xhr.open("post", "get_luckyNum.do", true);
        xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
        xhr.onreadystatechange = function(){
        if(xhr.readyState == 4 && xhr.status == 200)
        {
            var txt = xhr.responseText;
            pLable.innerHTML = txt;
        }
    };
        xhr.send("name=mackyhuang");
    }
複製代碼

緩存問題

在使用ie瀏覽器發送get方式給ajax請求的時候，會有緩存問題 ，即只有第一次點擊有效，接下來的每一次點擊都沒有響應 ，由於ie會判斷請求地址是否訪問過，若是訪問過就會調用上次訪問的結果來顯示。
解決方式是在請求地址後方加上？隨機數

編碼問題

get提交方式，ie瀏覽器的ajax的編碼的gbk， 其餘瀏覽器的編碼是utf-8，在服務器端的編碼是iso-8859-1

• 在配置文件中配置URLEncoding=utf-8
• 而後使用javascript的內置函數EncodeURL，使其編碼爲utf-8，這個時候全部瀏覽器都會用utf-8來編碼

post提交方式，全部瀏覽器的編碼是utf-8，在服務器端的編碼是iso-8859-1

• request.setCharacterEncoding("utf-8");

what is Json

是一種輕量級的數據交換格式 相對於xml來講，是輕量級的，解析速度更快，文檔更小

語法

• {"":"","":""} 這裏必須須要雙引號
• 屬性值能夠是stirng number null object true/false
• 若是屬性值是string,就必需要雙引號

在服務器把對象轉換成json

• 須要一個包 json-lib

  JSONObject jsonObject = JSONObject.fromObject(people);
    return jsonObject.toString();
    JSONArray jsonObject = JSONArray.fromObject(arrayList);
    return jsonObject.toString();
  複製代碼

包中的類 JSONObject 和 JSONArray， 分別是須要生成單個json，和json數組

瀏覽器把json轉換成對象

• javascripe的內置對象JSON,須要他的一個方法，parse():

  var object = JSON.parse(jsonString);
  複製代碼

jQuery 對 Ajax 的支持

$.ajax({})

{}是一個對象，裏面的屬性：

• url 請求地址
• data 請求參數
• type 請求類型
• dataType 返回的值的類型
• success 服務器返回成功的事件處理函數
• error 服務器返回異常的事件處理函數

編寫一個ajax，每五秒返回八個數據到頁面上面

表示層代碼：

<script type="text/javascript">
	
		$(function(){
			setInterval(do_query, 5000);
		});
		
		function do_query()
		{
			$("#tb1").empty();
			$.ajax({
				"url":"query.do",
				"type":"post",
				"dataType":"json",
				"success":function(books){
					$("#tb1").empty();
					//alert(books);
					for(var i = 0; i < books.length; i++)
					{
						var book = books[i];
						$("#tb1").append("<tr><td>" + book.name + "</td><td>" 
								+ book.price + "</td><td>" + 
								book.page + "</td></tr>");
					}
				}
			})
		}
	</script>
複製代碼

服務器代碼

response.setContentType("text/html;charset=utf-8");
    request.setCharacterEncoding("utf-8");
    String path = request.getRequestURI();
    String action = path.substring(path.lastIndexOf("/"), path.lastIndexOf("."));
    System.out.println(action);
    PrintWriter printWriter = response.getWriter();
    if("/query".equals(action))
    {
        ArrayList<Book> books = new ArrayList<Book>();
        Random random = new Random();
        for(int i = 0; i < 8; i++)
        {
            books.add(new Book("Java企業級應用開發" + random.nextInt(8888), 
                    88, 189 + random.nextInt(8888)));
        }
        JSONArray jsonArray = JSONArray.fromObject(books);
        String json = jsonArray.toString();
        System.out.println(json);
        printWriter.print(json);
    }
複製代碼

load

這是一個輕量級的ajax請求函數，
使用狀況是，須要直接將返回的參數添加到一個標籤上面的時候

在服務器端編寫代碼，而後在jsp中

$("#lucky").load("get_luckyNum.do");
複製代碼

博文是做者本來在其餘平臺的，現遷移過來