Ajax 基础(自己学习)
XMLHTTPRequest---->JavaScript对象
open()
onreadystatechange---->委托
send()
readystate----页面响应关态
status-----页面状态
setRequestHeader----设置请求头协议
第一步 创建XMLHTTPRequest对象
var request=onInit();
第二步 告诉请求那个服务器
request.open("GET",URL,TRUE);1提交方式 2 服务器地址 3 是否准许异步提交
第三步 定义事件当请求开始后触发
request.onreadystatechange=Request;
第四步
request.send(null);//开始提交到服务器提交的参数,POST提交需要参数
function CreateResponse()
{
创建XMLDocument对象
var dom=request.ResponseXML();
字符串
var str=request.responseText();
}
function Request()
{
判断数据是否响应完毕
if(request.readystate==4)
{
判断页面是否正常
if(request.status==200)
{
}
}
}
function onInit()
{
if (window.XMLHttpRequest) {
return new windows.XMLHTTPRequest();
}
if (window.ActiveXObject) {
return new window.ActiveXObject("microsoft.XMLHTTP");
}
}
-----------------------------------------------
XMLHttpRequest 对象是AJAX功能的核心,要开发AJAX程序必须从了解XMLHttpRequest 对象开始。
了解XMLHttpRequest 对象就先从创建XMLHttpRequest 对象开始,在不同的浏览器中创建XMLHttpRequest 对象使用不同的方法:
先看看IE创建XMLHttpRequest 对象的方法(方法1):
var xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); //使用较新版本的 IE 创建 IE 兼容的对象(Msxml2.XMLHTTP)
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //使用较老版本的 IE 创建 IE 兼容的对象(Microsoft.XMLHTTP)
而 Mozilla、Opera、Safari 和大部分非IE的浏览器都使用下面这种方法(方法2)创建XMLHttpRequest 对象:
var xmlhttp = new XMLHttpRequest();
实际上Internet Explorer 使用了一个名为 XMLHttp 的对象,而不是 XMLHttpRequest 对象,而 Mozilla、Opera、Safari 和 大部分非 Microsoft 浏览器都使用的是后者(下文统称 XMLHttpRequest 对象)。IE7开始也开始使用XMLHttpRequest 对象了。
在创建 XMLHttpRequest 对象的时候如果不同的浏览器使用了不正确的方法浏览器都将会报错,并且无法使用该对象。所以我们需要一种可以兼容不同浏览器的创建XMLHttpRequest 对象的方法:
创建兼容多浏览器的 XMLHttpRequest 对象方法
var xmlhttp = false; //创建一个新变量 request 并赋值 false。使用 false 作为判断条件,它表示还没有创建 XMLHttpRequest 对象。
function CreateXMLHttp(){
try{
xmlhttp = new XMLHttpRequest(); //尝试创建 XMLHttpRequest 对象,除 IE 外的浏览器都支持这个方法。
}
catch (e){
try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); //使用较新版本的 IE 创建 IE 兼容的对象(Msxml2.XMLHTTP)
}
catch (e){
try{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //使用较老版本的 IE 创建 IE 兼容的对象(Microsoft.XMLHTTP)。
}
catch (failed){
xmlhttp = false; //如果失败则保证 request 的值仍然为 false。
}
}
}
return xmlhttp;
}
判断是否创建成功就很简单了
if (!xmlhttp){
//创建XMLHttpRequest 对象失败!
}
else{
//创建成功!
}
=========================================================
创建好了XMLHttpRequest 对象我们再来看看这个对象的方法、属性以及最重要的onreadystatechange事件句柄吧。
方法:
open() 说明:初始化 HTTP 请求参数,例如 URL 和 HTTP 方法,但是并不发送请求。
abort() 说明:取消当前响应,关闭连接并且结束任何未决的网络活动。
getAllResponseHeaders() 说明:把 HTTP 响应头部作为未解析的字符串返回。
getResponseHeader() 说明:返回指定的 HTTP 响应头部的值。
send() 说明:发送 HTTP 请求,使用传递给 open() 方法的参数,以及传递给该方法的可选请求体。
setRequestHeader() 说明:向一个打开但未发送的请求设置或添加一个 HTTP 请求。
属性:
readyState 说明:HTTP 请求的状态。
responseText 说明:目前为止为服务器接收到的响应体(不包括头部),或者如果还没有接收到数据的话,就是空字符串。
responseXML 说明:对请求的响应,解析为 XML 并作为 Document 对象返回。
status 说明:由服务器返回的 HTTP 状态代码。
statusText 说明:这个属性用名称而不是数字指定了请求的 HTTP 的状态代码。
onreadystatechange 是每次 readyState 属性改变的时候调用的事件句柄函数。
下面从发送请求并处理