ajax原理和例子

最新推荐文章于 2024-04-28 07:12:42 发布
最新推荐文章于 2024-04-28 07:12:42 发布
阅读量234 收藏
点赞数
分类专栏： ajax javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aa_moon/article/details/53435487
版权
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" οnclick="getTest()" value="点我改变内容"></input>

</body>
</html>

效果如图：



点击按钮后



  • 大小: 20.9 KB
  • 大小: 18.9 KB
q_182480171
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ajax原理简介（包含例子说明）
07-09
AJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。 主要包含了以下几种技术 Ajax（Asynchronous JavaScript + XML）的定义 基于web标准...
Ajax工作原理和实现步骤
leaf__yang的博客
02-12 9107
目录 一 Ajax技术与原理 1.1 Ajax简介 1.2 Ajax所包含的技术 1.3 Ajax的工作原理 1.4 XMLHttpRequest 对象的三个常用的属性 1. onreadystatechange 属性 2. readyState 属性 3. responseText 属性 1.5 xmlhttprequst的方法 1. open() 方法 2. send() 方法 二 Ajax编程步骤 2.1 创建XMLHttpRequest对象 2.2 设置请求方式 2.3
Ajax工作原理
风萧萧兮易水寒，壮士一去兮不复还
05-27 653
原文地址：Ajax工作原理 1、ajax技术的背景 不可否认，ajax技术的流行得益于google的大力推广，正是由于google earth、google suggest以及gmail等对ajax技术的广泛应用，催生了ajax的流行。而这也让微软感到无比的尴尬，因为早在97年，微软便已经发明了ajax中的关键技术，并且在99年IE5推出之时，它便开始支持XmlHttpRequest对象，并且...
Ajax 解决浏览器缓存问题原理和例子
codemami的博客
04-28 1007
当设置为false时，jQuery会在请求的URL后添加一个随机的时间戳参数，从而确保每次请求的URL都是唯一的，从而避免浏览器使用缓存的数据。例如，可以设置Cache-Control: no-cache来告诉浏览器不要使用缓存的数据，而是应该向服务器发送请求以获取最新的数据。解决Ajax请求中的浏览器缓存问题，通常是通过在请求头中设置一些特定的字段来实现的。此外，还可以通过在请求的URL后添加一个随机的查询参数（例如时间戳）来避免缓存，因为浏览器通常会对具有不同URL的请求进行不同的缓存处理。
【AJAX】请求原理 同步和异步
weixin_62321221的博客
05-05 1424
一、.AJAX概念 本质：使用JS提供的异步对象，在页面不刷新的情况下，发送http请求，得到http响应，实现页面的局部刷新，涉及到的技术HTML JS HTTP/HTTPS 接口 XML JSON 二、完整的WEB请求原理 比如：我们在网页中输入www.jd.com，过了2秒后网页成功显示出来了，那么这2秒发生了什么？ (1)用户输入了域名www.jd.com，想要访问京东的服务器 注：计算机间的互相查找是通过IP地址来访问的，计算机不认识域名，域名只是为了方便人的记忆与使用的...
ajax的异步原理和执行过程,【web前端开发】之Ajax的原理、实现步骤和实现方式...
weixin_39978276的博客
08-05 652
一、原理：Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发送异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。XMLHttpRequest是ajax的核心机制，是一种支持异步请求的技术。简单的说，也就是javascript可以及时向服务器提出请求和处理响应，而不阻塞用户。达到无刷新的效果。说人话就是：“HTTP协议的异步通信”。那什么是同步，异步呢...
Ajax的原理是什么? 如何实现?
weixin_55862315的博客
05-07 1872
Ajax原理 如何实现
ajax工作原理
zym_zb的博客
08-04 5041
ajax工作原理         在写这篇文章之前，曾经写过一篇关于AJAX技术的随笔，不过涉及到的方面很窄，对AJAX技术的背景、原理、优缺点等各个方面都很少涉及null。这次写这篇文章的背景是因为公司需要对内部程序员做一个培训。项目经理找到了我，并且征询我培训的主题，考虑到之前Javascript、CSS等WEB开发技术都已经讲解过了，所以决定针对AJAX这一块做一个比较系统的培训，所以
详细解析Ajax的异步原理
wocao2dai的博客
10-15 304
js的异步实现原理是单线程加事件队列； 我们先来解析什么是单线程与多线程： 举一个例子：单线程是一个人吃一个西瓜，多线程就是多个人吃一个西瓜；那么就可以看出多线程比单线程快很多； 那么js的代码执行也是单线程，因为它的执行顺序是从上往下，一行一行的执行； 我们再来看看事件队列： 我们可以把事件队列认为是一个容器，这个容器中存储了一些函数；只有在js代码全部执行完成之后，才去调用函数，因为js是单线程的，一次只能做一件事情 我们再来举一些例子来解释一下这个事件队列： <script&.
Ajax原理学习
小宝鸽
02-26 2509
一、AJAX 简介AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，
Ajax的原理和应用
逝去的鸣人
05-19 1750
Ajax的原理和应用 在这篇文章中，我将从10个方面来对AJAX技术进行系统的讲解。   1、ajax技术的背景         不可否认，ajax技术的流行得益于google的大力推广，正是由于google earth、google suggest以及gmail等对ajax技术的广泛应用，催生了ajax的流行。而这也让微软感到无比的尴尬，因为早在97年，微软便已经发明了ajax中的关键
Ajax和jQuery学习笔记
03-29
这个笔记是很全面的原生Ajax用法、json解释和jQuery选择器、dom操作、事件的讲解每一部分都有例子搭配，是学习熟悉jQuery的好资料！
Ajax最简单例子Demo
04-13
Ajax最简单例子，一个例子让你明白Ajax原理，XMLHttpRequest原理 var http_request = false; function createRequest(url) { http_request = false; if (window.XMLHttpRequest) { // Mozilla浏览器 ...
ajax最简单例子二
05-02
ajax最简单例子之二，通过简单例子了解ajax的原理！
Ajax最简单的例子
05-02
Ajax最简单的例子（1），通过它可以很快的知道Ajax 的工作原理！
node-v4.8.6-win-x64.zip
05-07
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
基础运维技能（下）md格式笔记
最新发布
05-07
基础运维技能（下）md格式笔记
node-v8.1.2-linux-armv7l.tar.xz
05-07
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
黑马程序员 C语言学习笔记
05-07
持续更新
原生js解决ajax跨域
05-24
JSONP 原理是利用 `<script>` 标签没有跨域限制的漏洞。通过动态创建 `<script>` 标签，向服务器请求 JSON 数据，服务器收到请求后，将数据放在一个指定名字的回调函数中传回来。 以下是一个简单的例子： ```...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值