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 是一个基类 ...
随机推荐
- 【转载】Linux虚拟化KVM-Qemu分析（七）之timer虚拟化
原文信息 作者:LoyenWang 出处:https://www.cnblogs.com/LoyenWang/ 公众号:LoyenWang 版权:本文版权归作者和博客园共有 转载:欢迎转载,但未经作者 ...
- python笔记：第十一章正则表达式
1.模块re 以一定规则,快速检索文本,或是实现一些替换操作 默认下,区分大小写 2.常见的匹配字符表 字符 描述 \d 代表任意数字,就是阿拉伯数字 0-9 这些 \D 代表非数字的字符.与\d完全 ...
- 一个从文件中过滤指定字符串的python3脚本
from tabulate import tabulate plugin = [ ... ] plugin_v1 = [ ... ] filepath = "E:\\PycharmProje ...
- pandas 删除重复项
使用如下函数: drop_duplicates 具体示例如下: import pandas as pd # 建立一个dataframe数据 df = pd.DataFrame({'k1':['one' ...
- 青少年CTF平台-Web-Robots
题目信息 题目名称:Robots 题目描述:昨天十三年社团讲课,讲了Robots.txt的作用,小刚上课没有认真听课正在着急,你能不能帮帮忙? 题目难度:一颗星 解题过程 访问题目链接 在这里插入图片 ...
- 在Jupyter中使用AI写代码，如有神助，太惊艳了
昨晚看到一个可以在JupyterLab中使用的AI代码辅助工具jupyter-ai,它的交互确实非常棒,可以直接聊天,也可以就笔记中的代码提问,最出彩的是生成笔记功能,还是蛮惊艳的. 这里就极简介绍一 ...
- trino on yarn
一.前言 最近在研究trino on yarn 功能,网上大部分都是关于presto on yarn文章,关于trino on yarn 资料很少,但是本质上差不多,需要修改一些内容比,主要在调试方面 ...
- 开源 SD-Small 和 SD-Tiny 知识蒸馏代码与权重
最近,人工智能社区在开发更大.更高性能的语言模型方面取得了显著的进展,例如 Falcon 40B.LLaMa-2 70B.Falcon 40B.MPT 30B; 以及在图像领域的模型,如 SD2.1 ...
- 《Python魔法大冒险》008 石像怪的挑战：运算符之旅
小鱼和魔法师继续深入魔法森林.不久,他们来到了一个巨大的魔法石圈旁边.石圈中心有一个闪闪发光的魔法水晶,周围则是一些神秘的符号.但令人意外的是,水晶的旁边还有一个巨大的石像怪,它的眼睛散发着红色的光芒 ...
- [htmlayout] csss! 改变值/文本
<input type="text" value="123" /> <div class="test">内容内容&l ...