一、XMLHttpRequest对象
它是一个具有应用程序接口的javascript对象,能够使用超文本传输协议(HTTP)连接一个服务器。
初始化:var http_request = new ActiveXObject("Msxml2.XMLHTTP");或者var http_request = new ActiveXObject(Microsoft.XMLHTTP");
var http_request = new XMLHttpRequest();
1、XMLHTTPRequest对象的常用方法
① open( method , URL , asyncFlag )
method:get或者post
URL:请求地址,可以是绝对地址或者相对地址,并且可以查询字符串
asyncFlag:可选参数,用于指定请求参数,异步请求为true,同步请求为false,默认为true
② sen( content )
content:用于指定发送的数据,可以使DOM对象的实例、输入流或者字符串,也可以是什么都不填
③ setRequestHeader( label , value )
label:用于指定HTTP头
value:用于为指定的HTTP头设置值
④ abort()
用于停止当前异步请求
⑤ getRequestHeader( headerLabel )
headerLabel:用于指定HTTP头,包括server、Content-Type和Date等
⑥ getResponseHeaders()
用于以字符串形式返回完整的HTTP头信息。
2、XMLHttpRequest对象的常用属性
属性 | 描述 |
onreadystatechange |
每个状态改变时都会触发这个事件处理器,通常会调用一个JavaScript函数 |
readyState |
请求的状态。有以下5个取值: 0=未初始化 1=正在加载 2=已加载 3=交互中 4=完成 |
responseText |
服务器的响应,表示为字符串 |
responseXML |
服务器的响应,表示为XML。这个对象可以解析为一个DOM对象 |
status |
返回服务器的HTTP状态码,如: 200=“成功” 202=”请求被接受,但尚未成功“ 400=“错误的请求” 404=“文件未找到” 500=“内部服务器错误” |
statusText | 返回HTTP状态码对应的文本,如OK或者Not Found(未找到)等 |
二、传统Ajax工作流程
1、发送请求
①初始化XMLHttpRequest对象
if(window.XMLHttpRequest){ xmlhttp = new XMLHttpRequest(); }else if(window.ActiveXObject){ xmlhttp = new ActiveXObject(Microsoft.XMLHTTP); }
②为XMLHTTPRequest对象指定一个回调函数,用于对返回结果进行处理
xmlhttp.onreadystatechange = function(){getResult(param)};//调用回调函数
③创建个与服务器的连接
xmlhttp.open("GET",url,true) xmlhttp.open("POST",url,true) //url可以是一个JSP页面的URL地址,也可以是Servlet的映射地址
④向服务器发送请求
//向服务器发送GET请求 xmlhttp.send();
//向服务器发送POST请求 //无参数: xmlhttp.send(); //有参数: var param = "user="+form1.user.value+"&pwd="+form1.pwd.value;//组合参数 xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//在发送POST请求前,需要设置正确的请求头 xmlhttp.send(param);
2、处理服务器响应
①处理字符串响应
function getResult(){ if(xmlhttp.readyState==4&&xmlhttp.status==200){ document.getElementById("myDiv").innerhtml=xmlhttp.responseText; } }
②处理XML响应
function getResult(){ if(xmlhttp.readyState==4&&xmlhttp.status==200){ var xmlDoc = xmlhttp.responseXML; var message = ""; for(i=0;i<xmlhttp.getElementsByTagName("board").length;i++){ var board = xmlDoc.getElementsByTagName("board").item(i); message = message+board.getAttribute("name"); document.getElementsById("msg").innerHTML=message; } } }