1.原生態態
? ??????原生的JS實現方式(了解)
? ??????????????//1.創建核心對象
? ? ? ? ????????????? ? 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");
? ? ? ? ? ????? }
? ? ? ? ? ? //2. 建立連接
? ? ? ? ? ? /*
? ? ? ? ? ? ? ? 參數:
? ? ? ? ? ? ? ? ? ? 1. 請求方式:GET、POST
? ? ? ? ? ? ? ? ? ? ? ? * get方式,請求參數在URL后邊拼接。send方法為空參
? ? ? ? ? ? ? ? ? ? ? ? * post方式,請求參數在send方法中定義
? ? ? ? ? ? ? ? ? ? 2. 請求的URL:
? ? ? ? ? ? ? ? ? ? 3. 同步或異步請求:true(異步)或 false(同步)
? ? ? ? ? ? */
? ? ? ? ? ? xmlhttp.open("GET","ajaxServlet?username=tom",true);
? ? ? ? ? ? //3.發送請求
? ? ? ? ? ? xmlhttp.send();
? ? ? ? ? ? //4.接受并處理來自服務器的響應結果
? ? ? ? ? ? //獲取方式 :xmlhttp.responseText
? ? ? ? ? ? //什么時候獲取?當服務器響應成功后再獲取
? ? ? ? ? ? //當xmlhttp對象的就緒狀態改變時,觸發事件onreadystatechange。
? ? ? ? ? ? xmlhttp.onreadystatechange=function()
? ? ? ? ? ? {
? ? ? ? ? ? ? ? //判斷readyState就緒狀態是否為4,判斷status響應狀態碼是否為200
? ? ? ? ? ? ? ? if (xmlhttp.readyState==4 && xmlhttp.status==200)
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? //獲取服務器的響應結果
? ? ? ? ? ? ? ? ? ? var responseText = xmlhttp.responseText;
? ? ? ? ? ? ? ? ? ? alert(responseText);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
2.JQeury實現方式? ? ? ? ?jq包支持
? ??????1. $.ajax()
????????????????* 語法:$.ajax({鍵值對});
????????????????//使用$.ajax()發送異步請求
? ? ? ? ? ? $.ajax({
? ? ? ? ? ? ? ????????? url:"ajaxServlet1111" , // 請求路徑
? ? ? ? ? ? ? ????????? type:"POST" , //請求方式
? ? ? ? ? ? ? ????????? //data: "username=jack&age=23",//請求參數
? ? ? ? ? ? ? ????????? data:{"username":"jack","age":23},
? ? ? ? ? ? ? ? success:function (data) {
? ? ? ? ? ? ? ? ? ? ????alert(data);
? ? ? ? ? ? ? ? },//響應成功后的回調函數
? ? ? ? ? ? ? ????????? error:function () {
? ? ? ? ? ? ? ? ? ????? alert("出錯啦...")
? ? ? ? ? ? ? ? },//表示如果請求響應出現錯誤,會執行的回調函數
? ? ? ? ? ? ? ? ????dataType:"text"http://設置接受到的響應數據的格式
? ? ? ? ? ? });
2. $.get():發送get請求
????????* 語法:$.get(url, [data], [callback], [type])
????????* 參數:
????????* url:請求路徑
????????* data:請求參數
????????* callback:回調函數
????????* type:響應結果的類型
3. $.post():發送post請求
????????* 語法:$.post(url, [data], [callback], [type])
????????* 參數:
????????* url:請求路徑
????????* data:請求參數
? ? ? ? * callback:回調函數
????????* type:響應結果的類型
4. $("button").click(function(){
? $("div").load('demo_ajax_load.txt');
});
3.json
? ? ? ? 1) 創建json普通對象?? var person = {"張三", 23};
? ? ? ? 2)創建json對象??var person = {"name": "張三", age: 23, 'gender': true};
? ? ? ? 3)創建json數組??var ps = [{"name": "張三", "age": 23, "gender": true},
? ? ? ? ????????????????????????????????????????? ? {"name": "李四", "age": 24, "gender": true},
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? {"name": "王五", "age": 25, "gender": false}];
? 4.把對象轉換成json對象
? ? ? ? ? String s = json.toJSONString(對象);
? ? ? ? ? <dependency>
? ? ? ? ? ? <groupId>com.alibaba</groupId>
? ? ? ? ? ? <artifactId>fastjson</artifactId>
? ? ? ? ? ? <version>1.2.47</version>
</dependency>