ajax的兩種寫法總結
ajax不是一種新的程式語言，而是使用JavaScript向伺服器提出請求並處理而不阻塞使用者，核心物件時XMLHTTPRequest,可以在不重新整理頁面的前提下進行區域性重新整理（使用非同步資料重新整理），使使用者的體驗更好，伺服器的壓力更小。
一.原生的ajax
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title></title> <script type="text/javascript"> function myajax(){ //第一步，建立XHR物件，根據瀏覽器的版本來建立不同的物件 var XHR=null; if(window.XMLHTTPRequest){ XHR=new XMLHTTPRequest(); }else{ XHR=new ActiveXObject("Microsoft.XMLHTTP"); //IE5,IE6版本的物件 } //第二步，傳送非同步請求 if(XHR!=null){ var name=document.getElementById("name").val(); XHR.open("GET","t10OP.jsp?name"+name,true); //三個引數分別是提交方式， url,true為非同步 XHR.onreadystatechange=myfun; //狀態改變時執行回撥函式 XHR.send(null); } //第三步，定義回撥函式 function myfun(){ if(XHR.readyState==4&&XHR.status==200){ var s=XHR.responseText; document.getElementById("info").innerHTML=s; } } } </script> </head> <body> 姓名：<input type="text" id="name"/><p/> <button onclick="myajax();">非同步請求</button><p/> <div id="info"></div> </body> </html>
模擬伺服器的程式碼：
t10OP.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String name=request.getParameter("name");
out.println("hello,"+name);
%>原生ajax的建立以及使用步驟：
1.先建立XMLHTTPRequest的物件
2.使用open方法，設定請求引數（請求的方式，請求頁面的相對路徑，是否非同步）
3.選擇回撥函式，一個處理伺服器響應的函式，使用onreadystatechange
4.獲取非同步物件readyState,“4”表示成功；伺服器響應的狀態status，200表示成功
5.讀取響應的資料，可以通過XHR物件的responseText屬性來讀取伺服器返回的資料
- 當用ajax傳遞中文時，需要對傳遞引數進行處理。
用到了encodeURI函式，主要是URI來進行轉碼的，它預設採用的是UTF-8的編碼。
name=encodeURI(encodeURI(name)); //需要呼叫兩次的encodeURI來解決亂碼問題；
在伺服器端就要相應的加上解碼程式碼：
name=URLDeceder.decode(name,"UTF-8"); //解碼程式碼
而且在解碼端還需要引進相應（解碼）的庫檔案
- 用post傳遞中文時，需要設定Header
XHR.setRequestHeader("Content-type","application/x-www-form-urlencoder"); //此程式碼一般加在open()之後，send()之前
- post與get的區別
1.get請求會將引數跟在URL後進行傳遞，post則是將引數作為HTTP訊息的實體內容傳送給WEB伺服器。
2.get最多隻能一次提交1024位元組的內容，而post則沒有此限制。
3.get請求資料會被瀏覽器快取起來，有可能造成嚴重的安全問題。
4.在伺服器端的區別：get請求，使用Request.QueryString來獲取引數，而post請求，則是使用Request.Form來處理。
二.jquery中的$.ajax()
$(function() {
$('#send').click(function () {
$.ajax({
type: "GET", //ajax的請求方式
url: "test.json", //規定傳送的url地址
async:true, //預設為true，所有請求為非同步請求
data: { //規定要傳送到伺服器的資料，只要是Object,String型別的都可以
"username": $("#username").val(), //也可以是{username:"使用者名稱"},
{'username':"使用者名稱"}
"content": $("#content").val()
},
dataType: "json", //預期伺服器的返回資料，是伺服器回饋的資料格式
success: function (data) { //請求成功後的回撥函式
$('#resText').empty();
var html = '';
$.each(data, function (commentIdndex, comment) {
html += '<div class="comment"><h6>' + comment['username']
+ ':</h6><p class="para"' + comment['content'] + '</p></div>';
});
$('#resText').html(html);
}
});
});
});其他引數：1.cache:預設是true 從瀏覽器快取中載入請求資訊
2.contentType:當傳送資訊到伺服器時，內容的編碼格式,預設值為"application/x-www-form-urlencoded"。
可以改為 contentType:"application/json".
get與post傳參：get可以直接將引數加在url後面，也可以放在send()方法中，此時都是將引數通過url傳輸，而在post中，資料只能放在send()方法中。其中post方法中data需要用JSON.stringify()來格式化一下，使其變為json字串，而在get方法中則不需要用JSON.stringify()來格式化。
json物件，js物件，json字串的關係：
json物件{"id"：1，"name":"long"} js物件{id：1，name:"long"}
json物件的鍵必須用“”（雙引號）括起來，js物件的鍵不用括起來，而且值可以為函式，而前者不行。
json物件加上’‘（單引號）就成為json字串。
json字串--->json物件：Json.parse();
json物件-->json字串:Json.stringify().