`
hrtc
  • 浏览: 54618 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

ajax学习笔记二:javascript实现命名空间(ajax封装类的例子)

阅读更多
看完《征服Ajax - Web20开发技术详解试读版》感觉这本书全是精华,最后的例子也作为我看完此2章的学习总结练习

1.frame操作
1)父框架到子框架的引用
window.frames["frameName"].frames["frameName2"];

2)子框架到父框架的引用
window.parent

3)兄弟框架间的引用
<frameset rows="50%,50%">
<frame src="1.html" name="frame1" />
<frame src="2.html" name="frame2" />
</frameset>
在frame1 中可以使用如下语句来引用frame2:
self.parent.frames["frame2"];

4)不同层次框架间的互相引用
self.parent.frames["childName"].frames["targetFrameName"];

5)对顶层框架的引用(利用这个可以创建浏览器范围的单例对象)
//判断本框架是否为顶层框架
if(self==top){
//dosomething
}

2.指定可访问 cookie 的路径
语法:
document.cookie=”name=value; path=cookieDir”;
例如:
www.xxxx.com/html/a.html 中 所 创 建 的 cookie , 可 以 被 www.xxxx.com/html/b.html 或
www.xxx.com/html/some/c.html 所访问,但不能被 www.xxxx.com/d.html 访问。
相当于设置了document.cookie=”name=value; path=/html”;//默认设置
如要能够访问设置为document.cookie=”name=value; path=/”;

3.指定可访问 cookie 的主机名
语法:
document.cookie=”name=value; domain=cookieDomain”;
以 google 为例,要实现跨主机访问,可以写为:
document.cookie=”name=value;domain=.google.com”;
这样www.google.com 和 gmail.google.com(两个不同的主机名)都能被访问。

4.cookie封装方法
cookie格式:"userId=828; userName=hulk"
<script language="JavaScript" type="text/javascript">
<!--
function addCookie(name,value,expireHours){
      var cookieString=name+"="+escape(value);//cookie的value中不能含有,=空格等;所以用escape转码,中文也能显示
      //判断是否设置过期时间
      if(expireHours>0){
            var date=new Date();
            date.setTime(date.getTime+expireHours*3600*1000);
            cookieString=cookieString+"; expire="+date.toGMTString();//expire必须是GMTString
      }
      document.cookie=cookieString;
}

function getCookie(name){
      var strCookie=document.cookie;
      var arrCookie=strCookie.split("; ");//分割符为;+空格
      for(var i=0;i<arrCookie.length;i++){
            var arr=arrCookie[i].split("=");
            if(arr[0]==name)return unescape(arr[1]);//unescape解码
      }
      return "";
}

function deleteCookie(name){
      var date=new Date();
      date.setTime(date.getTime()-10000);
      document.cookie=name+"=v; expire="+date.toGMTString();
}
//-->
</script>



5.正则表达式、window.open方法以及setTimeout和setInterval见相关章节

6.javascript实现命名空间(ajax封装类)
<script language="JavaScript" type="text/javascript">
<!--
/**
*创建名空间
*@1 命名空间字符串如 com.hrtc
*/
function createNameSpace(str) {
    var strs = str.split(".");
    var strT = strs[0];
    if (window[strT] == undefined) {
        window[strT] = new Object();
    }
    for (var i = 1; i < strs.length; i++) {
        if (eval(strT)[strs[i]] == undefined) {
            eval(strT)[strs[i]] = new Object();
        }
        strT += "." + strs[i];
    }
}

/**
*base包,定义通用基类
*/
createNameSpace("com.hrtc.base");
/**
*通用事件处理类
*/
com.hrtc.base.Event = function () {
    this.events=[];//事件数组
}
com.hrtc.base.Event.prototype = {
    notify:function(){//通知方法
        for(var i = 0;i < this.events.length;i++){
            this.events[i].apply(this,arguments);
        }
    },
    addEventListener:function(_event){//加入事件监听
        for(var i = 0;i < this.events.length;i++){
            if(_event == this.events[i]){
                return;
            }
        }
        this.events.push(_event);
    },
   removeEventListener:function(_event){//移除事件监听
        var arr = [];
        for(var i = 0;i < this.events.length;i++){
            if(_event != this.events[i]){
                arr.push(this.events[i]);
            }
        }
        this.events = arr;
    }
}

/**
*ajax包
*/
createNameSpace("com.hrtc.ajax");

/*
*定义Util类,封装创建ajax相关方法
*/
com.hrtc.ajax.Util = function () {
};
com.hrtc.ajax.Util.createXMLHttpRequest = function () {
    var xmlHttp;
    if (window.XMLHttpRequest) { //Mozilla 浏览器
        xmlHttp = new XMLHttpRequest();
    } else {
        if (window.ActiveXObject) { //IE浏览器
            try {
                xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
            }
            catch (e) {
                try {
                    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                catch (e) {
                }
            }
        }
    }
    return xmlHttp;
};

/**
*封装自己定于的Ajax方法
*/
com.hrtc.ajax.Ajax = function () {
    this.request = com.hrtc.ajax.Util.createXMLHttpRequest();
};
com.hrtc.ajax.Ajax.prototype = {
    send:function(url,parameter,handler){
        if(parameter == null){
            this.request.onreadystatechange = handler;
            this.request.open("GET",url,true);
            this.request.send(null);
        }else{
            this.request.onreadystatechange = handler;
            this.request.open("POST",url,true);
            this.request.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");
            this.request.send(parameter);
        }
    }
};

//测试代码
var obj = new com.hrtc.ajax.Ajax();
//如无须多个事件处理无须定义此类和下面的回调函数
var objEvent = new com.hrtc.base.Event();

//定义多个回调函数
function callback1(request){
    alert("callback1:"+request.status);
}
function callback2(request){
    alert("callback2:"+request.status);
}
//加入事件监听
objEvent.addEventListener(callback1);
objEvent.addEventListener(callback2);
//objEvent.removeEventListener(callback2);//也可去除已加入的事件

//ajax的回调事件
function callbackAll(){
    if(obj.request.readyState == 4){
        //绑定多个事件,也可只处理一个就无须帮定直接处理
        objEvent.notify(obj.request);
    }
}

var url = "http://www.baidu.com";//换成你的同一域名下的url
//发送请求
obj.send(url,null,callbackAll);
//测试完毕

//-->
</script>
10
7
分享到:
评论

相关推荐

    Ajax 学习笔记,超详细的噢!不看后悔

    在这份超详细的Ajax学习笔记中,我们将深入探讨以下几个关键知识点: 1. **基础概念**:Ajax的核心是JavaScript对象XMLHttpRequest,它使得前端和后端能够进行异步通信。异步意味着用户在等待服务器响应时可以执行...

    AJAX学习笔记(内含实例)

    AJAX学习笔记。内含Java调用的两个实例,及JavaScript的ajax工具函数,可快速入门,也可当手册使用。个人精心整理,值得收藏。 更多:http://download.csdn.net/user/daillo/all

    ajax学习笔记

    ### AJAX学习笔记 #### 一、引言 Ajax(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。...

    Ajax学习笔记个人总结

    ### Ajax学习笔记个人总结 #### 一、XMLHttpRequest对象简介 **XMLHttpRequest** 对象是 AJAX 技术的核心,它负责在客户端与服务器之间发送异步请求,无需刷新整个页面即可实现局部数据更新。要使用 ...

    ajax学习笔记代码

    **Ajax学习笔记代码详解** Ajax,全称Asynchronous JavaScript and XML,是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使网页实现异步更新。这种技术的...

    16ajax学习笔记1

    在本篇16ajax学习笔记1中,我们将探讨Ajax的基础概念、使用方法以及jQuery库中的Ajax实现。 1、发送请求: Ajax的首要任务是创建XMLHttpRequest对象,这是浏览器提供的API。在JavaScript中,我们可以通过new ...

    Ajax学习笔记

    ### Ajax学习笔记 #### 一、解释Ajax Ajax(Asynchronous JavaScript and XML)是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量的数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新...

    AJAX学习笔记1

    **标题:“AJAX学习笔记1”** 在Web开发中,AJAX(Asynchronous JavaScript and XML)是一种创建动态网页的技术,允许在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页内容。AJAX的核心是利用...

    Ajax学习笔记.zip

    Ajax的核心是JavaScript对象XMLHttpRequest,它允许JavaScript在后台与服务器进行通信,实现了异步数据交换。 在Ajax中,主要涉及以下几个关键知识点: 1. **XMLHttpRequest对象**:这是Ajax的基础,它创建了一个...

    Ajax和jQuery学习笔记

    ### Ajax和jQuery学习笔记 #### 一、Ajax基础与原理 **1.1 什么是Ajax?** Ajax(Asynchronous JavaScript and XML,异步JavaScript和XML)是一种用来创建快速动态网页的技术,通过在后台与服务器进行少量数据...

    ASP.NET AJAX 实战 学习笔记(二)

    【ASP.NET AJAX实战学习笔记(二)】 在深入探讨ASP.NET AJAX之前,首先理解Microsoft Ajax Library至关重要。这个JavaScript库是Microsoft专门为实现异步更新和增强Web应用交互性而设计的。它不仅支持主流浏览器,如...

    Java相关课程系列笔记之十一Ajax学习

    在本篇Java相关课程系列笔记之十一中,我们聚焦于Ajax的学习,这是一项在Web开发中广泛使用的技术,用于创建动态、无刷新的用户界面。Ajax全称Asynchronous JavaScript and XML,即异步JavaScript和XML,它允许网页...

    Web+HTML+JavaScript+Ajax学习笔记

    "Web+HTML+JavaScript+Ajax学习笔记"这个主题涵盖了许多Web开发的核心概念和技术。通过深入学习这些笔记,你将能够创建动态、交互式的Web应用,并理解前后端如何协同工作。同时,持续学习和掌握新的Web技术,如框架...

    ajax的学习笔记

    本学习笔记将从基础概念、核心组成部分、工作原理以及实际应用等方面进行深入探讨。** ### 一、基础概念 1. **异步通信**:Ajax的核心特性是异步,即在不刷新整个页面的情况下与服务器交换数据并局部更新页面。 2...

    web学习笔记 —— javascript基础

    9. AJAX:Asynchronous JavaScript and XML,用于在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容。XMLHttpRequest对象是实现AJAX的核心。 10. ES6及后续版本的新特性:包括类(Class)、模块(Module...

    Head First Ajax学习笔记

    ### Head First Ajax 学习笔记知识点总结 #### 一、异步请求与AJAX概念 - **异步请求**:允许页面在发送请求时继续执行后续任务,无需等待服务器响应,提高了用户体验。 - **AJAX (Asynchronous JavaScript and ...

    经典ajax学习笔记

    以下是一份详细的Ajax学习笔记,涵盖了其基本概念、工作原理、优势与限制,以及实际应用。 ### 一、基本概念 Ajax的核心是JavaScript对象XMLHttpRequest(XHR),它允许浏览器在后台与服务器进行通信,而不会打断...

    Ajax学习笔记---3种Ajax的实现方法【推荐】

    1. **JavaScript + XHR + CSS**:这是Ajax的核心,XMLHttpRequest(XHR)对象是实现Ajax的关键,它允许JavaScript在后台与服务器进行通信,而无需刷新整个页面。CSS则用于美化和布局。 2. **Flash / Flex (Adobe) /...

Global site tag (gtag.js) - Google Analytics