AJAX主要用于前后台数据的交互,它以XMLHttpRequest为基础。
1、创建XMLHttpRequest对象
variable = new xmlHttpRequest();
2、AJAX向服务器发送请求
使用XMLHttpRequest 的 open() 和send() 方法向服务器发送请求,
XMLHttpRequest.open("Get" , "ajax_info.text", true);
XMLHttpRequest.send();
方法 | 描述 |
open(method, url, async) | method = get / post 规定请求类型; URL指明文件在服务器上的位置; async是否异步处理请求,默认为true 异步。 |
send(string) | 将请求发送到服务器,string:仅用于post请求 |
3、什么情况先使用get或post。
与post相比get更简单也更快,并且在大部分情况下都能使用。然而下面情况下优先考虑使用post
(1)无法使用缓存文件(更新服务器上的文件或者数据库)
(2)向服务器发送大量数据(post没有数据限制)
(3)发送包含未知字符的用户输入时,post比get更稳定也更可靠
4、AJAX——服务器响应
使用XMLHttpRequest对象的responseText / responseXml 属性 获得来自服务器的响应。XMLHttpRequest获得字符串形式的响应数据,responseXml获得xml形式的相应数据。
5、AJAX——onreadystateChange事件取得响应
当请求发送到服务器时,需要执行一些基于响应的任务。每当readyState改变时,就会触发哦你readystateChange事件。readyState属性存有XMLHttpRequest的状态信息。
下面是XMLHttpRequest对象的三个重要的状态信息
属性 | 描述 |
onreadystateChange(监听) | 存储函数(或者函数名)每当readyState属性改变时,就会调用该函数 |
readyState(取得响应) | 存有XMLHttpRequest的状态,从0~4变化 0:请求未初始化 1:服务器连接已建立 2:请求已接受 3:请求处理中 4:请求已完成且响应已就绪 |
status | 200:“OK” 404:未找到页面 |
6、 例子
var xmlHttp = new XMLHttpRequest() ;
xmlHttp.onreadystateChange = function(){
if(xmlHttp.readyState == 4 && xmlHttp.state == 200){
document.getElementById( " ").innerHtml = xmlHttp.reposeText;
}
}
xmlHttp.open("GET" , " url" , true);
xmlHttp.send();