Ajax的简单封装

Ajax的全称是AsynchronousJavaScriptAndXML

如有疑问请参考:http://zh.wikipedia.org/zh-cn/AJAX

以及传智播客的视频教程：http://java.itcast.cn/news/8308d118/740a/4dcd/8dbf/c73d2fe5bc60.shtml

其实已经有好多框架对它进行了封装，但是还是有好多时候用到自己封装的

透露一下，本人是宇多田光的听众之一哦！

封装后的代码如下：

文件路径：\web\AjaxRequest.js

/**
 * Created by yuki on 2014/5/13.
 *
 * 用法：
 1.新建对象Ajax对象
 2.设定带有一个XMLHttpRequest返回参数的回调函数
 3.执行execute,传入请求方式，url,是否异步
 *
 */
function Ajax()
{
    this.xmlHttp = null;
    this.responseText = null;
    this.callback = null;
}

/**
 * 执行ajax
 */
Ajax.prototype.execute = function(method, url, async){
    this.createXmlHttp();
    this.sendUrl(method, url, async);
    this.getResponseText();
    this.callback();
};

/**
 * 服务器返回服务器输出的纯文本数据
 * @param embed
 */
Ajax.prototype.getResponseText = function(){
    // 判断对象的状态
    if (this.xmlHttp.readyState == 4) {
        // 判断http交互是否成功
        if (this.xmlHttp.status == 200) {
            // 判断服务器返回的数据
            // 获取服务器输出的纯文本数据
            this.responseText = xmlHttp.responseText;
        }
    }
};

/**
 * 发送url请求
 * @param method 取值为GET或POST
 * @param url    要发送的url可以带请求参数
 * @param async  true表示异步，false表示同步
 */
Ajax.prototype.sendUrl = function(method, url, async){
    // 注册回调函数
    this.xmlHttp.onreadystatechange = this.callback;
    // 第三个参数表示同步false或是异步true
    this.xmlHttp.open(method, url, async);
    // 发送数据，开始和服务器端交互
    this.xmlHttp.send();
};

/**
 * 创建XMLHttpRequest
 */
