学习小结之 Ajax 2

学习总结之 Ajax 2
如何获得一个XmlHttpRequest对象?

function getXmlHttpRequest(){ var xhr=null; if(window.XMLHttpRequest){ //非ie xhr=new XMLHttpRequest(); }else{     //从这里也可以看出微软的嚣张跋扈 xhr=new ActiveXObject("Microsoft.XMLHTTP"); } return xhr;}

一个简单的Ajax用法示例:检查用户名唯一性

function checkUsername() {//创建checkname.do requestvar xhr=getXmlHttpRequest();var username=document.getElementById("username").value;var url="checkusername?username="+username;xhr.open("get",url,true);//true,为异步,可以在响应回来之前进行其它操作;默认为true //注册响应函数xhr.onreadystatechange=function(){//请求处理完毕后执行以下代码//xhr有5种状态,0到4,分别代表(0)请求未初始化,(1)请求已初始化但未发送,(2)请求已发送,(3)请求处理中,(4)请求处理完毕 if(xhr.readyState==4){//响应处理, 获取服务器返回的Textvar text=xhr.responseText;document.getElementById("name_msg").innerHTML=text; } } //发送请求 xhr.send(null);}

对应的html代码

<form method="post" action="checkusername">username:<input name="username" id="username" onblur="checkusername()" /><span id="name_msg" style="color:red"></span><br /><input type="submit" value="OK" /></form>

对应的servlet代码

import java.io.IOException;import java.io.PrintWriter;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;public class CheckUserNameServlet extends HttpServlet {public void service(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {response.setContentType("text/plain;charset=utf-8");//text/plain 很重要request.setCharacterEncoding("utf-8");PrintWriter out=response.getWriter();String username = request.getParameter("username");System.out.println(username);if ("tom".equals(username)) {//为方便起见,直接给了一个out.print("此用户名已被占用");} else {out.print("可以使用");}out.flush();out.close();}}

结果:
输入tom,提交:提示"此用户名已被占用"

这种使用Ajax的方法很繁琐,且容易出错,一一般都用jquery发送Ajax,但作为一个学习者,还是有必要了解这种原始的方法的.

查看更多 下一篇