// 创建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. TokuDB 引擎安装测试

    背景: TokuDB引擎是有Tokutek开发的一个数据库存储引擎,在设计之初便引入了独特的索引算法,在其官网测试的文章中看到TokuDB性能比InnoDB高出很多. MySQL是一个插件式的数据库, ...

  2. 几种Linux 查询外网出口IP的方法

    Curl 纯文本格式输出: curl icanhazip.com curl ifconfig.me curl curlmyip.com curl ip.appspot.com curl ipinfo. ...

  3. 针对SYN洪水攻击的防御措施

    可以运用sysctl命令进行配置,由于本命令参数较多,这里只简单记录几个比较常用的参数: 1.tcp_max_syn_backlog 这个参数指定了后备队列可维持的TCP半开连接的数目,如果该值设定很 ...

  4. jboss服务器修改端口说明

    如果一台机器安装多个jboss服务器,就需要修改服务器的端口号,否则各个服务器之间会有冲突.目前确认需要修改的配置如下一.vi $JBOSS_HOME/server/default/conf/jbos ...

  5. ORACLE 远程导入导出数据库

      Oracle数据导入导出imp/exp就相当于oracle数据还原与备份.exp命令可以把数据从远程数据库服务器导出到本地的dmp文件,imp命令可以把dmp文件从本地导入到远处的数据库服务器中. ...

  6. 【leetcode】Sort List (middle)

    Sort a linked list in O(n log n) time using constant space complexity. 思路: 用归并排序.设输入链表为S,则先将其拆分为前半部分 ...

  7. 【leetcode】Spiral Matrix（middle）

    Given a matrix of m x n elements (m rows, n columns), return all elements of the matrix in spiral or ...

  8. 【XLL 文档翻译】【第1部分】 Add-in 管理器 和 XLL 接口函数

    xlAddInManagerInfo/xlAddInManagerInfo12 在 Excel 会话中,每一次调用 Add-In 管理器时,系统会调用这两个函数.此函数可以在 Add-In 管理器中提 ...

  9. C++静态代码分析工具对比cppCheck与PreFast

    具体内容参看文件<CppCheck和PreFast对Cplusplus代码静态分析测试.zip> C++测试源代码main.cpp #define NULL 0 #include < ...

  10. -bash: pod: command not found

    OS X 系统没升级之前用的 cocoapods 一点儿问题都没有,但是升级成版本10.11.4 OS X EI Capitan之后,在终端除了cd 指令可以用之外,其他任何指令输入都是提示-bash ...