菜鸟的Ajax笔记
- 格式：doc
- 大小：53.50 KB
- 文档页数：12
菜鸟的Ajax笔记——简介Ajax的主要作用就是不刷新页面更新页面的内容，也就是异步传输。Ajax的百度百科。用来显示Ajax响应的div。Ajax听起来很厉害，但是用起来其实很简单。下面就是一段使用Ajax的简单示例。
function ajaxRequest(){
var req = false;
if(window.XMLHttpRequest) {
var req = new window.XMLHttpRequest();
} else if (window.ActiveXObject) {
var req = new window.ActiveXObject('Microsoft.XMLHTTP');
}
if(!req) return false;
req.onreadystatechange = callback;
req.open('GET','ajax/ajaxTest.txt',true);
req.setRequestHeader('Accept-Language','zh-cn');
req.send(null);
function callback(){
switch (req.readyState) {
case 1:
//alert('Loading');
break;
case 2:
//alert('loaded');
break;
case 3:
//alert('Interactive');
break;
case 4:
if (req.status && req.status == 200){
var str = req.responseText;
document.getElementById('test').innerHTML =
str;
}
break;
}
}
}
function addEventSimple(obj,evt,fn){
if(obj.addEventListener){
obj.addEventListener(evt,fn,false);
}else if(obj.attachEvent){
obj.attachEvent('on'+evt,fn);
}
}
addEventSimple(document,'dblclick',ajaxRequest);
代码的最后部分给document添加一个双击的响应函数，当文档被双击的时候就调用ajaxRequest函数，也就是负责发送Ajax请求的函数。
ajaxRequest函数中，第一步就是创建一个XMLHttpRequest对象，代码如下，由于IE和其它浏览器支持的方式不太一样，所以会试图使用使用两个方法来创建这个对象。 var req = false;
if(window.XMLHttpRequest) {
var req = new window.XMLHttpRequest();
} else if (window.ActiveXObject) {
var req = new window.ActiveXObject('Microsoft.XMLHTTP');
}
if(!req) return false;
第二步是设置XMLHttpRequest对象的状态变化响应函数。
req.onreadystatechange = callback;
下面是发送Ajax请求了。
req.open('GET','ajax/ajaxTest.txt',true);
req.send(null);
最后就可以编写状态变化响应函数了：
function callback(){
switch (req.readyState) {
case 1:
//alert('Loading');
break;
case 2:
//alert('loaded');
break;
case 3:
//alert('Interactive');
break;
case 4:
if (req.status && req.status == 200){
var str = req.responseText;
document.getElementById('test').innerHTML = str;
}
break;
}
}
函数的作用就是将返回的字符串添加到页面开头id为test的div内。双击这个文档就可以看到效果。XMLHttpRequest对象Ajax的核心就是XMLHttpRequest对象。 XMLHttpRequest对象的属性
readyState
表示XMLHttpRequest对象的当前状态，可取值为0-4，共5个状态。
0 ："未初始化"状态；此时，已经创建一个XMLHttpRequest对象，但是还没有初始化。
1 ："发送"状态；此时，代码已经调用了XMLHttpRequest open()方法并且XMLHttpRequest已经准备好把一个请求发送到服务器。
2 ："发送"状态；此时，已经通过send()方法把一个请求发送到服务器端，但是还没有收到一个响应。
3 ："正在接收"状态；此时，已经接收到HTTP响应头部信息，但是消息体部分还没有完全接收结束。
4 ："已加载"状态；此时，响应已经被完全接收。
onreadystatechange
当readyState属性变化的时候会调用的函数。
responseText
响应的文本内容。当 readyState值为0、1或2时，responseText包含一个空字符串。当readyState值为3(正在接收)时，响应中包含客户端还未完成的响应信息。当readyState为4(已加载)时，该responseText包含完整的响应信息。
responseXML
XML响应；Content-Type头部指定MIME(媒体)类型为text/xml，application/xml或以+xml结尾。如果Content-Type头部并不包含这些媒体类型之一，那么responseXML的值为null。
status
HTTP状态代码。仅当readyState值为3(正在接收中)或4(已加载)时，该属性才可用。当readyState的值小于3时试图存取status的值将引发一个异常。
statusText
HTTP状态的文本；并且仅当readyState值为3或4才可用。当readyState为其它值时试图存取statusText属性将引发一个异常。 XMLHttpRequest对象的方法
abort()
取消当前请求。把XMLHttpRequest对象复位到未初始化状态。
open()
open(method,url,async,username,password)
方法初始化一个XMLHttpRequest对象。
method参数是必须提供的-用于指定你想用来发送请求的HTTP方法 (GET，POST，PUT，DELETE或HEAD)。
url参数用于指定XMLHttpRequest对象把请求发送到的服务器相应的URL。
async参数为布尔值，指定请求是否异步，默认值为true，即异步。
该方法把XMLHttpRequest对象的readyState属性设置为1。
setRequestHeader()
setRequestHeader(header，value)
设置请求的头部信息。必须在调用open()方法后调用这个方法（当readyState值为1时）。
send()
send([content])
把请求发送到服务器。
content函数可选，是要发送到服务器的内容，通常在POST方法的时候使用。
该方法把XMLHttpRequest对象的readyState属性的值设置为2。
getResponseHeader()
getResponseHeader(header，value)方法用于检索响应的头部值。仅当readyState值是3或4
getAllResponseHeaders()
该getAllResponseHeaders()方法以一个字符串形式返回所有的响应头部。处理Ajax响应1——innerHTML学会了Ajax的核心，再来做几个例子，使用innerHTML将服务器响应的内容添加到页面，响应的格式是纯文本，也就是使用XMLHttpRequest对象的responseText属性。效果如下，只要点击那几个按钮就可以分别向服务器发送三个不同的Ajax请求。
用Ajax请求段文字用Ajax请求一个table用Ajax从豆瓣取得封面图片
JavaScript代码分析
首先，这个需要发送三次请求，所以我们把可以重用的代码编写到一个函数中，这个函数的任务就是设置XMLHttpRequest对象，初始化必要的属性。代码很大程度上参考了《Ajax基础教程》和《AdvancED DOM Scripting》。
function createRequest(options){
var req = false;
if(window.XMLHttpRequest) {
