JS实现AJAX请求_1(基础篇)
AJAX:全称“Asynchronous JavaScript and XML” (异步的JavaScript与XML)
AJAX请求的特点:
1,不刷新页面
2,服务器仅返回需要的数据
AJAX引擎:XMLHttpRequest
此对象是浏览器中的内置对象,在目前的所有浏览器中都支持此对象。
IE中获取此对象:
if(window.ActiveXObject){
var xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
非IE中获取此对象:
var xmlHttp=new XMLHttpRequest();
兼容模式:
var xmlHttp;//声明一个对象
function createXMLHttpRequest(){
if(window.ActiveXObject){//如果是IE,采用这种方式获取
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}else{//非IE采用这种方式获取
xmlHttp=new XMLHttpRequest();
}
}
请求的格式:
xmlHttp.open(请求方式,请求地址,[是否为异步请求]);
xmlHttp.send();
Get请求:
xmlHttp.open("GET","ajax.do?name=tom",true);
xmlHttp.send();
注:
get请求的传值方式为请求地址后面跟 ?key=value
Post请求:
xmlHttp.open("POST","ajax.do",true);
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttp.send("name=tom");
注:
post请求的传值方式是在send()方法中进行传值,多个值用逗号隔开:name=tom,age=12
setRequestHeader的意思是设置请求头的类型为表单类型:Content-Type="application/x-www-form- urlencoded" 是form表单的默认属性
一个完整的AJAX请求的流程:
1,创建XMLHttpRequest对象
2,调用xmlHttp.open()设置请求内容
3,设置回调函数(根据服务器返回的状态信息,做什么事情)
4,调用xmlHttp.send()发送请求
function sendAjax(){
createXMLHttpRequest();//调用上面设置的兼容模式
xmlHttp.open("GET","ajax.do?name=tom",true);
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttp.onreadystatechange=callback;//状态信息发生改变调用函数
xmlHttp.send();
}
//回调函数
function callback(){
alert("callback");
}
sendAjax();//浏览器会弹出几次框(不同的浏览器可能不同)
获取AJAX请求的状态码和HTTP协议的状态码:
AJAX请求的状态码有四个值:
var xmlState=xmlHttp.readyState;
1,已初始化
2,数据传输中
3,响应数据传输中
4,响应完毕
HTTP协议的状态码有很多:
var httpState=xmlHttp.status;
常见的状态码如下:
状态码 | 意义 |
200 | 服务器正确处理了请求并响应 |
404 | 请求的页面未找到 |
403 | 没有权限访问请求的页面 |
405 | 页面不接收该请求方式 |
408 | 请求超时 |
500 | 服务器处理请求时发生异常 |
503 | 服务暂时不可用 |
304 | 网页未修改 |
使用Servlet获取服务器端的文本:
//ajax.do
//这是Servlet类中的doGet方法
public void doGet(HttpServletRequest request,HttpServletResponse response){
PrintWriter out=response.getWriter();
out.print("OK");
out.flush();
out.close();
}
//callback
function callback(){
if(xmlHttp.readyState==4){//响应完毕后
if(xmlHttp.status==200){//http状态码为200时
var result=xmlHttp.responseText;//获取ajax请求的文本内容
alert(result);
}
}
}
总结:
- Ajax请求使用 XMLHttpRequest 对象
- IE和非IE获取对象的方式不同
- GET,POST请求的传值问题
- Ajax请求的流程
- Ajax请求的状态码和HTTP协议中服务器返回的状态码
- 获取简单地服务器返回的文本信息