// 创建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. Python 开发轻量级爬虫04

    Python 开发轻量级爬虫 (imooc总结04--url管理器) 介绍抓取URL管理器 url管理器用来管理待抓取url集合和已抓取url集合. 这里有一个问题,遇到一个url,我们就抓取它的内容 ...

  2. 【工具】 原版完美激活 Flash builder 4.7 【非破解激活】

    此方法原理在于激活 FlashBuilder 4.7 而不是破解(靠修改文件,或改变版本号),所以此破解更加稳定! FlashBuilder 4.7 下载地址: 32bit:http://trials ...

  3. (转)Delphi工程文件说明

    1.DPR: Delphi Project文件,包含了Pascal代码.应用系统的工程文件2.PAS: Pascal文件,Pascal单元的源代码,可以是与窗体有关的单元或是独立的单元.3.DFM:D ...

  4. iOS应用架构谈（三）：网络层设计方案(上)

    iOS客户端应用架构看似简单,但实际上要考虑的事情不少.本文作者将以系列文章的形式来讨论iOS应用架构中的种种问题,本文是其中的第三篇,主要讲网络层设计以及安全机制和优化方案. 前言 网络层在一个Ap ...

  5. [Android Pro] AOSP download

    Ubuntu14.04系统下载Android源码,直接上步骤: 清华大学 TUNA 镜像源 https://mirrors.tuna.tsinghua.edu.cn/help/AOSP/ https: ...

  6. linux service命令常见使用方法

    service命令,顾名思义,就是用于管理Linux操作系统中服务的命令. 1. 声明:这个命令不是在所有的linux发行版本中都有.主要是在redhat.fedora.mandriva和centos ...

  7. 关于each

    1种 通过each遍历li 可以获得所有li的内容 <!-- 1种 --> <ul class="one"> <li>11a</li> ...

  8. file标签选择文件change事件失效处理方法

    file只能处罚一次change事件,在change事件中重新替换file标签即可生效 eg: $(function(){ //上传图片 $("body").on("ch ...

  9. iOS 文档分享相关

    在非系统预览情况下  指定文件打开系统分享菜单 NSString *savedPath = [NSHomeDirectory() stringByAppendingString:[NSString s ...

  10. Android WebView 支持H5的定位Js

    //启用数据库 webSettings.setDatabaseEnabled(true); String dir = this.getApplicationContext().getDir(" ...