js ajax简单使用
文章部分资源来源:(http://blog.csdn.net/lzkkevin/article/details/6777474)以及(http://www.cnblogs.com/hwx0807/archive/2011/06/28/2092205.html)
用JavaScript实现的Ajax，在性能上要比使用Jquery的ajax方法快一些。javascript主要是利用XMLHttpRequest对象发送异步请求。
使用XMLHttpRequest对象发送请求分为4步完成:
(1).创建XMLHttpRequest对象
(2).设置回调函数
(3).用XMLHttpRequest对象的open方法建立通信连接
(4).发送请求
1.创建xmlhttprequest对象
<script type="text/javascript"> //定义XMLHttpRequest对象 if(window.XMLHttpRequest){ //兼容Mozilla、Safari等非IE浏览器 var xmlhttprequest = new XMLHttpRequest(); }else{ if(window.ActiveXObject){ //兼容IE浏览器 try{ var xmlhttprequest = new ActiveXObject('Msxml12.XMLHTTP'); }catch(e){ try{ xmlhttprequest = new ActiveXObject('Microsoft.XMLHTTP'); }catch(e){ } } } } </script>
2.设置回调函数
xmlhttprequest.onreadystatechange = callback ; function callback(){ if(xmlhttprequest.readyState == 4 && xmlhttprequest.status == 200){ var result = xmlhttprequest.responseText; if(result == "true"){ alert("success"); }else{ alert("fail"); } } }
3.建立通信连接，可以有get和post两种方式
xmlhttprequest.open("POST","setServer.do?serverSel="+serverSel);
//xmlhttprequest.open("GET","setServer.do?serverSel="+serverSel);
4.发送请求
xmlhttprequest.send(null);
完整代码以及解析:
POST方式:
function changeServer(){ document.getElementById("serverCheck").checked = false ; var serverSel = document.getElementById("serverSel").value; // 设置回调函数，用来判断代码执行是否正确，以及执行结束后的操作 xmlhttprequest.onreadystatechange = callback ; //调用XMLHttpRequest对象的open方法，打开与服务器之间的同步通信连接 //xmlhttprequest.open(Method,Url,Async,User,Password)方法 //Method:表示Http方法，POST,GET,PUT,PROPFIND //Url:参数请求的url //Async:可选项，设置是否为异步通信， 默认true表示可以异步， //取false,表明异步发出请求之后不需要等待服务端的响应，继续执行其他操作。 //User,password:可选项，表示请求的文件需要进行服务器进行验证 xmlhttprequest.open("POST","setServer.do?serverSel="+serverSel);
// 设置请求的消息头 //application/x-www-form-urlencoded表示传递的是表单值 // 一般使用POST都必须设置此项，否则服务器无法识别传递过来的数据 //虽然该值表示表单值，但是也可以一text/xml或者application/xml类型给服务器直接发送XML数据 //甚至也可以application/json类型发送JavaScript对象数据 xmlhttprequest.setRequestHeader('Content-type','application/x-www-form-urlencoded'); // 设置User-Agent为XMLHTTP便于服务器能够识别出XMLHttpRequest异步请求 //和其他客户端的普通请求 xmlhttprequest.setRequestHeader('User-Agent','XMLHTTP');
//向服务器发送请求 xmlhttprequest.send(null); }
function callback(){ //接收响应数据 //xmlhttprequest.readyState返回当前请求的状态，如果为4则交互完成 //xmlhttprequest.status返回服务器的响应状态。200表示ok 一切正常 if(xmlhttprequest.readyState == 4 && xmlhttprequest.status == 200){ // xmlhttprequest.responseText是在action中返回的内容，可以根据内容判断后台执行结果 var result = xmlhttprequest.responseText; if(result == "true"){ alert("success"); }else{ alert("fail"); } } }
PrintWriter out = null; try { out = response.getWriter(); if (flag) { out.print("true"); }else { out.print("false"); } out.close(); } catch (IOException e) { e.printStackTrace(); }
//xmlhttprequest.responseText得到的内容正是PrintWriter输出的内容
另附:XMLHttpRequest.readyState的五种状态
readyState 返回当前请求的状态，只读.
-
(0)实例化
此阶段确认XMLHttpRequest对象是否创建，并为调用open()方法作好准备。值为0表示对象已经实例化，否则浏览器会报错－－对象不存在。
(1)载入
此阶段对XMLHttpRequest对象进行初始化，即调用open()方法，根据参数(method,url,true)完成对象状态的设置。并调用send()方法开始向服务端发送请求。值为1表示正在向服务端发送请求。
(2)载入完成
此阶段接收服务器端的响应数据。但获得的还只是服务端响应的原始数据，并不能直接在客户端使用。值为2表示已经接收完全部响应数据。并为下一阶段对数据解析作好准备。
(3)交互
此阶段解析接收到的服务器端响应数据。即根据服务器端响应头部返回的MIME类型把数据转换成能通过responseBody、responseText或responseXML属性存取的格式，为在客户端调用作好准备。状态3表示正在解析数据。
(4)完成
此阶段确认全部数据都已经解析为客户端可用的格式，解析已经完成。值为4表示数据解析完毕，可以通过XMLHttpRequest对象的相应属性取得数据。
概而括之，整个XMLHttpRequest对象的生命周期应该包含如下阶段：
创建－初始化请求－发送请求－接收数据－解析数据－完成
在具体应用中，明确了readyState的五个状态（XMLHttpRequest对象的生命周期各个阶段）的含义。
GET方式:(比POST方式少设置两个内容，一般post的时候需要加上如下设置)
// 设置请求的消息头 //application/x-www-form-urlencoded表示传递的是表单值 // 一般使用POST都必须设置此项，否则服务器无法识别传递过来的数据 //虽然该值表示表单值，但是也可以一text/xml或者application/xml类型给服务器直接发送XML数据 //甚至也可以application/json类型发送JavaScript对象数据 xmlhttprequest.setRequestHeader('Content-type','application/x-www-form-urlencoded'); // 设置User-Agent为XMLHTTP便于服务器能够识别出XMLHttpRequest异步请求 //和其他客户端的普通请求 xmlhttprequest.setRequestHeader('User-Agent','XMLHTTP');
