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 是一个基类 ...
随机推荐
- Llama2开源大模型的新篇章以及在阿里云的实践
Llama一直被誉为AI社区中最强大的开源大模型.然而,由于开源协议的限制,它一直不能被免费用于商业用途.然而,这一切在7月19日发生了改变,当Meta终于发布了大家期待已久的免费商用版本Llama2 ...
- linux 内核的ksm机制
KSM(Kernel Samepage Merging),是Linux内核中的一种内存优化机制,它能够通过将多个应用程序中的相同内存页合并,实现虚拟内存的节约.KSM通过比较不同进程间的虚拟内存页,如 ...
- 一个从文件中过滤指定字符串的python3脚本
from tabulate import tabulate plugin = [ ... ] plugin_v1 = [ ... ] filepath = "E:\\PycharmProje ...
- 文心一言 VS 讯飞星火 VS chatgpt （68）-- 算法导论6.5 7题
文心一言 VS 讯飞星火 VS chatgpt (68)-- 算法导论6.5 7题 七.试说明如何使用优先队列来实现一个先进先出队列,以及如何使用优先队列来实现栈(队列和栈的定义见 10.1 节.) ...
- Vue错误：Cannot read properties of undefined (reading '$router')
解决方案 这是由于this的指向有问题,我们只需要重新声明一下this就可以重新调用了
- Django:数据库驱动安装
import pymysql pymysql.install_as_MySQLdb() 常见MySQL驱动介绍: MySQL-python:也就是MySQLdb.是对C语言操作MySQL数据库的一个简 ...
- Cilium系列-15-7层网络CiliumNetworkPolicy简介
系列文章 Cilium 系列文章 前言 今天我们进入 Cilium 安全相关主题, 介绍 CiliumNetworkPolicies 相比于 Kubernetes 网络策略最大的不同: 7 层网络策略 ...
- 银河麒麟v10安装达梦数据库
简介 达梦数据库是商业化的国产关系型数据库,体系架构比较像Oracle. 官方在线手册 原生安装 系统版本:银河麒麟V10服务器版 数据库版本:DM8 下载官方安装包,解压后有个ISO文件和包含sha ...
- Docker使用教程及常用命令
Docker是一个开源的应用容器引擎,允许开发者将应用以及依赖打包到一个可移植的容器中,然后发布到任何流行的Linux机器或Windows上.它非常适用于持续集成与持续交付(CI/CD). 1. 安装 ...
- java if switch
强制类型转换 注意事项:大的转小的需要强制转换 例如: double b=3.4 int小于double所以想让int=b,要在b后面加个(int)b. int a=(int)b 得到3 因为大 ...