`

AJAX异步通信技术学习笔记

    博客分类:
  • AJAX
阅读更多
AJAX是一中运用JavaScript和可扩展编辑语言(XML),在网络浏览器和服务器之间传送或接收数据的技术。
   AJAX的工作原理相当与在用户和服务器之间加了一个中间层,使用户请求与服务器响应异步化。这样还可以把以前的一些服务器负担的工作转交给客户端,利用客户端闲置的处理能力来处理,减轻服务器和宽带的负担。
   AJAX是WEB2.0的核心之一.AJAX技术运用与浏览器中,使向服务器索取网页的部分信息成为可能.

   XMLHttpRequest对象

   XMLHttpRequest提供客户端同HTTP服务器异步通信的协议.通过这个协议,AJAX可以使页面象桌面程序一样同服务器端进行数据层面的交换,而不必每次都刷新页面,也不用每次都将数据处理的工作都交给服务器来做,这样既减轻了服务器负担又加快了响应速度,缩短了用户等待的时间.

   XMLHttpRequest对象的方法:
       Abort()                         停止当前请求
       getAllResponseHeaders()         返回HTTP请求的所有响应头部的键/值字符串
       getResponseHeader("header")     返回指定头部属性的字符串值
       Open("method", "url")        建立对服务器的调用。Method参数可以是GET  POST  PUT, url参数可以是相对URL或绝对对 URL
Send(content)      向服务器发送请求
setRequestHeader("header","value")  为指定头部属性设置指定值

XMLHttpRequest对象的属性:
Onreadystatechange 状态改变的时间触发器,通常绑定一个JavaScript 函数,每当状态发生改变时,就调用该函数
readyState 请求的状态,有5个可取值:
0 = 未初始化
1 = 读取中
2 = 已读取
3 = 交互中
4 = 完成
responseText 从服务器返回的文本形式的响应内容
responseXML 从服务器返回的兼容DOM的XML文档对象
Status 从服务器返回的状态码,例如404="文件找不到"
200 = "成功"
statusText 从服务器返回的状态文本信息,例如OK或Not Found(未找到)

<script language = "javascript">
    //定义一个将指向XMLHttpRequest对象的变量
    var xmlHttp;
    //定义一个函数用于创建XMLHttpRequest对象
    function createXMLHttpRequest(){
        if(window.ActiveXObject){
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        else if(window.XMLHttpRequest){
            xmlHttp = new XMLHttpRequest();
        }
    }
    //定义一个函数用于启动与服务器的异步同信
    function begin(){
        createXMLHttpRequest();     //调用createXMLHttpRequest函数
        xmlHttp.onreadystatechange = processor;       //将事件触发器绑定到 processor上
        xmlHttp.open("GET", "test.xml");        //使用GET方法建立对服务器资 源test.xml的一个异步调用
        xmlHttp.send(null);            //向服务器发送请求
    }
    //定义一个状态处理函数用于处理状态触发器的状态改变
    function processor(){
        //如果处理请求完成
        if(xmlHttp.readyState == 4){
            //如果服务器返回状态为成功
            if(xmlHttp.status = 200){
                //将从服务器返回的内容报告给用户
                alert("从服务器返回的内容为:" + xmlHttp.responseText);
            }
        }
    }
   
</script>

DOM是面向HTML和XML文档的一组API,它为文档提供了结构化的表示,并定义了如何通过脚本(JavaScript)来访问文档结构。如果没有DOM,JavaScript根本就不存在Web页面和构成页面元素的概念。文档中的每个元素都是DOM的一部分,可通过JavaScript来访问这些元素的属性和方法,实现动态编辑页面的功能。
这里所说的DOM是符合W3C标准的文档对象模型,它以树型结构表示HTML和XML文档,并定义可操作这个树及其节点的一系列方法和属性。在网络浏览器端,通过JavaScript利用DOM提供的API来操作HTML和XML文档。

1.操作HTML文档
HTML文档各个节点在DOM中被视为个种类型的Node对象.而且每个 Node对象都有自己的属性和方法,通常利用这些属性和方法来遍历或动态编辑整个树。

操作HTML文档的常用DOM方法:
getElementById(isIDValue) 返回文档中具有指定id属性的元素
getElementByTabName(isTagName) 返回当前元素中有指定标记名的子元素 的数组
appendChild(childNode) 在当前节点的childNodes[]组中增加一个 节点childNode
cloneNode(false | true) false表示仅复制当前节点;true表示复制 当前节点以及它的所有子孙节点
hasChildNodes() 判断当前节点是否拥有子节点,有则返回 true
insertBefore(newNode,targetNode) 将节点newNode作为当前元素的子节点 插到targetNode元素前面
removeChild(childNode) 从文档树中删除子节点childNode
resplaceChild(newNode,oldNode) 将节点oldNode替换为节点newNode
getAttribute(sAttrName) 返回指定属性的字符串值
setAttribute(sAttriName, vAttrValue) 把指定的属性设置为镇定的字符串值,如 果该属性不存在则添加一个新属性
removeAttribute(sAttrName) 从元素中删除属性sAttrName

操作HTML文档的常用DOM属性:
Attributes 如果该节点是一个Element,则以NamedNodeMap 形式返回该元素的属性
childNodes 以Node[]的形式存放当前节点的子节点,如果没 有子节点,则返回空数组
firstChild 以Node的形式返回当前节点的第一个子节点,如 果没有子节点,则为null
lastChild 以Node的形式返回当前节点的最后一个节点,如 果没有子节点,则为null
nextSibling 以Node的形式返回当前节点的兄弟下一个节点, 如果没有这样的节点,则返回null
nodeName 节点的名字,Element节点则代表Element的标记 名称
nodeType 代表节点的类型
parentNode 以Node的形式返回当前节点的父亲节点,如果没 有父亲节点,则为null
previoiusSibling 以Node的形式返回紧挨当前节点,位于它之前的 兄弟节点。如果没有这样的节点,则返回null
操作XML文档
在数据的表示和交换方面XML文档更具优势,针对XML的访问和操作,DOM也用样提供了一系列的API。利用这些API,可方便地从XML文档中读取数据信息,动态创建展示这些数据信息的HTML页面。
操作XML文档,通常遵循以下4个步骤:
载入整个XML文档
从XML文档中提取数据信息
对提取的信息进行加工处理
创建包含处理结果的HTML页面展示给用户

遍历XML文档的常用DOM方法:
getElementById(sIDValue) 返回文档中具体指定id属性的元素
getElementByTabName(sTagName) 返回当前元素中有指定标记名的子元素的数 组
hasChildNodes() 判断当前节点是否拥有子节点,有则返回true getAttribute(sAttrName) 返回指定属性的字符串值

操作XML文档的常用DOM属性:
childNodes 以Node[]的形式存放当前节点的子节点,如果没有子节点,则 返回空数组
firstChild 以Node的形式返回当前节点的第一个子节点,如果没有子 节点,则为null
lastChild 以Node的形式返回当前节点的最后一个子节点,如果没有 这样的节点,则返回null
nextSibling 以Node的形式返回当前节点的兄弟下一个节点, 如果没有这样的节点,则返回null
nodeName 节点的名字,Element节点则代表Element的标记 名称
nodeType 代表节点的类型
parentNode 以Node的形式返回当前节点的父亲节点,如果没 有父亲节点,则为null
previoiusSibling 以Node的形式返回紧挨当前节点,位于它之前的 兄弟节点。如果没有这样的节点,则返回null

分享到:
评论

相关推荐

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

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

    Ajax和jQuery学习笔记

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

    ajax学习笔记

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

    ajax的学习笔记

    1. **异步通信**:Ajax的核心特性是异步,即在不刷新整个页面的情况下与服务器交换数据并局部更新页面。 2. **JavaScript**:Ajax主要通过JavaScript实现,利用浏览器提供的XMLHttpRequest对象与服务器进行交互。 ...

    ajax学习笔记代码

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

    AJAX学习笔记1

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

    韩顺平Ajax笔记+源码+ppt

    对于初学者,可以从理解Ajax的基本原理开始,包括异步通信的概念、XMLHttpRequest对象的使用。然后,通过阅读笔记理解Ajax的API和方法,如`open()`、`send()`、`onreadystatechange`等。接着,结合源代码实践,尝试...

    Ajax入门(读书笔记)

    - **无需刷新整个页面:** 传统Web应用在用户提交数据后会刷新整个页面,而Ajax技术通过异步通信,仅更新页面中的部分数据,避免了整个页面的重新加载。 **1.2 什么是Ajax** Ajax全称为“Asynchronous JavaScript ...

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

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

    Ajax的学习笔记

    本压缩包中的"AJAX学习笔记.doc"文档,可能包含了Ajax的基础概念、使用示例及进阶技巧,适合初学者参考学习。同时,推荐以下在线资源: - [MDN Web文档](https://developer.mozilla.org/zh-CN/docs/AJAX):详尽的...

    一点学习ajax的笔记

    ### AJAX学习笔记详解 #### 一、引言 在当今快速发展的互联网技术中,异步JavaScript和XML(AJAX)已成为构建动态Web应用的关键技术之一。通过本篇笔记,我们将深入探讨AJAX的核心概念和技术要点,并针对实际开发...

    16ajax学习笔记1

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

    经典ajax学习笔记

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

    Ajax学习笔记

    ### Ajax学习笔记精要 #### 一、Ajax概述 ##### 1.1 什么是Ajax? Ajax,全称为Asynchronous JavaScript and XML(异步的JavaScript和XML),是一种用于改善网页应用性能的技术。它允许网页在无需重新加载整个...

    Ajax学习笔记.zip

    Ajax,全称Asynchronous JavaScript and XML,是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。这使得网页更加互动、响应更快,提高了用户体验。Ajax的核心是JavaScript对象XMLHttpRequest,它允许...

    AJAX学习笔记.docx

    AJAX(Asynchronous JavaScript and XML)是Web开发中的一种核心技术,它使得网页可以在不刷新整个页面的情况下与服务器进行异步通信,从而实现内容的动态更新。这一技术的出现极大地提升了用户体验,因为它避免了...

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

    Ajax技术通过异步通信极大地提升了网页的交互体验,降低了服务器负载,并优化了资源使用。随着Web技术的不断发展,如今的Ajax已经不再局限于XML,而是广泛使用JSON,同时结合各种前端框架,使得开发更加高效便捷。...

Global site tag (gtag.js) - Google Analytics