AJAX入门实例
1、什么是 AJAX ？
AJAX = 异步 JavaScript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。
2、实例
//webDemo/ajax/ajaxtest1.html
<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/webDemo/ajax/demo_ajax.html",true);
xmlhttp.send();
alert("异步模式，不用等待服务器响应就直接执行");
}
</script>
</head>
<body> <h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">请求数据</button>
<div id="myDiv"></div> </body>
</html>
//webDemo/ajax/demo_ajax.html
<html>
<body>
<p>ajax 异步请求结果</p>
</body>
</html>
点击前：
点击后：
3、onreadystatechange 事件
当请求被发送到服务器时，我们需要执行一些基于响应的任务。
每当 readyState 改变时，就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
下面是 XMLHttpRequest 对象的三个重要的属性：
| 属性 | 描述 |
|---|---|
| onreadystatechange | 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。 |
| readyState |
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
|
| status |
200: "OK" 404: 未找到页面 |
在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。
4、使用 Callback 函数
callback 函数是一种以参数形式传递给另一个函数的函数。
如果您的网站上存在多个 AJAX 任务，那么您应该为创建 XMLHttpRequest 对象编写一个标准的函数，并为每个 AJAX 任务调用该函数。
该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务（每次调用可能不尽相同）：
//方式1——较好理解
1 <html>
2 <head>
3 <script type="text/javascript">
4 var xmlhttp;
5 function loadXMLDoc()
6 {
7 if (window.XMLHttpRequest)
8 {// code for IE7+, Firefox, Chrome, Opera, Safari
9 xmlhttp=new XMLHttpRequest();
10 }
11 else
12 {// code for IE6, IE5
13 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
14 }
15 xmlhttp.onreadystatechange=callbackFunc;
16 xmlhttp.open("GET","/webDemo/ajax/demo_ajax.html",true);
17 xmlhttp.send();
18 alert("异步模式，不用等待服务器响应就直接执行");
19 }
20
21 function callbackFunc()
22 {
23 if (xmlhttp.readyState==4 && xmlhttp.status==200)
24 {
25 document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
26 }
27 }
28 </script>
29 </head>
30 <body>
31
32 <h2>AJAX</h2>
33 <button type="button" onclick="loadXMLDoc()">请求数据</button>
34 <div id="myDiv"></div>
35
36
37 </body>
38 </html>
//方式2
1 <html>
2 <head>
3 <script type="text/javascript">
4 var xmlhttp;
5 function loadXMLDoc(url, callbackFunc)
6 {
7 if (window.XMLHttpRequest)
8 {// code for IE7+, Firefox, Chrome, Opera, Safari
9 xmlhttp=new XMLHttpRequest();
10 }
11 else
12 {// code for IE6, IE5
13 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
14 }
15 xmlhttp.onreadystatechange=callbackFunc;
16 xmlhttp.open("GET",url,true);
17 xmlhttp.send();
18 alert("异步模式，不用等待服务器响应就直接执行");
19 }
20
21 function myFunction()
22 {
23 loadXMLDoc("/webDemo/ajax/demo_ajax.html",function()
24 {
25 if (xmlhttp.readyState==4 && xmlhttp.status==200)
26 {
27 document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
28 }
29 });
30 }
31
32 </script>
33 </head>
34 <body>
35
36 <h2>AJAX</h2>
37 <button type="button" onclick="myFunction()">请求数据</button>
38 <div id="myDiv"></div>
39
40 </body>
41 </html>
下一篇会用Chrome自带的功能进行调试，理解同步、异步调用。
现在，记住Ajax如何首先处于异步处理状态？当你发送HTTP请求，你不希望浏览器挂起并等待服务器的响应，取而代之的是，你希望通过页面继续响应用户的界面交互，并在服务器响应真正到达后处理它们。要完成它，你可以向XMLHttpRequest注册一个回调函数，并异步地派发XMLHttpRequest请求。控制权马上就被返回到浏览器，当服务器响应到达时，回调函数将会被调用。
http://hi.baidu.com/gfoshizwxbgjpye/item/474430c0a04c99c4994aa05c
http://www.cnblogs.com/liyuyang/articles/1310716.html
http://www.cnblogs.com/sandybeach/archive/2009/05/01/1447560.html
http://mrthink.net/ajax-starter-xmlhttpreq/
AJAX入门实例的更多相关文章
- 原生AJAX入门讲解（含实例）
相对于jQuery.YUI以及其他一些类库的AJAX封装,原生JS的AJAX显得那么的尴尬,兼容性不好,要记很多的方法属性,调用不便捷,代码臃肿...但我还是想说,原生JS才是最根本最底层的知识(虽然 ...
- 掌握 Ajax，第 1 部分: Ajax 入门简介
转:http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro1.html 掌握 Ajax,第 1 部分: Ajax 入门简介 理解 Ajax 及其工作 ...
- jquery实战第一讲---概述及其入门实例
就在5月28号周四下午五点的时候,接到xxx姐姐的电话,您是xxx吗?准备一下,周五上午八点半去远洋面试,一路风尘仆仆,颠颠簸簸,由于小编晕车,带着晕晕乎乎的脑子,小编就稀里糊涂的去面试了,温馨提醒, ...
- 【React】入门实例
React 可以灵活的应用在各种各样的项目中.你可以用它来创建新的应用程序,你也可以逐步引用而不改变现有的代码库. React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaS ...
- Lucene建立索引搜索入门实例
第一部分:Lucene建立索引 Lucene建立索引主要有以下两步:第一步:建立索引器第二步:添加索引文件准备在f盘建立lucene文件夹,然后 ...
- Django学习——图书管理系统图书修改、orm常用和非常用字段（了解）、 orm字段参数（了解）、字段关系（了解）、手动创建第三张表、Meta元信息、原生SQL、Django与ajax(入门)
1 图书管理系统图书修改 1.1 views 修改图书获取id的两种方案 1 <input type="hidden" name="id" value=& ...
- React 入门实例教程(转载)
本人转载自: React 入门实例教程
- struts入门实例
入门实例 1 .下载struts-2.3.16.3-all .不摆了.看哈就会下载了. 2 . 解压 后 找到 apps 文件夹. 3. 打开后将 struts2-blank.war ...
- Vue.js2.0从入门到放弃---入门实例
最近,vue.js越来越火.在这样的大浪潮下,我也开始进入vue的学习行列中,在网上也搜了很多教程,按着教程来做,也总会出现这样那样的问题(坑啊,由于网上那些教程都是Vue.js 1.x版本的,现在用 ...
- wxPython中文教程入门实例
这篇文章主要为大家分享下python编程中有关wxPython的中文教程,分享一些wxPython入门实例,有需要的朋友参考下 wxPython中文教程入门实例 wx.Window 是一个基类 ...
随机推荐
- C#获取文件MD5
什么是MD5? MD5 Message-Digest Algorithm,MD5信息摘要算法.一种被广泛使用的密码散列函数,可以产生出一个128位(16字节)的散列值(hash value),用于 ...
- shell: xcall
#!/bin/bash ips=( 1.1.1.2 1.1.1.1 ) port= user= passwd= for i in ${ips[@]} do echo "== $i ==&qu ...
- js将数字金额转换成中文金额格式
在开发中我们经常会遇到处理数字的问题,下面介绍一种处理数字金额转换为中文金额的方式: 我们通常使用三种书面数字系统:全球使用的阿拉伯数字系统和两种本地数字系统(繁体.简体).常规时我们使用阿拉伯数字( ...
- 如何正确使用 ThreadLocal，你真的用对了吗？
引言: 当多线程访问共享且可变的数据时,涉及到线程间同步的问题,并不是所有时候,都要用到共享数据,所以就需要ThreadLocal出场了. ThreadLocal又称线程本地变量,使用其能够将数据封闭 ...
- MAUI+Blazor混合应用开发示例
前言 笔者之前在公司搭建过一套生产管理系统,该系统要求能和硬件进行串口通信,同时又要提供后台信息查询.笔者给出的解决方案就是:MAUI + Blazor,这样只需要提供一套UI,就能满足桌面端.移动端 ...
- [Lua][Love] "图块集与地图" 加载显示功能 TileMap
效果 安装库 安装两个库,分别用来读xml和csv,如果有luarocks,执行下列命令 luarocks install xml2lua luarocks install ftcsv manoelc ...
- 【Hexo】配置主流搜索引擎收录流程记录
目录 是否已经被收录 生成站点地图 提交站点地图 Google 注册 Search Console 验证网站所有权 提交站点地图 Bing 从 GSC 导入 手动添加网站 手动请求编入索引 参考资料 ...
- Jmeter+Ant+Jenkins接口自动化框架(续)
前段时间给公司内部项目搭建了一套接口自动化框架,基于实际使用,需要配置自动发送邮件功能,将 执行结果发送给相关负责人.Jenkins本身也提供了一个邮件通知功能,但在提供详细的邮件内容.自定义邮 件格 ...
- 深入了解API接口技术及其应用
尊敬的读者们,大家好!在互联网时代,API(Application Programming Interface)接口已经成为开发者们连接各种应用.获取数据的重要工具.今天,我们将深入探讨API接口技术 ...
- api接口对接如何实现商品数据采集的
在当前互联网行业中,快速准确地采集和处理大量数据是非常重要的一项任务.而实现商品数据采集则是许多企业和电商平台必须完成的任务之一.使用API接口对接进行商品数据采集可以大大提高数据采集效率和准确性.下 ...