使用XmlHttpRequest对象发送请求
js中定义了一个可以发送异步请求的对象XMLHttpRequest。我们在网页中使用这个对象发送请求。我们来学习一下XmlHttpRequest对象。
1创建XMLHttpRequest对象
由于这个对象并不是标准，但是基本所有浏览器都支持，所以针对不同的浏览器我们需要创建其对应的对象。
1）w3c标准浏览器，火狐、谷歌等
var xhr = new XMLHttpRequest();
2）ie6创建方式
var xhr = new ActiveXObject(“Msxml2.XMLHTTP”);
3）ie5.5创建方式
var xhr = new ActiveXObject(“Microsoft.XMLHTTP”);
所以为了兼容所有浏览器，我们可以创建一个公共的获取此对象的方法
//获取XMLHttpRequest的通用方法
function getXMLHttpRequest(){
var xhr;
try{
//大部分浏览器都支持
xhr = new XMLHttpRequest();
}catch(e){
try{
//如果不支持，在这里捕获异常并且采用IE6支持的方式
xhr = new ActiveXObject(“Msxml2.XMLHTTP”);
}catch(e){
//如果还不支持，在这里捕获异常并采用IE5支持的方式
xhr = new ActiveXObject(“Microsoft.XMLHTTP”);
}
}
return xhr;
}
2使用XMLHttpRequest
- open(method,url,async)
open()用于设置请求的基本信息，接收三个参数。
- method
请求的方法：get或post
接收一个字符串
- url
请求的地址，接收一个字符串
- Assync
发送的请求是否为异步请求，接收一个布尔值。
true 是异步请求
false 不是异步请求（同步请求）
- send(string)
send()用于将请求发送给服务器，可以接收一个参数
string参数
该参数只在发送post请求时需要。
string参数用于设置请求体
请求体参数使用键值对的形式，多个参数用&分割
如：“username=lll&password=lll”
- setRequestHeader(header,value)
用于设置请求头
header参数
字符串类型，要设置的请求头的名字
value参数
字符串类型，要设置的请求头的值
post请求的时侯需要设置
xhr.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);
3 XMLHttpRequest对象的属性：
1）readyState
描述XMLHttpRequest的状态
一共有五种状态分别对应了五个数字：
0 ：请求尚未初始化，open()尚未被调用
1 ：服务器连接已建立，send()尚未被调用
2 ：请求已接收，服务器尚未响应
3 ：请求已处理，正在接收服务器发送的响应
4 ：请求已处理完毕，且响应已就绪。
2）status
请求的响应码
200 响应成功
404 页面为找到
500 服务器内部错误
… … … …
3）onreadystatechange
该属性需要指向一个函数
该函数会在readyState属性发生改变时被调用
4）responseText
获得字符串形式的响应数据。
5）responseXML（用的比较少）
获得 XML 形式的响应数据。
4使用js发送ajax请求示例
1）发送get请求：
|
//获取xhr对象 var xhr = getXMLHttpRequest(); //设置请求信息 xhr.open(“get”,”AjaxServlet?&t=”+Math.random(),true); //发送请求 xhr.send(); //监听请求状态 xhr.onreadystatechange = function(){ //当响应完成 if(xhr.readyState == 4){ //且状态码为200时 if(xhr.status == 200){ //接收响应信息（文本形式） var text = xhr.responseText; //弹出消息 alert(text); } }; };
|
2）发送post请求
|
//获取xhr对象 var xhr = getXMLHttpRequest(); //设置请求信息 xhr.open(“post”,”2.jsp”,true); //设置请求头 xhr.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”); //发送请求 xhr.send(“hello=123456”); //监听请求状态 xhr.onreadystatechange = function(){ //当响应完成 if(xhr.readyState == 4){ //且状态码为200时 if(xhr.status == 200){ //接收响应信息（文本形式） var text = xhr.responseText; //弹出消息 alert(text); } };
|
上一篇: Java培训课程之Listener分类应用
下一篇: 对于参加了大数据培训的你是否后悔了呢
