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 是一个基类 ...
随机推荐
- SpringBoot项目：net.sf.jsqlparser.parser.ParseException: Encountered unexpected token:XXXXX
原文地址 写在前面 最近开发过程中,在where条件中使用IF函数,在MySQL数据库中,使用Navicat运行没有问题,但是运行项目的时候,死活过不去,一直报错,后来一番折腾找到了解决方案,所以,以 ...
- linux基础命令及常用命令总结
1.ls命令 ls命令是最基础的命令之一,作用是列出当前目录下所有的文件和目录.ls命令有很多选项可以使用,比较常用的是-l选项,可以以详细信息的形式列出所有文件和目录的信息. 示例:列出当前目录下的 ...
- salesforce零基础学习（一百二十九）Lead Convertion 有趣的经历
本篇参考:https://help.salesforce.com/s/articleView?id=000382564&type=1 Lead Convertion 是salesforce中s ...
- zabbix system.run
Zabbix的system.run是一个主动模式的监控项,它允许用户在Zabbix服务器上执行自定义的命令或脚本,并获取执行结果作为监控数据. system.run监控项的配置包括以下几个关键参数: ...
- Django: Token分发
Django后台token分发 在settings.py中引入 INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'd ...
- .Net Core 3.0 对 MongoDB 的多条件查询（两种）操作
前言 在日常开发中,偶尔会用到 MongoDB 的数据操作,也花费了一些时间调试,因此在此处记录一下,共同进步. 废话少说,出招吧! 正文 2.1 准备工作 首先需要引入 .Net 平台链接 Mo ...
- SpringCloud-Hystrix服务熔断与降级工作原理&源码
先附上Hystrix源码图 在微服务架构中,根据业务来拆分成一个个的服务,服务与服务之间可以相互调用(RPC),在Spring Cloud可以用RestTemplate+Ribbon和Feign来调用 ...
- 【干货】浅谈如何给.net程序加多层壳达到1+1>2的效果
软件破解分白盒和黑盒两种方式. 白盒破解:白盒破解是指对软件进行破解时,攻击者可以访问软件的内部结构和源代码.这种破解方式通常发生在软件的开发者.技术人员或软件公司内部.攻击者使用这些详细信息来理解软 ...
- 通过python，将excel中的数据写入二维列表
需求:读取Excel表中数据,每行数据放在一个列表中,再把所有列表都存入到一个列表中,形成二维列表. 实现方法:导入可在Python处理Excel表格数据的模块. excel表: 方法一:xlwing ...
- 【pandas小技巧】--日期相关处理
日期处理相关内容之前pandas基础系列中有一篇专门介绍过,本篇补充两个常用的技巧. 1. 多列合并为日期 当收集来的数据中,年月日等信息分散在多个列时,往往需要先合并成日期类型,然后才能做分析处理. ...