笔记-AJAX
笔记-AJAX
1. 简介
Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。
AJAX是基于现有的Internet标准开发的：
XMLHttpRequest 对象 (异步的与服务器交换数据)
JavaScript/DOM (信息显示/交互)
CSS (给数据定义样式)
XML (作为转换数据的格式)
注意：AJAX应用程序与浏览器和平台无关的！
2. 使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else
{
// 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","/try/ajax/ajax_info.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改内容</button>
</body>
</html>
代码很简单，原理也很简单，触发事件，调用函数，向服务器发送请求，得到返回值，修改网页元素属性；
但为什么xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
xmlhttp.send();
放在后面？
把onreadystatechange当做属性就可以了，当该属性被触发时调用function()
2.1. 实现原理解释
XMLHttpRequest 是 AJAX 的基础。
所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
2.1.1. 创建 XMLHttpRequest 对象
所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。
创建 XMLHttpRequest 对象的语法：
variable=new XMLHttpRequest();
老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：
variable=new ActiveXObject("Microsoft.XMLHTTP");
2.1.2. 向服务器发送请求
如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
|
open(method,url,async) |
规定请求的类型、URL 以及是否异步处理请求。 method：请求的类型；GET 或 POST url：文件在服务器上的位置 async：true（异步）或 false（同步） |
|
send(string) |
将请求发送到服务器。 string：仅用于 POST 请求 |
2.1.3.
服务器响应
如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
|
属性 |
描述 |
|
responseText |
获得字符串形式的响应数据。 |
|
responseXML |
获得 XML 形式的响应数据。 |
2.2.
onreadystatechange 事件
当请求被发送到服务器时，我们需要执行一些基于响应的任务。
每当 readyState 改变时，就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
下面是 XMLHttpRequest 对象的三个重要的属性：
|
属性 |
描述 |
|
onreadystatechange |
存储函数（或函数名），每当 |
|
readyState |
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪 |
|
status |
200: |
使用回调函数
回调函数是一种以参数形式传递给另一个函数的函数。
如果您的网站上存在多个 AJAX 任务，那么您应该为创建 XMLHttpRequest 对象编写一个标准的函数，并为每个 AJAX 任务调用该函数。
该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务（每次调用可能不尽相同）：
笔记-AJAX的更多相关文章
- [学习笔记]AJAX学习
AJAX学习 ——在w3cschool学习AJAX的学习笔记 参考网站:w3cschool XMLHttpRequest 是 AJAX 的基础. XMLHttpRequest 对象 所有现代浏览器均支 ...
- Jquery学习笔记 --ajax删除用户，使用了js原生ajax
主要复习了php的pdo数据库操作,和js的ajax,真麻烦,希望jquery的ajax简单点. index.php: 1 <!DOCTYPE html> 2 <html lang= ...
- loadrunner 学习笔记--AJAX（转）
用loadrunner测试WEB程序的时候总是会碰到AJAX或者ActiveX实现的功能,而通常这些功能会包含很多客户端函数(一般为JavaScript).我们该如何处理?如果从功能实现的角度去考虑这 ...
- jquery学习笔记----ajax使用
一.load() 加载页面数据 load(url,[data],[callback]) url:加载的页面地址,[data]传送的数据,[callback]加载完成时回调函数. 设计一个load.ht ...
- jquery学习笔记-----ajax
$(selector).load( url [,date] [,callback] ) url:请求页面的url地址 date:发送至服务器的key:value数据 callback:请求完成时的回调 ...
- JavaWeb笔记——ajax异步请求
1. ajax是什么? * asynchronous javascript and xml:异步的js和xml * 它能使用js访问服务器,而且是异步访问 * 服务器给客户端的响应一般是 ...
- 20151210 Jquery 学习笔记 AJAX 进阶
一．加载请求 在 Ajax 异步发送请求时,遇到网速较慢的情况,就会出现请求时间较长的问题.而超 过一定时间的请求,用户就会变得不再耐烦而关闭页面.而如果在请求期间能给用户一些提 示,比如:正在努力加 ...
- 20151209jquery学习笔记Ajax 代码备份
/*$(function () { $("input").click(function() { $.ajax({ type:'POST', url:'test.php', data ...
- 20151207jquery 学习笔记 Ajax
.load()方法是局部方法,因为他需要一个包含元素的 jQuery 对象作为前缀.而$.get()和 $.post()是全局方法,无须指定某个元素.对于用途而言,.load()适合做静态文件的异步获 ...
随机推荐
- 如何在项目中新建.gitignore文件
1. 在需要创建 .gitignore 文件的文件夹, 右键选择 Git Bash 进入命令行,进入项目所在目录. 2. 输入 touch .gitignore 在文件夹就生成了一个“.gitigno ...
- 实战【docker 镜像制作与使用】
一.制作docker 镜像 使用spring boot 构建一个简单的web 项目,返回 “Hello,World ”字符串,使用 Maven 打成 jar 包,使用的Linux 环境是 Centos ...
- blog主题——马路
blog主题,存储一下 css /************************************************** 第一部分:所有的模板都使用的公共样式.公告样式是为了更好的向前 ...
- C语言创建共享库（动态库）步骤
C语言创建共享库(动态库)步骤: 创建sth.c,共享库源文件: //sth.c库源程序 unsigned long long sth(unsigned int x, unsigned int y) ...
- eclipse 鼠标悬停提示
如果想要关闭鼠标悬停提示,只要把Window --> Preferences... --> Java --> Editor --> Hovers 把 Combined Hove ...
- 迅速看一下jdk8
一直在看java并发的感觉说的有点多,就看点简单的放松一下吧!这次来简单说一下jdk8,很久没用,都陌生了,仔细看看还挺有意思的,让我们大脑转化一个角度来写代码:因为我们现在平常大部分用jdk7写代码 ...
- 创业学习---《如何展开竞争情报调研》--D-1.调研模块---HHR计划---以太一堂
第一:<开始学习> 1,投资人看人标准:人品好:创业热情:学习能力. 2,思考题:请你预判一个最靠谱的方向来创业,你会怎么调研呢? 3,预热思考题: (1)在这个赛道,究竟有哪些重要竞争对 ...
- django模块导入/函数/中间件/MVC和MTV/CSRF
目录 一:模块导入 二:函数 三:中间件 四:MVC和MTV 五:csrf 一:模块导入 第一种:继承 这里的母版更像是一个架子,子板都是定义的内容(如果多个页面中 ,存在相同的页面:这样我们可以抽到 ...
- pthon中的基本运算
格式化输出的三种方式 1.占位符 程序中经常会有这样的场景:要求用户输入信息,然后打印成固定的格式 比如要求用户输入用户名和年龄,然后打印如下格式: my name is xxx,my age is ...
- [C++_QT] Error: Not a signal or slot declaration
问题: 在Qt工程中添加了一个新的窗口之后 一直报错 如下 单单从错误描述上看 是缺少信号或者槽 但是我确定没有缺少啊 然后第二个错误显示了一个mox_xxxx文件 然后我就去那个目录下去找那个文件 ...