什么是Ajax？
Ajax是一门技术，一种方法，不是编程语言。
全名为Asynchronous JavaScript and XML，即异步的JavaScript和XML技术，Ajax应用可以向服务器发送并取回数据，并在客户端采用JavaScript处理服务器响应，其核心``XMLHttpRequest`对象。XHR提供接口，以便向服务器发送请求和解析服务器响应，以异步的方式从服务器获得新数据。
jQuery提供了Ajax有关的方法，使用http GET和http POST从远程服务器上请求文本、html、xml或Json，并将其载入网页被选元素中。
工作原理
Ajax工作原理 来自菜鸟教程
实例
在搜索栏，用户输入搜索关键词时，Google Suggets通过Ajax返回搜索建议。
应用
注册时，检测用户名是否存在；
登陆时，检测用户名、密码是否错误；
优点
- 不必重复加载页面，也可以更新信息；改善用户体验，实时交互；提高B/S的体验性；
- 减少服务器的负荷；
- 不需要额外的浏览器插件，用js运行；
- 未来会更强调B/S，成为主流，爆发式增长；
问题解决思路：
异步加载；例如曾经通过嵌入网页中的Java applets同服务器交换数据，而不用重载网页；用iframe元素，局部刷新网页；
缺点
返回按钮可能没有效果，历史浏览信息功能可能失效。
因为历史信息只对静态html有效。
使用
创建XMLHttpRequest 对象
XMLHttpRequest是Ajax的基础。
XMLHttpRequest 对象
用于后台和服务器交换数据。
创建XMLHttpRequest 对象的语法
variable=new XMLHttpRequest();
早期浏览器ie5、ie6使用activeX对象
variable=new ActiveXObject("Microsoft.XMLHTTP");
创建xhr之前，先检查浏览器对xhr的支持和兼容情况。
var xmlhttp
if (window.XMLHttpRequest){
// ie7+ safari chrome firefox opera
xmlhttp = new XMLHttpRequest();
}
else
{
// ie5 ie6
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
向服务器发送请求
使用XMLHttpRequest对象的open()和send()方法。
xmlhttp.open(“GET”, "ajax_info.txt",true);
| 方法 | 描述 |
|---|---|
| open(method,url,async) | 规定请求的类型、URL 以及是否异步处理请求。 method：请求的类型；GET 或 POST url：文件在服务器上的位置，可以是任何类型的文件，或者服务器脚本文件传回之前可以在服务器上执行任务 async：true（异步）或 false（同步） 默认为true，js不必等待服务器响应，并执行其他脚本，响应就绪后，再对响应进行处理 |
| send(string) | 将请求发送到服务器。 string：仅用于 POST 请求 |
| setRequestHeader(header,value) | 向请求添加 HTTP 头。 header: 规定头的名称 value: 规定头的值 |
GET vs POST
GET: 简单、快；
POST: 可以使用缓存；可以发送大量数据；发送未知字符的用户输入时，更加稳定可靠。
xmlhttp.open("POST","/try/Ajax/demo_post2.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");
获得服务器的响应
使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
如果是非XML文本，使用responseText进行响应。
如果是XML文本，则使用responseXML响应。
onreadystatechange 事件
每当 readyState 改变时，就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
| 属性 | 描述 |
|---|---|
| onreadystatechange | 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。 |
| readyState | 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 - 0: 请求未初始化 - 1: 服务器连接已建立 - 2: 请求已接收 - 3: 请求处理中 - 4: 请求已完成，且响应已就绪 |
| status | - 200: "OK" - 404: 未找到页面 |
当 readyState 等于 4 且状态为 200 时，表示响应已就绪：
示例
最简单的示例
<!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>
其他例子
创建对象
请求
响应
onreadystatechange 事件
ASP/PHP 实例
Database 实例
XML 实例
AJAX 实例
相关概念
JS XML Ajax Json AJAJ AFLAX
网友评论