JavaScript---ajax
一、基本概念
ajax: Asynchronous Javascript And Xml 用于在不重新加载整个页面的情况下,刷新部分页面
XMLHttpRequest
XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问,包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。
XMLHttpRequest 可以同步或异步地返回 Web 服务器的响应,并且能够以文本或者一个 DOM 文档的形式返回内容。
二、ajax操作常用步骤:
1、创建XMLHttpRequest对象
<code class="language-java" style="font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace;">function createXMLHttpRequest(){
//兼容更多的IE浏览器
var ieTypes =["Microsoft.XMLHttp","Msxml2.XMLHTTP","Msxml2.XMLHTTP.3.0","Msxml2.XMLHTTP.4.0","Msxml2.XMLHTTP.5.0","Msxml2.XMLHTTP.6.0"];
var xmlhttp;
//所有现代浏览器(IE7+、Firefox、Chrome、Safari 以及 Opera)均内建 XMLHttpRequest 对象。
if(window.XMLHttpRequest){
xmlhttp =newXMLHttpRequest();
}else if(window.ActiveXObject){
for(var i =0; i < ieTypes.length; i++){
try{
xmlhttp =newActiveXObject(ieTypes[i]);
break;
}catch(ex){
}
}
}
return xmlhttp;
} 2、创建响应XMLHttpRequest对象状态变化的函数
<code class="language-java" style="font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace;">XMLHttpRequest对象状态:readyState //HTTP请求状态
0:请求未初始化
1:服务器连接已建立
2:请求已接收
3:请求处理中
4:请求已完成,且响应已就绪
XMLHttpRequest.onreadystatechange=function(){} //状态变化,调用函数,事件句柄,当XMLHttpRequest对象的状态发生变化时,会触发此函数
status 服务器返回的HTTP请求响应值(本地测试时,该返回值为0)
200请求成功
202请求被接收,但处理未完成
400错误的请求
404资源未找到
500服务器内部错误 3、创建HTTP请求
open(method,url)创建请求;为避免浏览器缓存,可以在url后添加"?"+newDate().getTime()
open(method,url,asynchronous,user,password)
method:Post/GET
url:相对或绝对地址
asynchronous:是否是异步请求,默认true
user:
password: 4、发送HTTP请求
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); // POST提交,发送之前需要设置HTTP header 设置请求头
send()发送请求
send(body)//无数据发送时,执行send(null), 内容 var body="name=abc&age=12"
post请求避免中文乱码:
发送时进行两次编码 encodeURI(encodeURI(queryString)),
(tomcat解一次,程序再解一次java.net.URLDecoder(string,"UTF-8")) 5、判断异步调用是否成功
<code class="language-java" style="font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace;">xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4){
if(xmlhttp.status==200||xmlhttp.status==0){//本机调用异步,status为0
//do something
}
}
} 6、获取返回的数据
responseText:到目前为止,服务器接收到的响应体 XMLHttpRequest处理时按照UTF-8处理 返回字符串形式的响应 responseXML:对请求的响应 如果来自服务器的响应是 XML,而且需要作为 XML 对象进行解析,请使用 responseXML 属性