// 创建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. Effective C++ -----条款44：将与参数无关的代码抽离templates

    Templates生成多个classes和多个函数,所以任何template代码都不该与某个造成膨胀的template参数产生相依关系. 因非类型模板参数(non-type template para ...

  2. 括号配对问题_栈<stack>

    问题 A: 括号配对问题 时间限制: 3 Sec  内存限制: 128 MB提交: 3  解决: 2[提交][状态][讨论版] 题目描述 现在,有一行括号序列,请你检查这行括号是否配对. 输入 第一行 ...

  3. Android 运行时权限处理

    引言 Android 6.0 (API 23) 开始引入了运行时权限检查 (Permissions at Run Time),用户不需要在安装时同意授予应用权限,而是在应用运行时动态去申请所需要的权限 ...

  4. SQL Server case表达式的用法

    ★CASE表达式是一个标量表达式,它基于条件逻辑来返回一个值.因为CASE是一个标量表达式,所以它可以应用在SELECT.WHERE.HAVING以及ORDER BY子句中. CASE表达式有两种格式 ...

  5. LeetCode 459 Repeated Substring Pattern

    Problem: Given a non-empty string check if it can be constructed by taking a substring of it and app ...

  6. 20145213祁玮のJava课程总结

    20145213のJava学习总结 每周学习笔记 1.第一周读书笔记 2.第二周读书笔记 3.第三周读书笔记 4.第四周读书笔记 5.第五周读书笔记 6.第六周读书笔记 7.第七周读书笔记 8.第八周 ...

  7. PHP如何随机获取一个二维数组中的一个值

    获取一个数组: $awardid_list=pdo_fetchall('select id from '.tablename($this->table_award)); 这是微擎的写法哈,意思就 ...

  8. iOS计算字符串的宽度高度

    OC开发中会遇到根据字符串和字体大小来算计算出字符串所占的宽高->> 封装方法如下: #import <Foundation/Foundation.h> #import < ...

  9. IOS开发之实现App消息推送

    转自:http://blog.csdn.net/shenjie12345678/article/details/41120637 第一部分 首先第一步当然是介绍一下苹果的推送机制(APNS)咯(ps: ...

  10. Linux进程的前后台切换

    一.Linux前后台切换的相关命令:   1.&  在命令的后面加上这个符合,让命令进程在后台运行  例如: #ping 127.0.0.1 &        // 此时命令ping ...