// 创建request对象

 function createXMLHttpRequest() {

     try {

         return new XMLHttpRequest();//大多数浏览器

     } catch (e) {

         try {

             return ActvieXObject("Msxml2.XMLHTTP");//IE6.0

         } catch (e) {

             try {

                 return ActvieXObject("Microsoft.XMLHTTP");//IE5.5及更早版本

             } catch (e) {

                 alert("用的是什么浏览器啊？");

                 throw e;

             }

         }

     }

 }

 //option对象有如下属性

          /*请求方式*/method,

         /*请求的url*/ 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");

     }

     //4. 发送请求

     xmlHttp.send(option.params);

     //5. 注册监听

     xmlHttp.onreadystatechange = function() {

         if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {//双重判断

             var data;

             // 获取服务器的响应数据，进行转换！

             if(!option.type) {//如果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);

         }

     };

 };
 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

 <html>

   <head>

     <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='/AServlet'/>",

                 type:"json",

                 callback:function(data) {

                     document.getElementById("h3").innerHTML = data.name + ", " + data.age + ", " + data.sex;

                 }

             }

         );

     };

 };

 </script>

   </head>

   <body>

 <%-- 点击按钮后，把服务器响应的数据显示到h3元素中 --%>

 <button id="btn">点击这里</button>

 <h1>显示自己封装的ajax小工具</h1>

 <h3 id="h3"></h3>

   </body>

 </html>

index.jsp

 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 AServlet extends HttpServlet {

     public void doGet(HttpServletRequest request, HttpServletResponse response)

             throws ServletException, IOException {

         /*

          * 向客户端发送json串

          */

         String str = "{\"name\":\"zhangSan\", \"age\":18, \"sex\":\"male\"}";

         response.getWriter().print(str);

         System.out.println(str);

     }

 }

AServlet

封装JavaScript的AJAX的更多相关文章

  1. 第一百六十节，封装库--JavaScript，ajax注册表单到数据库

    封装库--JavaScript,ajax注册表单到数据库 效果图 前台js var biaodan = $().xu_lie_biao_dan($('form').sh_jd()); //序列化获取表 ...

  2. 第一百五十八节，封装库--JavaScript，ajax说明

    封装库--JavaScript,ajax说明 封装库ajax()方法,ajax通讯方法,跨页面向动态页面发送或获取数据 /** ajax()方法,ajax通讯方法,跨页面向动态页面发送或获取数据 * ...

  3. 封装、调用ajax

    1.JavaScript代码 //封装ajaxfunction ajax(obj) { var xhr = new createXHR(); obj.url = obj.url + '?rand=' ...

  4. 初识JavaScript，Ajax，jQuery，并比较三者关系

    一.基本认识 1.JavaScript 定义: javaScript的简写形式就是JS,是由Netscape公司开发的一种脚本语言,一种广泛用于客户端Web开发的脚本语言,常用来给HTML网页添加动态 ...

  5. javascript进阶——Ajax

    统的Web 页面和应用中,用户每点击页面上的某个部分,浏览器就会向服务器发出一个请求,等待服务器做出响应,然后返回一个完整新网页,但在大多数情况下用户不得不忍受页面闪烁和长时间的等待.随着Web技术的 ...

  6. javascript实现ajax

    什么是 ajax ajax 即“Asynchronous JavaScript and XML”(异步 JavaScript 和 XML),也就是无刷新数据读取. http 请求 首先需要了解 htt ...

  7. JavaScript、Ajax与jQuery的关系

    简单总结: 1.JS是一门前端语言. 2.Ajax是一门技术,它提供了异步更新的机制,使用客户端与服务器间交换数据而非整个页面文档,实现页面的局部更新. 3.jQuery是一个框架,它对JS进行了封装 ...

  8. 第一百二十八节，JavaScript，Ajax

    JavaScript,Ajax 学习要点: 1.XMLHttpRequest 2.GET与POST 3.封装Ajax 2005年Jesse James Garrett发表了一篇文章,标题为:" ...

  9. 原生 JavaScript 实现 AJAX、JSONP

    相信大多数前端开发者在需要与后端进行数据交互时,为了方便快捷,都会选择JQuery中封装的AJAX方法,但是有些时候,我们只需要JQuery的AJAX请求方法,而其他的功能用到的很少,这显然是没必要的 ...

随机推荐

  1. JAVA volatile 关键字

    一.volatile(易变的) Java 语言提供了一种稍弱的同步机制,即volatile修饰变量.用来确保将变量的更新操作通知到其他线程,保证了新值能立即同步到主内存,以及每次使用前立即从主内存刷新 ...

  2. Django~urls.py--->views.py

    The 'r' in front of each regular expression string is optional but recommended. It tells Python that ...

  3. ABAP 单位转换函数

    CALL FUNCTION 'UNIT_CONVERSION_SIMPLE'         EXPORTING           input                = wa_all-btg ...

  4. 关于C语言中的转义字符

    1.转义字符的分类 1. 1一般转义字符 这种转义字符,虽然在形式上由两个字符组成,但只代表一个字符.常用的一般转义字符为: \a     \n     \t     \v     \b     \r ...

  5. Quatre 2D的绘图功能的三个步骤（上下文，绘图，渲染）

    一.qurza2d是怎么将绘图信息和绘图的属性绘制到图形上下文中去的? 说明: 新建一个项目,自定义一个view类和storyboard关联后,重写该类中的drowrect方法. 画线的三个步骤: ( ...

  6. UISearchController Attempting to load the view of a view controller while it is deallocating is not allowed and may result in undefined behavior

    Attempting to load the view of a view controller while it is deallocating is not allowed and may res ...

  7. October 2nd 2016 Week 41st Sunday

    The road to success is lined with many tempting parking spaces. 通往成功的路边充斥着许多诱人的休息区. Exhausted, I thi ...

  8. August 28th 2016 Week 36th Sunday

    What doesn't kill you makes you stronger. 那些没有彻底击败你的东西只会让你更强大. Where there is life, there is hope, a ...

  9. springMVC创建基础变量

    在springMVC中有一些变量是基础变量,可以在全局多个地方使用,在修改规则的时候,这样只用修改一个地方就好了,而且可以避免很多不必要的bug出现下面就来总结一下在我的项目中如何去创建一个全局基础变 ...

  10. hdu1212(大数取模)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1212 题意:给出两个数a, b,求a%b: 思路:(c+d)%e=c%e+d%e,(c*d)%e=(c ...