Ajax.prototype.createXmlHttp = function(){
    if (window.XMLHttpRequest) {
        this.xmlHttp = new XMLHttpRequest();
        // 针对某些特定版本的Mozilla浏览器的BUG修正
        if (this.xmlHttp.overrideMimeType) {
            this.xmlHttp.overrideMimeType('text/xml');
        }
    } else if (window.ActiveXObject) {
        // 针对IE6, IE5.5, IE5
        var activexName = ["MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];
        for (var i = 0; i < activexName.length; ++i) {
            try {
                // 取出控件名进行创建，如果创建成功就终止循环
                this.xmlHttp = new ActiveXObject(activexName[i]);
                break;
            } catch (e) {
                // do nothing...
            }
        }
    }
    //确认XMLHttpRequest对象创建成功
    if (!this.xmlHttp) {
        alert('XMLHttpRequest对象创建失败！');
    } else {
        alert('XMLHttpRequest对象创建成功！');
    }
};

代码封装好了，怎么使用它呢？

看html页面的代码：

文件路径：\web\AjaxRequest.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="GBK">
    <title>AjaxRequest</title>

</head>
<script src="AjaxRequest.js"></script>
<body>

<div id="div1" style="width:200px; height:200px; background-color: darkgoldenrod"></div>

<script>
    var ajax = new Ajax();
    ajax.callback = function(){
        var responseText = this.responseText;
        var div1 = document.getElementById('div1');
        div1.innerHTML = responseText;
    };
    ajax.execute('GET', 'First.jsp', true);
</script>

</body>
</html>

它是要访问服务器的，让jsp为它提供服务吧

文件路径：\web\First.jsp

<%--
  Created by IntelliJ IDEA.
  User: yuki
  Date: 2014/5/13
  Time: 23:07
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>HI</title>
</head>
<body>

<h1>Hello Ajax!</h1>
Date = <%= new java.util.Date() %>
<br>

</body>
</html>

这样，Ajax的技术就可以是在页面不刷新的情况下，得到服务器的输出了

下面是结果：

更多好文请关注我的博客：

http://www.cnblogs.com/kodoyang/

html --- ajax --- javascript --- 简单的封装的更多相关文章

  1. 用javascript简单封装AJAX

    1.创建一个AJAX引擎对象 var CreateAjax = function () { var xhr = null; if (window.XMLHttpRequest) { //非IE游览器 ...

  2. ajax的三次封装简单概况

    原生ajax:                readyState         准备状态                status             页面状态               ...

  3. 第107天：Ajax 实现简单的登录效果

    使用 Ajax 实现简单的登录效果 Ajax是一项使局部网页请求服务器信息,而不需整体刷新网页内容的异步更新技术.这使得向服务器请求的数据量大大减少,而且不会因局部的请求失败而影响到整体网页的加载. ...

  4. 第一百六十一节，封装库--JavaScript，完整封装库文件

    封装库--JavaScript,完整封装库文件 /** *feng_zhuang_ku_1.0版本,js封装库,2016/12/29日:林贵秀 **/ /** 前台调用 * 每次调用$()创建库对象, ...

  5. Django ajax的简单使用、自定义分页器

    一. ajax初识 1. 前后端传输数据编码格式contentType 使用form表单向后端提交数据时,必须将form表单的method由默认的get改为post,如果提交的数据中包含文件,还要将f ...

  6. 我自己的Javascript 库，封装了一些常用函数 Kingwell.js

    我自己的Javascript 库,封装了一些常用函数 Kingwell.js 博客分类: Javascript javascript 库javascript库  现在Javascript库海量,流行的 ...

  7. Ajax+Ashx实现以及封装成控件的实现

    asp.net 后台多线程异步处理时的 进度条实现一(Ajax+Ashx实现以及封装成控件的实现) 工作好长时间了,这期间许多功能也写成了不少的控件来使用,但是,都只是为了代码的结构清析一些而已.而这 ...

  8. MVC3.0+knockout.js+Ajax 实现简单的增删改查

    MVC3.0+knockout.js+Ajax 实现简单的增删改查 自从到北京入职以来就再也没有接触MVC,很多都已经淡忘了,最近一直在看knockout.js 和webAPI,本来打算采用MVC+k ...

  9. php+jquery+ajax+json简单小例子

    直接贴代码: <html> <title>php+jquery+ajax+json简单小例子</title> <?php header("Conte ...

随机推荐

  1. CentOS下如何查找大文件

    在Windows系统中,我们可以使用TreeSize工具查找一些大文件或文件夹,非常的方便高效,在Linux系统中,如何去搜索一些比较大的文件呢?下面我整理了一下在Linux系统中如何查找大文件或文件 ...

  2. JSP Session管理

      本篇讲述JSP中session的相关知识和管理方法: 先说说cookie与session 在web中常用的两种用户信息管理方式:cookie 和 session. cookie是保存在用户客户端的 ...

  3. android学习系列：jercy——AI3 的博客

    [android学习之十七]——特色功能2:桌面组件(快捷方式,实时文件夹) 二.桌面组件 1.快捷方式 Android手机上得快捷方式的意思可以以我们实际PC机器上程序的快捷方式来理解.而andro ...

  4. 深入理解Java内存模型（五）——锁

    锁的释放-获取建立的happens before 关系 锁是java并发编程中最重要的同步机制.锁除了让临界区互斥执行外,还可以让释放锁的线程向获取同一个锁的线程发送消息. 下面是锁释放-获取的示例代 ...

  5. allegro使用汇总 [转贴]

    1.如何在allegro中取消花焊盘(十字焊盘) set up->design parameter ->shape->edit global dynamic shape parame ...

  6. Tmall发送码asp验证sing(自有码开发)

    <%''查询通知应答类'============================================================================'api说明:'g ...

  7. oracle数据库导入导出命令！

    Oracle数据导入导出imp/exp 功能:Oracle数据导入导出imp/exp就相当与oracle数据还原与备份. 大多情况都可以用Oracle数据导入导出完成数据的备份和还原(不会造成数据的丢 ...

  8. laravel中的$request对象构造及请求生命周期

    laravel应用程序中index.php是所有请求的入口.当用户提交一个form或者访问一个网页时,首先由kernel捕捉到该session PHP运行环境下的用户数据, 生成一个request对象 ...

  9. POJ 1988 Cube Stacking

    题意:有编号为1~N的N个小木块,有两种操作 M x y 将木块x所在的堆放到木块y所在的堆的上面 C x 询问木块x下面有多少块木块 代码巧妙就巧妙在GetParent函数中在进行路径压缩的同时,也 ...

  10. 对比C++中的指针和引用

    指针和引用在形式上比较好区分,由于有很多相似的功能,因此在使用上容易混淆.因此有必要对指针和引用进行对比,以便于在使用时使程序正确高效. 1.引用不可以为空,而指针可以为空. 我们知道引用是对象的别名 ...