`

ajax原理和例子

ajaxjavascript 
阅读更多
XMLHttpRequest 返回数据

AJAX(异步javascript+xml)用于改善客户体验，核心是 XMLHttpRequest,它可以在不刷新页面的情况下，从服务器取得数据
取得的数据有两种方式：
responseText  获得字符串形式的响应数据。
responseXML  获得 XML 形式的响应数据。

代码如下：

<html>
<head>
<script type="text/javascript">

var xmlhttp;
function getTest()
{
loadXMLDoc("http://www.w3school.com.cn/ajax/test1.txt",function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
  });
}

function loadXMLDoc(url,cfunc)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=cfunc;
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
</script>
</head>
<body>

<div id="myDiv"><h2>使用ajax取得数据</h2></div>
<input type="button" onclick="getTest()" value="点我改变内容"></input>

</body>
</html>

效果如图：



点击按钮后



  • 大小: 20.9 KB
  • 大小: 18.9 KB
分享到：
| webos 上的应用举例
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Ajax的JSP例子

    这个例子对于初学者来说是一个很好的实践平台，可以帮助理解Ajax的工作原理及其与JSP的结合。你可以尝试修改JavaScript代码以改变请求参数，或者调整JSP来处理不同的请求，进一步提升自己的技能。 总之，这个Ajax ...

    反向ajax聊天简单例子

    1. 反向Ajax原理： 反向Ajax的核心思想是通过持久连接（Persistent Connection）或轮询（Polling）等技术，使服务器能够在有新消息时主动向客户端发送数据，实现即时通讯。这在聊天应用、实时股票更新、在线游戏等...

    一个完整的ajax应用例子

    **Ajax（Asynchronous JavaScript and XML）技术是一种在无需...这个压缩包文件中的"ajaxjs"可能包含了实现上述功能的JavaScript代码，通过学习和理解这段代码，你可以深入理解Ajax的工作原理及其在实际项目中的应用。

    AJAX教案和例子

    **一、AJAX的基本原理** 1. **XMLHttpRequest对象**：AJAX的核心是XMLHttpRequest（XHR）对象，它负责在后台与服务器进行异步数据交换。即使用户在页面上执行其他操作，XHR对象也可以在后台发送请求并接收响应。 2. ...

    AJAX文档和例子

    解压后，可以逐个运行这些例子，深入理解AJAX的工作机制及其在实际项目中的应用。 总的来说，AJAX是现代Web开发中的关键技术，它极大地提升了网页的动态性和用户体验。通过学习AJAX，开发者可以构建更高效、更响应...

    Ajax最简单例子Demo

    Ajax最简单例子，一个例子让你明白Ajax原理，XMLHttpRequest原理 var http_request = false; function createRequest(url) { http_request = false; if (window.XMLHttpRequest) { // Mozilla浏览器 ...

    Ajax小例子源码

    本Ajax小例子源码提供了对这一技术的基础应用，非常适合初学者学习和理解Ajax的工作原理。下面我们将详细解析Ajax的几个关键知识点： 1. **XMLHttpRequest对象**：这是Ajax的核心，它是JavaScript内置的对象，用于...

    ajaxDemo的例子

    "用个完整的例子教你理解Ajax原理及过程_小超的空间_百度空间.htm"可能是一个详细的教程，讲解了从创建XMLHttpRequest对象，到发送请求，再到处理服务器响应的全过程。这个教程可能包括了错误处理，比如检查HTTP状态...

    jquery,ajax的几个小例子

    这些例子可能包括了级联选择和自动补全等交互效果，你可以直接运行这些示例，观察它们的工作原理。 总结，jQuery和Ajax的结合大大提高了Web应用的用户体验，使得网页能够在不刷新的情况下与服务器进行通信。通过...

    ajax原理简介（包含例子说明）

    **Ajax原理简介** Ajax，全称"Asynchronous JavaScript and XML"，是一种用于构建高度交互式Web应用程序的技术，使得页面能够在不完全刷新的情况下与服务器通信。它不是单一的技术，而是结合了多种技术，包括...

    一个ajax的小例子

    此外，现代的前端框架和库，如jQuery、axios和Fetch API，已经对Ajax进行了封装，使其使用更加简洁，但基本原理依然相同。学习Ajax对于开发交互性强的Web应用至关重要，它可以让你的网页在不打断用户操作的情况下...

    Ajax省市联查例子

    首先，我们需要理解Ajax的基本工作原理。它通过JavaScript创建XMLHttpRequest对象，向服务器发送异步请求，获取服务器响应的数据，然后在客户端（浏览器）用JavaScript处理这些数据，更新DOM（文档对象模型）来改变...

    易懂asp的ajax例子

    总结，"易懂asp的ajax例子"应该包含如何在ASP中使用Ajax进行异步通信的实例，通过XMLHttpRequest或jQuery的$.ajax()方法，结合客户端和服务器端的脚本编写，实现页面部分数据的动态加载，提高用户体验。文件名...

    Ajax入门例子项目

    Ajax（Asynchronous JavaScript and XML）是一种在无需刷新整个网页的...通过这个Ajax入门例子项目，新手可以动手实践，逐步理解Ajax的工作原理，并掌握如何在实际项目中应用Ajax技术，提升网页的交互性和用户体验。

    一个简单的Ajax例子

    【Ajax和DWR技术简介】 ...同时，随着前端框架的发展，如React、Vue等，DWR可能不再是首选的Ajax解决方案，但了解DWR可以帮助理解Web通信的基本原理，对理解现代Web应用的架构和工作流程大有裨益。

    简单易学的Ajax ppt 和例子

    这个"简单易学的Ajax ppt"应该包含了Ajax的基本概念、工作原理、API使用方法等内容，配合实例代码，帮助初学者快速上手。通过阅读PPT，你可以了解Ajax的基本架构，理解异步请求的运作机制，掌握如何在实际项目中运用...

    jquery ajax分页例子

    在网页开发中，jQuery是一个非常流行的JavaScript库，它极大地简化了DOM操作、事件处理和Ajax交互。本示例主要关注jQuery结合Ajax实现的分页功能，这种技术允许用户在不刷新整个页面的情况下加载新的内容，提高了...

    Ajax小例子

    本篇文章将通过一个简单的Ajax小例子来深入理解其工作原理。 首先，我们需要明白Ajax的基本组成部分： 1. **XMLHttpRequest对象**：这是Ajax的核心，它是浏览器提供的API，用于在后台与服务器进行通信。即使名称中...

    JSP使用Ajax 例子

    **Ajax（Asynchronous JavaScript and XML）**是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。...了解Ajax的基本原理和使用方式，可以帮助你在开发富客户端Web应用时提高效率和用户体验。

    简单ajax登陆例子，新手适用

    这个“简单ajax登录例子”是一个非常适合初学者理解Ajax基本原理和使用方法的教程。在这里，我们将深入探讨Ajax如何与Servlet结合，实现用户无刷新登录验证。 1. **Ajax简介** Ajax的核心是JavaScript异步通信，它...

Magicbox
Global site tag (gtag.js) - Google Analytics