通过上一节的学习，基本了解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);

    }

}

运行结果：

Ajax学习（二）：模仿jQuery的Ajax封装工具的更多相关文章

  1. 原生态AJAX详解和jquery对AJAX的封装

    AJAX: A :Asynchronous [eI`sinkrenes] 异步 J :JavaScript    JavaScript脚本语言 A: And X :XML 可扩展标记语言 AJAX现在 ...

  2. jQuery学习笔记之jQuery的Ajax（3）

    jQuery学习笔记之jQuery的Ajax(3) 6.jQuery的Ajax插件 源码地址: https://github.com/iyun/jQueryDemo.git ------------- ...

  3. 【jQuery基础学习】05 jQuery与Ajax以及序列化

    好吧,这章不像上章那么水了,总是炒剩饭也不好. 关于AJAX 所谓Ajax,全名Asynchronous JavaScript and XML.(也就异步的JS和XML) 简单点来讲就是不刷新页面来发 ...

  4. Ajax请求（二）--JQuery的Ajax请求方法

    JQuery库的Ajax请求的几种方法: 1. load( url, [data], [callback] ) :载入远程 HTML 文件代码并插入至 DOM 中. 参数含义: url (String ...

  5. ajax系列之用jQuery的ajax方法向服务器发出get和post请求

    打算写个ajax系列的博文,主要是写给自己看,学习下ajax的相关知识和用法,以更好的在工作中使用ajax. 假设有个网站A,它有一个简单的输入用户名的页面,界面上有两个输入框,第一个输入框包含在一个 ...

  6. Ajax学习笔记之一----------第一个Ajax Demo[转载]

    原文地址: http://www.cnblogs.com/pjx412/archive/2011/05/04/2037014.html 一.核心推动力:XMLHttpRequest对象XMLHttpR ...

  7. ajax学习笔记(原生js的ajax)

    ajax是一个与服务器端语言无关的技术,可以使用在任何语言环境下的web项目(如JSP,PHP,ASP等). ajax优点: 1) 页面无刷新的动态数据交互 2) 局部刷新页面 3) 界面的美观 4) ...

  8. Ajax学习总结（1）——Ajax实例讲解与技术原理

    摘要:AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术.AJAX 是一种用 ...

  9. Ajax学习（一）——与Ajax的初次相识

        AJAX是"Asynchronous Javascript And XML"的缩写,从字面上解释是"异步JavaScript和XML"的简称. 它不是一 ...

随机推荐

  1. 【BZOJ】【4146】 【AMPPZ2014】Divisors

    暴力 由于值的范围很小($ \leq 2*10^6$),所以用一个cnt数组统计每个值有多少个数,然后从小到大,统计每个数的倍数即可. 根据调和数?的神奇性质= =这样是$O(nlogn)$的…… / ...

  2. go语言之进阶篇单向channel特点

    1.单向channel特点 package main //"fmt" func main() { //创建一个channel, 双向的 ch := make(chan int) / ...

  3. Libnids（Library Network Intrusion Detection System） .

    Libnids(Library Network Intrusion Detection System)是一个网络入侵检测开发的专业编程接口.它实现了基于网络的入侵检测系统的基本框架,并提供了一些基本的 ...

  4. Android studio安装配置常见问题及其解决方案

    Android studio 是目前android公司主推的一款开发工具,相比较以前eclipse,它自己内部就集成了SDK等,方便开发.这几天我也尝试从官网下载了一个android studio进行 ...

  5. MYSQL数据删除数据，物理空间没释放

    当您的库中删除了大量的数据后,您可能会发现数据文件尺寸并没有减小.这是因为删除操作后在数据文件中留下碎片所致.OPTIMIZE TABLE 是指对表进行优化.如果已经删除了表的一大部分数据,或者如果已 ...

  6. 【Kafka】Kafka-副本-分区设置-性能调优

    Kafka-副本-分区设置-性能调优 SparkKafkaDemo - Executors kafka replication 负载均衡_百度搜索 Kafka 高性能吞吐揭秘 - 友盟博客 - Seg ...

  7. 基于spring与mockito单元测试Mock对象注入

    转载:http://www.blogjava.net/qileilove/archive/2014/03/07/410713.html 1.关键词 单元测试.spring.mockito 2.概述 单 ...

  8. 解决：Failure to transfer org.apache.maven.plugins:maven-jar-plugin:pom:2.4 from错误

    在使用Maven时出现以下错误: Failure to transfer org.apache.maven.plugins:maven-jar-plugin:pom:2.4 from https:// ...

  9. 编译安装openssl报错：POD document had syntax errors at /usr/bin/pod2man line 69. make: *** [install_docs]

    错误如下: cms.pod around line 457: Expected text after =item, not a number cms.pod around line 461: Expe ...

  10. （转）C/C++ 程序设计员应聘常见 面试笔试 试题深入剖析

    C/C++ 程序设计员应聘常见 面试笔试 试题深入剖析 http://www.nowcoder.com/discuss/1826?type=2&order=0&pos=23&p ...