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内核通杀提权漏洞CVE-2016-5195验证

    一.漏洞简介 CVE-2016-5195这个漏洞是linux内核级的本地提权漏洞,原理是linux内核内存子系统在 处理私有只读存储映射的写入时复制机制发现了一个冲突条件.这个漏洞官方给出的影响范围是 ...

  2. linux环境下,利用tc限制两台服务器间的网速,非常简单。

    最近再搞postgres的数据同步,需要模拟异地机房有带宽限制时的同步效果,所以想要限制一下两台机器之间的网速. ts命令功能很强,同时也好难理解和使用,经常浪费了好半天还是搞不定. 这里分享一个简单 ...

  3. VC操作ADO的基本策略

    一.ADO概述 ADO是Microsoft为最新和最强大的数据访问范例 OLE DB 而设计的,是一个便于使用的应用程序层接口.ADO 使您能够编写应用程序以通过 OLE. DB 提供者访问和操作数据 ...

  4. Mac 的“任务管理器” —— 活动监视器

    昨天关机时,提示说 Safari 阻止了关机程序,请先关闭 Safari .再看 Safari 的退出按钮已灰.知道是 Safari 的进程僵死了. 根据对 Windows 使用的经验,首先想到了“任 ...

  5. 38-语言入门-38-Coin Test

    题目地址: http://acm.nyist.net/JudgeOnline/problem.php?pid=204    描述As is known to all,if you throw a co ...

  6. Java 日期 Api

    public class TimeTest { public static void main(String[] args) { Date d1 = new Date(); SimpleDateFor ...

  7. 【笨嘴拙舌WINDOWS】消息机制

    如果将WINDOWS比做一个人,那么他就是为你提供各种服务的巫师,他手上有各式各样,奇形怪状的奇葩物品.他脑子充满了智慧,能够为你解决你所不能解决的疑难杂症.但是他不认识你! 你从小立志要想考状元,去 ...

  8. UVa 699 (二叉树) The Falling Leaves

    题意: 按先序方式输入一棵二叉树,节点是带权的,左孩子在父节点的左一个单位,右孩子在父节点的右一个单位,从左到右输出相同水平位置节点之和. 分析: 做了好几道二叉树的题,代码应该也很好理解了.这里ma ...

  9. js的for in具有不适应性(转)

    js中for in 可以遍历对象或数组的显性属性,也就是说我们自己定义的属性是可以遍历的,那些原型上默认已有的属性,例如:Object.prototype.toString.Object.protot ...

  10. (转)python 优先队列

    #!/usr/bin/python from Queue import Queue from Queue import PriorityQueue a1='a1' a2='a2' a3='a3' a4 ...