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. linux 安装scons

     scons是一个Python写的自动化构建工具,需要安装python和scons后才能运行,能够跨平台.其集成功能类似于autoconf/automake ,是一个简洁可靠的工具.现在很多系统都自带 ...

  2. Linux系统文件访问控制列表

    linux系统中的RWX权限.特殊权限.隐藏权限都是对某一类用户设置的, 而如果希望对某个指定的用户进行单独的权限设置的话就需要用到文件的 访问控制权限了. 我们可以对普通文件或目录进行设置ACL,通 ...

  3. Linux系统文件的隐藏属性

    linux系统的文件除了有普通rwx权限外还有一种隐藏权限,例如明明有权限删除某个文件却报错了. 或者仅能为某个文件追加内容而不能减少内容,遇到这种很‘奇怪’的文件,就要怀疑是文件被设置隐藏权限了. ...

  4. mysql中的连接

    SQL join 用于根据两个或多个表中的列之间的关系,从这些表中查询数据. join可以分为内连接和外连接,外连接分为左连接.右连接和全连接 现有两个表 员工表和部门表 员工表 部门表 1.内连接( ...

  5. ava中拦截器 过滤器 监听器都有什么区别

    过滤器,是在java web中,你传入的request,response提前过滤掉一些信息,或者提前设置一些参数,然后再传入servlet或者struts2的action进行业务逻辑,比如过滤掉非法u ...

  6. 《Linux内核设计与实现》读书笔记（十一）- 定时器和时间管理【转】

    转自:http://www.cnblogs.com/wang_yb/archive/2013/05/10/3070373.html 系统中有很多与时间相关的程序(比如定期执行的任务,某一时间执行的任务 ...

  7. Java中的public、protected、default和private的区别

    (1)       对于public修饰符,它具有最大的访问权限,可以访问任何一个在CLASSPATH下的类.接口.异常等.它往往用于对外的情况,也就是对象或类对外的一种接口的形式. (2)      ...

  8. 《OD学hadoop》第三周0710

    一.分布式集群安装1. Hadoop模式本地模式.伪分布模式.集群模式datanode 使用的机器上的磁盘,存储空间nodemanager使用的机器上的内存和CPU(计算和分析数据) 2. 搭建环境准 ...

  9. java生成带html样式的word文件

    参考:http://blog.csdn.net/xiexl/article/details/6652230 最近在项目中需要将通过富文本编辑器处理过的文字转换为Word,查了很久,大家通常的解决办法是 ...

  10. jsonp获取服务器数据的方式

    jsonp获取服务器的数据,有两种 一,跨域 二,不跨域 如果跨域 js的写法有两种 1, <script type="text/javascript"> $(func ...