码迷,mamicode.com
首页 > 编程语言 > 详细

html --- ajax --- javascript --- 简单的封装

时间:2014-05-14 23:13:05      阅读:438      评论:0      收藏:0      [点我收藏+]

标签:style   blog   class   code   java   c   

Ajax的简单封装

Ajax的全称是AsynchronousJavaScriptAndXML

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

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

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

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

bubuko.com,布布扣

封装后的代码如下:

 文件路径:\web\AjaxRequest.js

bubuko.com,布布扣
/**
 * 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对象创建成功!‘);
    }
};
bubuko.com,布布扣

 

 

代码封装好了,怎么使用它呢?

看html页面的代码:

文件路径:\web\AjaxRequest.html

bubuko.com,布布扣
<!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>
bubuko.com,布布扣

 

 

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

文件路径:\web\First.jsp

bubuko.com,布布扣
<%--
  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>
bubuko.com,布布扣

 

 

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

 

下面是结果:

bubuko.com,布布扣

 

bubuko.com,布布扣

 

 

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

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

 

 

html --- ajax --- javascript --- 简单的封装,布布扣,bubuko.com

html --- ajax --- javascript --- 简单的封装

标签:style   blog   class   code   java   c   

原文地址:http://www.cnblogs.com/kodoyang/p/Javascript_Ajax_XMLHttpRequest_Encapsulation.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!