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 是一个基类 ...
随机推荐
- 2023郑州轻工业大学校赛邀请赛wh
在这里,很感谢程立老师的帮助和选择我,我以后会跟着程老师,既然热爱,就要走下去! 2022年4月2号,我代表河南工业大学与郑州17所高校在郑州轻工业大学举办的"卓见杯"郑州轻工业大 ...
- Win32编程
WIN32 malloc函数的底层实现是Win32API 字符编码 原始的ASCII编码最多能表示127个符号 0-7F(十六进制) 缺点:表示的符号太少了 ASCII编码的扩展:GB2312或GB2 ...
- FAQ：zabbix 频繁丢失数据问题分析处理
问题描述 在grafana上看到历史数据的绘图断断续续. 问题分析 1 性能瓶颈 一开始以为是哪里的性能遇到瓶颈,把服务器和zabbix的监控数据看了一遍,各个指标都没有问题. 2 上网百度 没有找到 ...
- 管于pyinstaller 打包完成后不能运行的问题
方案一: 进入项目路径,在cmd窗口输入python 文件名.之后查看结果,看是否有模块未安装,或者是未导入模块.因为pyinstaller打包时,是按照被打包文件上的导入的库名进行打包的,所以需要将 ...
- 基于AIidlux平台的自动驾驶环境感知与智能预警
自动驾驶汽车又称为无人驾驶车,是一种需要驾驶员辅助或者完全不需操控的车辆. 自动驾驶分级: 自动驾驶系统的组成部分: 环境感知系统: 自动驾驶系统架构: 自动驾驶数据集: Aidlux的作用: YOL ...
- nlp入门（四）新闻分类实验
源码请到:自然语言处理练习: 学习自然语言处理时候写的一些代码 (gitee.com) 数据来源: 搜狗新闻语料库 由于链接失效,现在使用百度网盘分享 链接:https://pan.baidu.com ...
- 通过实战操作学git
虽然说 "好记性不如烂笔头",但是学习不看等于没学,学习不用等于不会,所以说"实战才是检验真理的唯一标准",通过实战则会学到很多东西. 因为陈** 太懒,并且不 ...
- AI绘画StableDiffusion：云端在线版免费使用笔记分享-Kaggle版
玩AI绘画(SD),自己电脑配置不够?今天给大家介绍一下如何baipiao在线版AI绘画StableDiffusion. Kaggle 是世界上最大的数据科学社区,拥有强大的工具和资源,可帮助您实现数 ...
- Stack Overflow开发者调查发布：AI将如何协助DevOps
Stack Overflow 发布了开创性的2023年度开发人员调查报告 [1].报告对 90,000 多名开发人员进行了调查,全面展示了当前软件开发人员的体验.接下来,本文将重点介绍几项重要发现,即 ...
- PDF 补丁丁 1.0 正式版
经过了一年多的测试和完善,PDF 补丁丁发布第一个开放源代码的正式版本了. PDF 补丁丁也是国内首先开放源代码.带有修改和阅读PDF的功能的 PDF 处理程序之一. 源代码网址:https://gi ...