1.AJAX 简介:
AJAX = Asynchronous JavaScript and XML
(异步的 JavaScript
和 XML
)。
AJAX
不是新的编程语言,而是一种使用现有标准的新方法。
AJAX
是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。
2.什么是 AJAX ?
AJAX
= 异步 JavaScript
和 XML
。
AJAX
是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换,AJAX
可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
传统的网页(不使用AJAX
)如果需要更新内容,必需重载整个网页面。
3.AJAX是基于现有的Internet标准
AJAX
是基于现有的Internet
标准,并且联合使用它们:
XMLHttpRequest
对象 (异步的与服务器交换数据)
JavaScript/DOM
(信息显示/交互)
CSS
(给数据定义样式)
XML
(作为转换数据的格式)
AJAX
应用程序与浏览器和平台无关的!
4.在 2005 年,Google 通过其 Google Suggest 使 AJAX 变得流行起来。
Google Suggest
使用AJAX
创造出动态性极强的web
界面:当您在谷歌的搜索框输入关键字时,avaScript
会把这些字符发送到服务器,然后服务器会返回一个搜索建议的列表。
5.AJAX - 创建 XMLHttpRequest 对象
XMLHttpRequest
是 AJAX
的基础。
所有现代浏览器均支持XMLHttpRequest
对象(IE5
和IE6
使用 ActiveXObject
)。
XMLHttpRequest
用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
6.AJAX - 向服务器发送请求请求
XMLHttpRequest
对象用于和服务器交换数据。
如需将请求发送到服务器,我们使用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
请求
7.GET 还是 POST?
与POST
相比,GET
更简单也更快,并且在大部分情况下都能用。
然而,在以下情况中,请使用POST
请求:
无法使用缓存文件(更新服务器上的文件或数据库)
向服务器发送大量数据(POST
没有数据量限制)
发送包含未知字符的用户输入时,POST
比 GET
更稳定也更可靠
8.ASP = Active Server Pages
9.AJAX - 服务器 响应
如需获得来自服务器的响应,请使用XMLHttpRequest
对象的 responseText
(获得字符串形式的响应数据。) 或 responseXML
属性。(获得 XML
形式的响应数据。)
responseXML
属性
xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++) {
txt=txt + x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("myDiv").innerHTML=txt;
10.AJAX - onreadystatechange 事件
onreadystatechange
事件
当请求被发送到服务器时,我们需要执行一些基于响应的任务。
每当 readyState
改变时,就会触发onreadystatechange
事件。
readyState
属性存有 XMLHttpRequest
的状态信息。
readyState:
存有 XMLHttpRequest
的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成,且响应已就绪
status:
200: "OK"
404: 未找到页面
11.AJAX ASP/PHP 实例
AJAX
用于创造动态性更强的应用程序。
"onkeyup"
事件:在一个input type = ‘text’
输入的时候,暂停输入 就会执行onkeyup
事件
格式:
ASP:<% ... %>
PHP:<? ... ?>
12.AJAX Database 实例
AJAX
可用来与数据库进行动态通信。
13.ajax的GET方法的数据必须在data里面传输,不能直接就在url参数中去写。
$.ajax({
type:'get',
url:'/app01/index2/',
data:params,
success:success_func,
})
function success_func(){
}