Ajax学习（二）：模仿jQuery的Ajax封装工具

通过上一节的学习，基本了解Ajax的使用，

但是这样使用很麻烦，这里封装ajax为一个方法，作为一个ajax工具，传入相应参数就可以实现ajax的使用。

模仿jQuery的Ajax。

如下是jQuery的Ajax使用，只需要传入相应参数，即可实现Ajax

 

第一步：创建Ajax工具类：

function createXMLRequst(){
    try{
        return new XMLHttpRequest();
    }catch(e)
    {
        try{
            return new ActiveXObject("Msxml2.XMLHTTP");
        }catch(e){
            try{
                return new ActiveXObject("Microsoft.XMLHTTP");
            }catch(e){
                alert("不支持浏览器版本");
                throw e;
            }
        }
    }
}

function ajax(option)
{
    var xmlHttp=createXMLRequst();
    //打开链接
    if(!option.method)//默认get
    {
        option.method="GET";
    }
    if(option.asyn==null)//默认为异步处理
    {
        option.asyn=true;
    }
    
    xmlHttp.open(option.method,option.url,option.asyn);
    
    //POST需要设置请求头
    if(option.method=="POST")
    {
        xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    }
    //发送请求，加上请求参数
    xmlHttp.send(option.params);
    //给异步对象的onreadystatechange事件注册监听器
    xmlHttp.onreadystatechange=function()
    {
        //双重判断，判断是否为4的状态，并且响应状态码为：200
        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);
        }
    }
}

第二步：在jsp中引入该脚本，同时调用脚本中的ajax()方法，实现Ajax。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- 地址可以使用以下方式,也可直接写url
<script type="text/javascript" src="/AjaxDemo/ajax_lib/ajaxUtils.js"></script>
引入Ajax工具脚本　　 -->
<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:"/AjaxDemo/JsonAjax",
                type:"json",
                callback:function(data){
                    document.getElementById("h3").innerHTML=data.name+"，"+data.age+","+data.sex;
                }
            }
        );
    }
}
</script>
<title>测试Ajax工具</title>
</head>
<body>

<h3>测试Ajax工具</h3>
<button id="btn">点击测试Ajax工具</button>
<h3 id="h3"></h3>
</body>
</html>

第三步：编写该Ajax调用的servlet：向客户端返回json字符串

package com.Ajax;

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

@WebServlet("/JsonAjax")
public class JsonAjax extends HttpServlet {
    private static final long serialVersionUID = 1L;

    public JsonAjax() {
        super();
    }
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        response.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=UTF-8"); 
        //向客户端返回数据，由Ajax获取
        response.getWriter().print("{\"name\":\"张三\",\"age\":\"32\",\"sex\":\"男\"}");
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

}

 

运行结果：

 

posted @ 2018-07-15 17:29  美好的明天  阅读(1045)  评论(0)  编辑  收藏  举报