思想：
續2的代碼，封裝的也算是可以，
但要求參數必須要順序出的出現：能否給一部分數據，不用null佔位：
思想就是接收Object即Map：
添加一個get方法,url請求地址,succ是成功以後的回調，falure是失敗以後的回調
直接接受一個map={url:url,succ:suc,falure:fal,xtype:text}
添加post方法，{url:url,param:{name:Jack,age:90},succ:suc,failure:fal,xtype:text}
jsp頁面使用時傳遞是一個map，在js中map就是一個Object
var ajax = newAjax();
// var url ="<c:url value='/xml/a.txt'/>";
// var url ="<c:url value='/xml/aa.json'/>";
// var url = "<c:urlvalue='/xml/a.txt'/>";
var url = "<c:urlvalue='/JSONServlet'/>";
ajax.post(
{
url:url,
succ:function(data){
alert("成功了"+data);
// alert(data.length);
// alert(data.getElementsByTagName("user").length); 這是一個map，同時也是一個對象
},
failure:function(status){
alert("沒有成功.."+status);
},
xtype:"text",
param:'name=張'
}
);
1.xhr.js
//聲明一個方法
function Ajax() {
// 實例化xhr對象
var xhr = null;
if (window.XMLHttpRequest){
xhr= newXMLHttpRequest();
}else{
xhr= newActiveXObject("Microsoft.XMLHttp");
}
// 添加一個get方法,url請求地址,succ是成功以後的回調，falure是失敗以後的回調
// 直接接受一個map={url:url,succ:suc,falure:fal,xtype:text}
this.get = function(obj) {
if (!obj.url) {// 如果沒有URL則直接返回
return;
}
xhr.open("GET", obj.url, true);
// 設置回調
xhr.onreadystatechange= function(){
if (xhr.readyState == 4) {
if (xhr.status == 200) {
if (obj.succ) {
// 判斷succ是否是一個函數
if (typeof (obj.succ) == "function"){
// 獲取數據,判斷返回類型
var res = null;
if (!obj.xtype || obj.xtype == "text") {
res= xhr.responseText;
}elseif(obj.xtype == "json") {
res= xhr.responseText;
res= eval("("+ res + ")");
}elseif(obj.xtype == "xml") {
res= xhr.responseXML;
}
obj.succ(res);
}
}
}else{
if (obj.failure) {
if (typeof (obj.failure) == "function"){
// 返回錯誤的狀態碼
obj.failure(xhr.status);
}
}
}
}
};
// 發送請求
xhr.send(null);
};
// 添加post方法，{url:url,param:{name:Jack,age:90},succ:suc,failure:fal,xtype:text}
this.post = function(obj) {
if (!obj.url) {// 如果沒有url直接返回
return;
}
xhr.open("POST", obj.url, true);
xhr.setRequestHeader("Content-type",
"application/x-www-form-urlencoded");
xhr.onreadystatechange= function(){
if (xhr.readyState == 4) {
if (xhr.status == 200) {
if (obj.succ) {
var res = xhr.responseText;
if (obj.xtype == "json") {
res= eval("("+ res + ")");
}elseif(obj.xtype == "xml"){
res= xhr.responseXML;
}
if (typeof (obj.succ) == "function"){
obj.succ(res);
}
}
}else{
if (typeof (obj.failure) == "function"){
obj.failure(xhr.status);
}
}
}
};
if (obj.param) {
xhr.send(obj.param);
}else{
xhr.send("");
}
};
}
2.xhr.jsp
<script type="text/javascript" src="<c:url value='/js/xhr2.js'/>"></script>
</head>
<body>
<button onclick="_one();">get</button>
<button onclick="_two();">post</button>
</body>
<script type="text/javascript">
function_one(){
//聲明ajax對象
var ajax = newAjax();
// var url ="<c:url value='/xml/a.txt'/>";
// var url ="<c:url value='/xml/aa.json'/>";
// var url = "<c:urlvalue='/xml/a.xml'/>";
var url = "<c:urlvalue='/JSONServlet'/>";
ajax.get(
{
url:url,
succ:function(data){
//alert("成功了"+data);
// alert(data.length);
alert(data.getElementsByTagName("user").length);
},
failure:function(status){
alert("沒有成功.."+status);
},
xtype:"json"
}
);
};
function_two(){
//聲明ajax對象
var ajax = newAjax();
// var url ="<c:url value='/xml/a.txt'/>";
// var url ="<c:url value='/xml/aa.json'/>";
// var url = "<c:urlvalue='/xml/a.txt'/>";
var url = "<c:urlvalue='/JSONServlet'/>";
ajax.post(
{
url:url,
succ:function(data){
alert("成功了"+data);
// alert(data.length);
// alert(data.getElementsByTagName("user").length);
},
failure:function(status){
alert("沒有成功.."+status);
},
xtype:"text",
param:'name=張'
}
);
};
</script>
</html>
3.當xhr2.jsp訪問servlet時:
public classJSONServlet extends HttpServlet {
public voiddoGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException,IOException {
System.err.println("get.............");
Randomr = newRandom();
int a = r.nextInt(30);
List<User>us = newArrayList<User>();
for (int i = 0; i < a; i++) {
us.add(new User("U" + i, "張三" + i, i));
}
// 2:設置返回text/html
response.setContentType("text/html;charset=UTF-8");
//3:轉成json
Stringstr = JSONArray.toJSONString(us);
response.getWriter().print(str);
}
public voiddoPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException,IOException {
request.setCharacterEncoding("UTF-8");
Stringname = request.getParameter("name");
System.err.println("post............."+name);
Randomr = newRandom();
int a = r.nextInt(30);
List<User>us = newArrayList<User>();
for (int i = 0; i < a; i++) {
us.add(new User("U" + i, "張三" + i, i));
}
// 2:設置返回text/html
response.setContentType("text/html;charset=UTF-8");
//3:轉成json
Stringstr = JSONArray.toJSONString(us);
response.getWriter().print(str);
}
}
運行結果：
