AJAX的使用

来源：互联网发布：python的idle怎么运行编辑：程序博客网时间：2024/06/06 06:43

JSP页面：

<html><head><script type="text/javascript">//创建ajax引擎function getXmlHttpObject(){//不同的浏览器获取对象xmlhttprequest对象方法不一样var xmlHttpRequest;xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");return xmlHttpRequest;}var myXmlHttpRequest="";//验证用户名是否存在function checkName(){myXmlHttpRequest=getXmlHttpObject();if(myXmlHttpRequest!=null){//window.alert("创建ajax引擎成功");//通过myXmlHttpRequest对象发送请求到服务起的某个页面//第一个参数表示请求的方式 "get"/"post"//第二个参数指定URL,对哪个页面发出ajax请求（本质仍然是http请求）//第三个参数表示，true表示使用异步机制,如果是false表示不适用异步var url="registerProcess";var date="username1="+abc("username").value;//window.alert("url为："+url+"q");//打开请求myXmlHttpRequest.open("post",url,true);//还有一句话，这句话必须的myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//指定回调函数myXmlHttpRequest.onreadystatechange=chuli;//真的发送请求,如果是get请求则填入null即可//如果是post请求，则填入实际的数据myXmlHttpRequest.send(date);}else{window.alert("创建ajax引擎失败")}}//回调函数function chuli(){//window.alert("处理函数被调回"+myXmlHttpRequest.readyState);//我要取出从registerPro页面返回的数据if(myXmlHttpRequest.readyState==4){//取出值，根据返回信息的格式定//window.alert("服务器返回"+myXmlHttpRequest.responseText);//document.getElementById("myres").value=myXmlHttpRequest.responseText;//获得mes节点var mes=myXmlHttpRequest.responseXML.getElementsByTagName("mes");//window.alert(mes.length);//取出mes节点值//mes[0]->表示取出第一个mes几点//mes[0].childNodes[0]->表示第一个mes节点的第一个子节点var mes_val=mes[0].childNodes[0].nodeValue;//window.alert(mes_val);document.getElementById("myres").value=mes_val;}}//这里我们写一个函数function abc(id){return document.getElementById(id);}</script></head><body><form action="registerProcess">用户名：<input type="text" name="username1" id="username"><input onclick="checkName();" type="button" value="验证用户"><input type="text" style="border-width: 0;color: red;" id="myres"><br>密码：<input type="password"><br><input type="submit"><input type="reset"></form><form>用户名：<input type="text" name="username2"><input type="button" value="验证用户"><br>密码：<input type="password"><br><input type="submit"><input type="reset"></form></body></html>

showCity.html：

<!DOCTYPE html><html>  <head>    <title>showCity.html</title>    <script type="text/javascript">    //创建ajax引擎function getXmlHttpObject(){//不同的浏览器获取对象xmlhttprequest对象方法不一样var xmlHttpRequest;xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");return xmlHttpRequest;}        var myXmlHttpRequest;        function getCities(){    myXmlHttpRequest=getXmlHttpObject();    if(myXmlHttpRequest!=null){    var data="province="+document.getElementById("sheng").value;    var url="showCityCl";            //window.alert(url);    myXmlHttpRequest.open("post",url,true);//还有一句话，这句话必须的myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//指定回调函数myXmlHttpRequest.onreadystatechange=chuli;//真的发送请求,如果是get请求则填入null即可//如果是post请求，则填入实际的数据myXmlHttpRequest.send(data);    }    }            function chuli(){    if(myXmlHttpRequest.readyState==4){    if(myXmlHttpRequest.status==200){    var citys=myXmlHttpRequest.responseXML.getElementsByTagName("city");    //window.alert("第一个城市是："+citys[0].childNodes[0].nodeValue);    //window.alert("第一个城市是："+citys[1].childNodes[0].nodeValue);    //window.alert("第一个城市是："+citys[2].childNodes[0].nodeValue);            document.getElementById("city").options.length=0;     document.getElementById("city").add(new Option(citys[0].childNodes[0].nodeValue,citys[0].childNodes[0].nodeValue),null);document.getElementById("city").add(new Option(citys[1].childNodes[0].nodeValue,citys[1].childNodes[0].nodeValue),null);    document.getElementById("city").add(new Option(citys[2].childNodes[0].nodeValue,citys[2].childNodes[0].nodeValue),null);    }    }    }    </script>  </head>    <body>  <form action="showCityCl">    <select onchange="getCities();" id="sheng">    <option>---省---</option>    <option value="zhejiang">浙江</option>    <option value="jiangsu">江苏</option>    </select>    <select id="city">    <option>--城市--</option>    </select>    <select>    <option>--县城--</option>    <option></option>    <option></option>    </select>    <input type="submit">    </form>  </body></html>

registerProcess.java：

package com.test;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 registerProcess extends HttpServlet {public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {response.setContentType("text/xml;charset=UTF-8");//response.setContentType("text/html;charset=UTF-8");response.setHeader("Cache-Control", "no-cache");PrintWriter out = response.getWriter();String username=request.getParameter("username1");//System.out.println(username);if(username.equals("z")){out.write("<res><mes>用户名不可用</mes></res>");}else{out.write("<res><mes>用户名可用</mes></res>");}}public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doGet(request, response);}}

showCityCl.java

package com.test;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 showCityCl extends HttpServlet {public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {response.setContentType("text/xml;charset=UTF-8");response.setHeader("Cache-Control", "no-cache");PrintWriter out = response.getWriter();String city=request.getParameter("province");//System.out.println(city);if(city.equals("jiangsu")){//System.out.println("输出城市");out.write("<province><city>杭州</city><city>温州</city><city>凌波</city></province>");}if(city.equals("zhejiang")){//System.out.println("输出城市");out.write("<province><city>南京</city><city>徐州</city><city>苏州</city></province>");}}public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doGet(request, response);}}

w3c文档上创建XMLHttpRequest对象的方法为：
var xmlhttp;if (window.XMLHttpRequest)  {// code for IE7+, Firefox, Chrome, Opera, Safari  xmlhttp=new XMLHttpRequest();  }else  {// code for IE6, IE5  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");  }

阅读全文

0 0