`
yifeng
  • 浏览: 52961 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

AJAX基础与实践(三)

    博客分类:
  • Ajax
阅读更多
 

创建XHR发送请求

Ø 如下:

<script type="text/javascript">

var xmlHttp;

//创建一个XMLHttpRequest对象 

function createXMLHttpRequest() {

// For Internet Explorer 5.5, 6, 7 

    if (window.ActiveXObject) {

        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

    } 

// For Mozilla, Firefox, Safari, Netscape

    else if (window.XMLHttpRequest) {

        xmlHttp = new XMLHttpRequest();

    }

}  

</script>

AJAX发送请求

Ø 如下:

function startRequest() {

    createXMLHttpRequest();

//注册回调事件处理器 

    xmlHttp.onreadystatechange = handleStateChange;

//使用Open()方法初始化XMLHttpRequest对象-指定HTTP方法

//和要使用的服务器URL 

    xmlHttp.open("GET", "innerHTML.xml", true);

//send()方法发送该请求 

    xmlHttp.send(null);

}

应用GET POST发送请求

Ø 方法如下:

方法名

描述

getElementById(id) (document)

获取有指定唯一ID属性值文档中的元素

getElementsByTagName(name)

返回当前元素中有指定标记名的子元素的数组

hasChildNodes()

返回一个布尔值,指示元素是否有子元素

getAttribute(name)

返回元素的属性值,属性由name指定

处理服务器晌应

XMLHttpRequest 提供了两个可以用来访问服务器响应的属性.

Ø responseText :将响应提供为一个串。

Ø responseXML:将响应提供为一个XML 对象。

使用innerHTML 属性创建动态内容

Ø responseText + innerHtml

服务器 "生产"或生成HTML 内容,

浏览器使用 innerHTML"消费"或处理。

DEMO responseText + innerHtml

Ø innerHTM.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

         <head>

                   <title>Using responseText with innerHTML</title>

                   <META http-equiv=Content-Type content="text/html; charset=GBK">

<script  type="text/javascript">

var xmlHttp;

function createXMLHttpRequest() {

    if (window.ActiveXObject) {

        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

    } 

    else if (window.XMLHttpRequest) {

        xmlHttp = new XMLHttpRequest();

    }

}  

function startRequest() {

    createXMLHttpRequest();

    xmlHttp.onreadystatechange = handleStateChange;

    xmlHttp.open("GET", "innerHTML.txt", true);

    xmlHttp.send(null);

}

function handleStateChange() {

    if(xmlHttp.readyState == 4) {

        if(xmlHttp.status == 200) {                                        

            document.getElementById("results").innerHTML = xmlHttp.responseText;

        }

    }

}

</script>

         </head>

         <body>

                   <form  action="#">

                            please content:<input  type="button"  value="Search for Todays Activities" onclick="startRequest();" />

                            <span id="results"></span>

                   </form>

         </body>

</html>

Ø innerHTML.txt

请输入内容!!!

Ø 输出结果:







作者:周大庆(zhoudaqing)
网址:http://www.blogjava.net/yifeng
>>>转载请注明出处!<<<
分享到:
评论

相关推荐

    ajax基础与实践教程(含php json实例)

    在"ajax基础与实践教程(含php json实例)"中,可能包含了如何使用Ajax与PHP结合,通过JSON进行数据交换的详细步骤。例如,创建一个PHP脚本生成JSON数据,然后在JavaScript中创建Ajax请求,解析返回的JSON数据并更新...

    Ajax基础与实践教程(含源码)

    **Ajax基础与实践教程** Ajax,全称Asynchronous JavaScript and XML,是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使网页实现异步更新。Ajax的核心是...

    AJAX的综合应用,AJAX基础与实践

    **AJAX基础与实践** AJAX(Asynchronous JavaScript and XML)是一种在不重新加载整个网页的情况下,能够更新部分网页的技术。这种技术的核心在于利用JavaScript创建XMLHttpRequest对象,通过这个对象与服务器进行...

    精通Ajax 基础概念.核心技术与典型案例

    ## **一、Ajax基础概念** 1. **异步通信**:Ajax的核心是JavaScript对象XMLHttpRequest,它允许在后台与服务器进行通信,不阻塞用户对页面的操作。 2. **局部刷新**:Ajax可以只更新网页的部分区域,而不是整个页面...

    Ajax模式与最佳实践英文原版

    1. **XMLHttpRequest对象**:Ajax的基础,用于在后台与服务器通信。理解它的生命周期、方法(如open、send、onreadystatechange等)以及状态码是掌握Ajax的关键。 2. **数据格式**:虽然名字中包含XML,但现代Ajax...

    AJax与PHP基础教程.

    **第一章 - Ajax基础** 在这一章中,你将学习到Ajax的基本概念,包括异步通信的重要性、XMLHttpRequest对象的使用以及如何创建简单的Ajax请求。了解如何通过JavaScript与服务器进行交互,实现页面内容的动态加载,...

    Ajax基础实例讲解

    Ajax(Asynchronous JavaScript and XML)是一种在...Ajax是Web开发中的重要技术,理解并掌握Ajax的基本原理和实践,能帮助你构建更加动态、响应式的网页应用。通过不断练习和项目实战,你可以更好地理解和运用Ajax。

    14ajax课程_AJAX基础_

    **AJAX基础详解** 在现代Web开发中,AJAX(Asynchronous JavaScript and XML)是一种核心技术,它使得网页能够实现异步数据交换,无需刷新整个页面即可更新部分内容。本教程将深入探讨AJAX的基础知识,帮助你理解其...

    AJAX基础教程

    **AJAX基础教程** 在Web开发领域,AJAX(Asynchronous JavaScript and XML)是一种不可或缺的技术,它使得网页可以在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容。本教程将带您深入理解AJAX的基本...

    ajax入门基础教程

    在文章的最后部分,作者分享了自己的学习经历,提到了通过与专家的互动以及多次的交流和编程实践,能够更快地深入理解AJAX技术,并掌握相关的开发技巧。这也从另一个侧面强调了实践经验对于学习编程技术的重要性。

    Ajax 基础教程中文版.pdf

    **Ajax(Asynchronous JavaScript and XML)**是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。...通过阅读"Ajax基础教程中文版",你可以深入了解Ajax的工作原理,学会如何在实践中运用它。

    Ajax基础与实战.jar

    这个名为“Ajax基础与实战.jar”的压缩包,很可能包含了学习和实践Ajax技术的相关资料。 在学习Ajax的基础知识时,你需要了解以下几个关键点: 1. **XMLHttpRequest对象**:这是Ajax的核心,用于在后台与服务器...

    AJAX基础教程-5 Ajax Validate

    **标题:“AJAX基础教程-5 Ajax Validate”** 在学习Web开发时,AJAX(Asynchronous JavaScript and XML)技术是一个重要的组成部分,它允许我们在不刷新整个页面的情况下与服务器进行交互,提升用户体验。本教程...

    Ajax的入门与实践.pdf

    Ajax 入门与实践 Ajax 是基于 XML 的异步 JavaScript, 是当前 Web 创新的重要组成部分。Ajax 这个术语源自描述从基于同页的 Web 应用到基于数据应用的转换。在基于数据的应用中,用户需要的数据,如联系人列表,...

    AJAX基础到精通教程

    **AJAX基础到精通教程** AJAX(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使网页实现异步更新,大大提升了用户...

    Ajax基础教程

    **Ajax基础教程** Ajax(Asynchronous JavaScript and XML)是一种在无需刷新整个网页的情况下,能够更新部分网页的技术。这种技术在现代Web开发中被广泛应用,极大地提升了用户体验,因为它允许页面在后台与服务器...

    ajax基础教程和ajax从入门到精通

    **Ajax基础教程** Ajax(Asynchronous JavaScript and XML)是一种在无需刷新整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使网页实现异步更新,提升了用户体验,使得用户在...

    ajax框架与实践

    涵盖Web应用的发展,Ajax基础,Web通讯,XMLHttpRequest对象详解,同时详细讲解和推荐了Ajax开发工具箱,例如JSDoc,Firefox拓展,DOMInspector,JSLint等等,以及JsUnit测试等。同时为了提升前端技术,第八章详细...

    精通Ajax-基础概念、核心技术与典型案例 数据光盘

    **Ajax(Asynchronous JavaScript and XML)**是一种在无需重新加载整个网页...无论是前端开发者还是全栈工程师,都需要对Ajax有深入的理解和实践。通过学习和运用Ajax,我们可以构建更加互动、高效和流畅的网页应用。

Global site tag (gtag.js) - Google Analytics