JSON資料和AJAX學習
阿新 • • 發佈：2018-12-30
web頁面用Ajax的方式和服務端進行json資料互動
Ajax - - (Asynchronous Javascript And XML) 是js的子集(核心物件 XmlHttpRequest)
XMLHttpRequest物件可以在不向伺服器提交整個頁面的情況下 實現區域性更新網頁
可以設定請求型別 get請求 post設定head引數請求
XMLHttpRequest 可以同步或非同步返回伺服器的響應 能以任何形式的文字文件返回
名為XMLHttpRequest 但並不限於和XML文件使用 可接收任何形式的文字文件
Ajax即區域性刷新技術 兩種訪問方式都屬於區域性重新整理 不會整個頁面重新整理
同步請求 傳送請求後 伺服器未執行完畢 頁面會假死 無法進行其他操作
非同步請求 傳送請求後 無需等到伺服器執行完畢 可繼續其他操作
<script type="text/javascript">
function test(){
//建立Ajax引擎物件 操作都通過此物件
var xhr= new XMLHttpRequest();
//繫結提交地址 引數為 請求型別 URL地址 是否非同步(預設為true 非同步)
xhr.open("GET","www.baidu.com",true);
//傳送請求
xhr.send();
//繫結監聽 監聽伺服器是否資料響應給Ajax引擎 readyState改變後觸發 | readyStatus | 描述 |
|---|---|
| 0 | (請求未初始化)未呼叫open() |
| 1 | (伺服器已建立連線)正在呼叫send() 已傳送請求 |
| 2 | (請求已接收)send()完成 已收到全部響應內容 |
| 3 | (請求已處理)正在解析響應內容 |
| 4 | (請求已完成響應就緒)響應內容解析完成 客戶端可呼叫 |
| status - - 200 | OK(正常響應) |
|---|---|
| status - - 404 | 未找到頁面(失敗響應) |
//完整例項
function test(){
//用XMLHttpRequest做形參 IE6會報錯 把XMLHttpRequest作為形參 IE報undefined
if (window.XMLHttpRequest) {
//除了IE5 & IE6 其他瀏覽器使用的物件[Chrome,Firefox,Opera,Safari,IE7+]
var xhr = new XMLHttpRequest();
} else {
//IE5 & IE6 瀏覽器專屬物件
var xhr = new ActivexObject("Microsoft.XMLHTTP");
}
xhr.open("GET", "baidu.com", true);
xhr.send();
xhr.onreadystatechange = function() {
//readyState = 4 讀取請求完成響應就緒
if (xhr.readyState == 4) {
alert("讀取請求完成響應就緒");
//status = 200 正常響應 頁面可獲得資料
if (xhr.status == 200) {
alert("響應成功");
var test = xhr.responseText;
alert(test);
} else {
//列印狀態碼
alert(xhr.status);
}
}
}
}
//GET請求方式 兩種引數設定方式相同
//第一中引數設定方式
xhr.open("GET", "baidu.com?name=test", true);
xhr.send();
//第二種請求設定方式
xhr.open("GET", "baidu.com", true);
xhr.send("name=test");
//POST請求方式 必須設定請求頭 設定引數必須使用send函式設定
xhr.open("POST", "baidu.com", true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send("name=test");
JSON 物件表示法(JavaScript Object Notation) 編碼為UTF-8
json的字串用雙引號 " - - " json的鍵用雙引號 " - - "
json兩種表示格式物件
物件格式 : {“key1”:obj1,“key2”:obj2,“key3”:obj3}
陣列格式 : [obj1,obj2,obj3]
JSON是js的一個子集 資料型別有六中
number = js的number
boolean = js的boolean(true&false)
string = js的string
null = js的null
array = js的Array - - []
object = js的 - - {}
var test = JSON.stringify(str);
//取出物件中的資料
var user = {"name":"test","age":18,"address":"北京"};
var name = user.name;
alert(name);--test
//取出陣列中的資料
var user = [{"name":"xxxx"},{"age":25},{"address":"上海"},
{"name":"test"},{"age":18},{"address":"廣州"}];
var name = user[0].name;
alert(name);--xxxx
jQuery使用Ajax 互動json資料
function test(){
alert("test1");
$.get(
"baidu.com",//url地址
//"name=user&age=18",--普通請求引數
{"name":"user","age":"18"},//json請求引數
function(){alert("請求成功");},//該test()函式執行成功 回撥該函式
);
alert("test2");
alert("test3");
}
//頁面彈出框彈出順序 test1->test2->test3->請求成功
//java接收引數 json格式和普通傳入字串無差別
String name = request.getParameter("name");
String age = request.getParameter("age");
//java傳給頁面Ajax一個json格式的字串 Ajax自動解析
response.getWriter().write("{\"name\":\"leige\",\"age\":23\"}");
//js Ajax引擎接收服務端返回的資料
$.get(
"/Test/test",
{"name":"lilei","age":18},
function(data){alert(data);},
"json"//設為text 則上面data為文字型別(string)
);
//頁面彈出[object,object]
//post請求方式與get一致
$.get(
"/Test/test",
//"name=user&age=18",--普通請求引數 傳統post不可使用 Ajax的post可使用該方式
{"name":"lilei","age":18},
function(data){alert(data);},
"json"//設為text 則上面data為文字型別(string)
);
Ajax的post請求已經把編碼設為UTF-8 java的servlet無需重編碼 再次編碼資料會亂碼
Ajax的get請求預設編碼為ISO-8859 需要程式 java的servlet重編碼
name = new String(name.getBytes(“ISO8859-1”),“UTF-8”);
function ajaxTest(){
$.ajax({
url:"/Test/test",//訪問地址
async:false,//是否同步 預設為true 同步
type:"POST",//請求方式
data:{"name":"Ajaxtest","age":28},//請求內容
success:function(data){alert(data);},//成功後回撥
error:function(){alert("訪問失敗");},//失敗後回撥
dataType:"json"//響應內容格式
});
}