zoukankan      html  css  js  c++  java
  • 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);
        }
    
    }

    运行结果:

  • 相关阅读:
    毕业设计(高校网上作业提交系统)开发记录(15)
    毕业设计(高校网上作业提交系统)开发记录(14)
    毕业设计(高校网上作业提交系统)开发记录(13)
    毕业设计(高校网上作业提交系统)开发记录(12)
    毕业设计(高校网上作业提交系统)开发记录(11)
    毕业设计(高校网上作业提交系统)开发记录(10)
    毕业设计(高校网上作业提交系统)开发记录(9)
    毕业设计(高校网上作业提交系统)开发记录(8)
    Java实现沙箱测试环境支付springboot
    Java面试宝典2019
  • 原文地址:https://www.cnblogs.com/alsf/p/9314200.html
Copyright © 2011-2022 走看看