// 创建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. c++ 调用外部程序exe-ShellExecuteEx

    此方法最实用的调用exe. #include <ShellAPI.h> string file_path = s_run_dir+"\\ConsoleApplication1.e ...

  2. How to raise exceptions in Delphi

    uses SysUtils; procedure RaiseMyException; begin raise Exception.Create('Hallo World!'); end;

  3. 【转】Android Support v4、v7、v13的区别和应用场景

    google提供了Android Support Library package 系列的包来保证来高版本sdk开发的向下兼容性,即我们用4.x开发时,在1.6等版本上,可以使用高版本的有些特性,如fr ...

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

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

  5. 解压zip文件中文文件名乱码问题

    主要原因是,在windows下压缩文件时,是以系统的默认编码(gbk,gb18030)来压缩,zip文件并没有声明编码的格式,因此,linux下解压缩时,也会使用系统默认的格式(utf-8)解压缩,编 ...

  6. 轻轻送送为你的App加点特效

    前言 今天突然在一个应用中看到一个转场动画,蛮有意思的 退出动画 进入动画 ActivityOptionsCompat options = ActivityOptionsCompat.makeScal ...

  7. 【leetcode】Swap Nodes in Pairs （middle）

    Given a linked list, swap every two adjacent nodes and return its head. For example,Given 1->2-&g ...

  8. HDU 5901 Count primes (1e11内的素数个数) -2016 ICPC沈阳赛区网络赛

    题目链接 题意:求[1,n]有多少个素数,1<=n<=10^11.时限为6000ms. 官方题解:一个模板题, 具体方法参考wiki或者Four Divisors. 题解:给出两种代码. ...

  9. html与js传json值给php

    //一段js代码 var data = {}, act = [], list = []; $('.set').find('input, textarea').each(function() { act ...

  10. [Android Pro] AES加密

    reference to :http://blog.csdn.net/wfung_kwok/article/details/7766427 package com.secufity.aes; impo ...