ajax小工具ajaxutils.js

ajaxutils.js页面

//创建request对象
function createXMLHttpRequest(){
try{
return new XMLHttpRequest(); //大多数浏览器
}catch(e){
try{
return ActvieXobject("Msxml2.XMLHTTP"); //ie6
}catch(e){
try{
return ActiveXOBject("Microsoft.XMLHTTP");//ie5和之前
}catch(e){
alert("哥们，您用的什么浏览器呀");
throw e;
}
}
}
}
/* option对象有如下属性
* //请求方式请求的url 是否异步请求体回调方法
method,url,asyn,params,callback,type
* */
function ajax(option){
   //1.得到xmlHttp
   var xmlHttp = createXMLHttpRequest();
   //2.打开链接
   if(!option.method){//默认为get请求
       option.method = "GET";
   }
   if(option.asyn == undefined){//默认为异步
       option.asyn =true;
   }
   xmlHttp.open(option.method,option.url,option.asyn);
   //3.判断是否为Post
   if("POST" == option.method){
       xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
   }
   option.params = null;
   //4.发送请求
   xmlHttp.send(option.params);
   //注册监听
   xmlHttp.onreadystatechange = function(){
       if(xmlHttp.readyState == 4 && xmlHttp.status == 200){//双重判断
           var data;
           if(!option.type){
               data = xmlHttp.responseText;
           }
           //获取服务器的响应数据，进行转换！
           else if(option.type == "xml"){
               data = xmlHttp.responseXML;
           }else if(option.type == "text"){
               data = xmlHttp.responseText;
           }else if(option.type == "json"){
               var text = xmlHttp.responseText;
               data = eval("(" + text + ")");
           }
           //调用回调方法
           option.callback(data);
       }
   };
};

Json1.java( servlet /Json1)

package cn.itcast.web.servlet;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class Json1 extends HttpServlet {
   public void doGet(HttpServletRequest request, HttpServletResponse response)
           throws ServletException, IOException {
       String str = "{\"name\":\"zhangsan\",\"age\":18,\"sex\":\"male\"}";
       response.getWriter().print(str);
       System.out.println(str);
   }

   public void doPost(HttpServletRequest request, HttpServletResponse response)
           throws ServletException, IOException {
   }
}

json3.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'json3.jsp' starting page</title>

   <meta http-equiv="pragma" content="no-cache">
   <meta http-equiv="cache-control" content="no-cache">
   <meta http-equiv="expires" content="0">
   <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
   <meta http-equiv="description" content="This is my page">
   
   <script type="text/javascript" src="<c:url value='/ajax-lib/ajaxutils.js'/>"></script>

   <script type="text/javascript">
   window.onload = function(){
   var btn = document.getElementById("btn");
   btn.onclick = function(){
   ajax(
   {
   url:"<c:url value='/Json1'/>",
   type:"json",
   callback:function(data){
   document.getElementById("h3").innerHTML = data.name +", " + data.age +", " +data.sex;
   }
   }
   );
   };
   };
   </script>

</head>

<body>
<button id="btn">点击这里</button>
<h1>演示自己封装的小工具</h1>
<h3 id="h3"></h3>

</body>
</html>

结果

ajax小工具ajaxutils.js

猜你喜欢