AJAX学习（2）实战
来源：互联网 发布：心动网络面试题 编辑：程序博客网 时间：2024/06/05 17:08
AJAX开发框架：
- AJAX实质上也是遵循Request/Server模式，所以这个框架基本的流程是：
- 对象初始化
- 发送请求
- 服务器接收
- 服务器返回
- 客户端接收
- 修改客户端页面内容。
- 只不过这个过程是异步的。
A 、初始化XMLHttpRequest对象
function ajaxFunction(){ var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp = new XMLHttpRequest(); } catch (e) { try {// Internet Explorer xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { } } } return xmlHttp;}B、 指定响应处理函数
- 指定当服务器返回信息时客户端的处理方式。只要将相应的处理函数名称赋给XMLHttpRequest对象的onreadystatechange属性就可以了.比如： XMLHttpReq.onreadystatechange = processResponse;
- 注意:这个函数名称不加括号，不指定参数。也可以用Javascript函数直接量方式定义响应函数。
- 比如：XMLHttpReq.onreadystatechange = function() { };
- // 处理返回信息的函数
function processResponse() {
}
C、发出HTTP请求
- 向服务器发出HTTP请求了。这一步调用XMLHttpRequest对象的open和send方法。
- http_request.open('GET', 'http://www.example.org/some.file', true);
- http_request.send(null)
- 按照顺序，open调用完毕之后要调用send方法。send的参数如果是以Post方式发出的话，可以是任何想传给服务器的内容。
- 注意:如果要传文件或者Post内容给服务器，必须先调用setRequestHeader方法，修改MIME类别。如下：
- http_request.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”); 这时资料则以查询字符串的形式列出，作为send的参数，例如：name=value&anothername=othervalue&so=on
D、处理服务器返回的信息
处理响应处理函数都应该做什么。
首先，它要检查XMLHttpRequest对象的readyState值，判断请求目前的状态。参照前文的属性表可以知道，readyState值为4的时候，代表服务器已经传回所有的信息，可以开始处理信息并更新页面内容了。如下：
if (http_request.readyState == 4) {
// 信息已经返回，可以开始处理
} else {
// 信息还没有返回，等待
}
服务器返回信息后，还需要判断返回的HTTP状态码，确定返回的页面没有错误。所有的状态码都可以在W3C的官方网站上查到。其中，200代表页面正常。
if (http_request.status == 200) {
// 页面正常，可以开始处理信息
} else {
// 页面有问题
}
首先，它要检查XMLHttpRequest对象的readyState值，判断请求目前的状态。参照前文的属性表可以知道，readyState值为4的时候，代表服务器已经传回所有的信息，可以开始处理信息并更新页面内容了。如下：
if (http_request.readyState == 4) {
// 信息已经返回，可以开始处理
} else {
// 信息还没有返回，等待
}
服务器返回信息后，还需要判断返回的HTTP状态码，确定返回的页面没有错误。所有的状态码都可以在W3C的官方网站上查到。其中，200代表页面正常。
if (http_request.status == 200) {
// 页面正常，可以开始处理信息
} else {
// 页面有问题
}
- XMLHttpRequest对成功返回的信息有两种处理方式：
- responseText：将传回的信息当字符串使用；
- responseXML：将传回的信息当XML文档使用，可以用DOM处理。
实战：
使用ajax模拟网页中的加载页面：
testload.jsp
<%@ page language="java" pageEncoding="utf-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <script type="text/javascript" src="./load.js"></script> </head> <body> <form action="" enctype="application/x-www-form-urlencoded"> <div id="divcheck"></div> <input type="button" name="ok" id="ok" value="测试加载"> </form> </body></html>
load.js
//创建一个XMLHttpRequest对象 ,利用此对象域服务器进行通信 是AJAX技术的核心function ajaxFunction(){ var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp = new XMLHttpRequest(); } catch (e) { try {// Internet Explorer xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { } } } return xmlHttp;}window.onload = function(){document.getElementById("ok").onclick = function(){//获取div对象var divcheck = document.getElementById("divcheck");//1.创建ajax引擎var xmlHttp = ajaxFunction();//2.事件处理函数（监听器）xmlHttp.onreadystatechange = function(){if(xmlHttp.readyState==1){divcheck.innerHTML = "<img src='./loading1.gif' width='200',height='200'/>正在与服务器取得连接";alert("xxxxx");}else if(xmlHttp.readyState==2){divcheck.innerHTML = "<img src='./loading3.gif' width='200',height='200'/>正在发送请求";alert("xxxxx");}else if(xmlHttp.readyState==3){divcheck.innerHTML = "<img src='./loading33.gif' width='200',height='200'/>正在处理数据";alert("xxxxx");}else if(xmlHttp.readyState==4){if(xmlHttp.status == 200 || xmlHttp.status == 304){var data = xmlHttp.responseText;divcheck.innerHTML = data;}}else{divcheck.innerHTML = "网络比较繁忙，请稍后再试";}}//3.打开一个链接xmlHttp.open("POST","../loadServlet",true);xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//4.发送请求数据xmlHttp.send(null);}}LoadServlet.javapackage cn.itcast.servlet;import java.io.IOException;import java.io.PrintWriter;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;@WebServlet("/loadServlet")public class LoadServlet extends HttpServlet {public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {request.setCharacterEncoding("UTF-8");response.setContentType("text/html;charset=utf-8");PrintWriter out = response.getWriter();System.out.println("访问土豆服务器成功");out.println("放映电影《天下乌贼》");out.flush();out.close();}}运行效果：
使用ajax，在注册页面进行用户名校验
GET方式：
registerGet.jsp
<%@ page language="java" pageEncoding="utf-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>校验用户名是否存在</title><script type="text/javascript" src="./registerGet.js"> </script></head><body><center><form action="" enctype="application/x-www-form-urlencoded"><h3>请填写用户注册信息</h3><table border="1"><tr><td>用户名:</td><td><input type="text" name="username" value="" id="username"> <div id="divcheck"></div> <input type="button" name="checkusername" value="查看用户名" id="checkusername"></td></tr><tr><td>密码:</td><td><input type="password" name="psw" value=""></td></tr><tr><td>确认密码:</td><td><input type="password" name="confpsw" value=""></td></tr><tr><td>出生日期:</td><td><input type="text" name="birthday" value=""></td></tr></table> </form> </center></body></html>registerGet.js
//创建一个XMLHttpRequest对象 ,利用此对象域服务器进行通信 是AJAX技术的核心function ajaxFunction(){ var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp = new XMLHttpRequest(); } catch (e) { try {// Internet Explorer xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { } } } return xmlHttp;}window.onload = function(){document.getElementById("checkusername").onclick = function(){/**<input type="text" name="username" value="" id="username">*/var username = document.getElementById("username").value;//1、创建ajax引擎var xmlHttp = ajaxFunction();//2、事件处理函数xmlHttp.onreadystatechange = function(){if(xmlHttp.readyState == 4){if(xmlHttp.status == 200 || xmlHttp.status == 304){var data = xmlHttp.responseText;document.getElementById("divcheck").innerHTML = data;}}}//3、打开一个连接//第一种方案：//username = encodeURI(username,"UTF-8");/** * 第二种方案：使用UTF-8的编码，让传递的参数转换成二进制的形式* URLEncoder.encode(username,"UTF-8") 编码* URLDecoder.decode(username,"UTF-8") 解码*///这里要连续编码两次username = encodeURI(username,"UTF-8");username = encodeURI(username,"UTF-8");xmlHttp.open("GET","../registerServlet?username="+username,true);//4、发送数据xmlHttp.send(null);}}RegisterServlet.javapackage cn.itcast.servlet;import java.io.IOException;import java.io.PrintWriter;import java.net.URLDecoder;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;@WebServlet("/registerServlet")public class RegisterServlet extends HttpServlet {public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {request.setCharacterEncoding("UTF-8");response.setContentType("text/html;charset=utf-8");PrintWriter out = response.getWriter();System.out.println("正在进行校验");// 获取用户名String username = request.getParameter("username");// 第一种方案：// username = new String(username.getBytes("iso-8859-1"),"UTF-8");// 第二种方案：username = URLDecoder.decode(username, "UTF-8");// 正常操作数据库，查看当前用户名是否存在String message = "";if (username != null && "sa".equals(username)) {message = "<font color='red'>用户名【" + username + "】已存在</font>";} else {message = "<font color='green'>用户名【" + username+ "】不存在，可以使用该用户名</font>";}out.println(message);out.flush();out.close();}}运行效果：
POST方式：
register.jsp<%@ page language="java" pageEncoding="utf-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>校验用户名是否存在</title><script type="text/javascript" src="./register.js"> </script></head><body><center><form action="" enctype="application/x-www-form-urlencoded" method="post"><h3>请填写用户注册信息</h3><table border="1"><tr><td>用户名:</td><td><input type="text" name="username" value="" id="username"> <div id="divcheck"></div> <input type="button" name="checkusername" value="查看用户名" id="checkusername"></td></tr><tr><td>密码:</td><td><input type="password" name="psw" value=""></td></tr><tr><td>确认密码:</td><td><input type="password" name="confpsw" value=""></td></tr><tr><td>出生日期:</td><td><input type="text" name="birthday" value=""></td></tr></table> </form> </center></body></html>register.js
//创建一个XMLHttpRequest对象 ,利用此对象域服务器进行通信 是AJAX技术的核心function ajaxFunction(){ var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp = new XMLHttpRequest(); } catch (e) { try {// Internet Explorer xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { } } } return xmlHttp;}window.onload = function(){document.getElementById("checkusername").onclick = function(){var username = document.getElementById("username").value;//1.创建ajax引擎var xmlHttp = ajaxFunction();//2.事件处理函数xmlHttp.onreadystatechange = function(){if(xmlHttp.readyState == 4){if(xmlHttp.status == 200 || xmlHttp.status == 304){var data = xmlHttp.responseText;document.getElementById("divcheck").innerHTML = data;}}}//3、打开一个连接xmlHttp.open("POST","../registerServlet",true);xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//4、发送数据xmlHttp.send("username="+username);}}RegisterServlet.javapackage cn.itcast.servlet;import java.io.IOException;import java.io.PrintWriter;import java.net.URLDecoder;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;@WebServlet("/registerServlet")public class RegisterServlet extends HttpServlet {public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {request.setCharacterEncoding("UTF-8");response.setContentType("text/html;charset=utf-8");PrintWriter out = response.getWriter();System.out.println("正在进行校验");//获取用户名String username = request.getParameter("username");//正常操作数据库，查看当前用户名是否存在String message = "";if(username!=null && "sa".equals(username)){message = "<font color='red'>用户名【"+username+"】已存在</font>";}else{message = "<font color='green'>用户名【"+username+"】不存在，可以使用该用户名</font>";}out.println(message);out.flush();out.close();}}运行效果：
使用ajax传递xml数据，完成级联菜单：
cities.xml
<?xml version="1.0" encoding="GB2312"?><china><province name="吉林省"><city>长春</city><city>吉林市</city><city>四平</city><city>松原</city><city>通化</city></province><province name="辽宁省"><city>沈阳</city><city>大连</city><city>鞍山</city><city>抚顺</city><city>铁岭</city></province><province name="山东省"><city>济南</city><city>青岛</city><city>威海</city><city>烟台</city><city>潍坊</city></province></china>xmlFile.jsp
<%@ page language="java" pageEncoding="utf-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>级联菜单</title><script type="text/javascript" src="./xmFile.js"> </script></head><body> <select id="province" name="province"> <option value="">请选择....</option> </select> <select id="city" name="city"> <option value="">请选择.....</option> </select> </body></html>xmlFile.js
//创建一个XMLHttpRequest对象 ,利用此对象域服务器进行通信 是AJAX技术的核心function ajaxFunction(){ var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp = new XMLHttpRequest(); } catch (e) { try {// Internet Explorer xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { } } } return xmlHttp;}window.onload = function(){//1、创建ajax引擎var xmlHttp = ajaxFunction();//2、事件处理函数xmlHttp.onreadystatechange = function(){if(xmlHttp.readyState == 4){if(xmlHttp.status == 200 || xmlHttp.status == 304){var data = xmlHttp.responseXML;//alert(data);var xmlProvinces = data.getElementsByTagName("province");//alert(xmlProvinces.length);for(var i=0;i<xmlProvinces.length;i++){var xmlProvince = xmlProvinces[i];var xmlProvinceValue = xmlProvince.getAttribute("name");//alert(xmlProvinceValue);/** * <select id="province" name="province"> <option value="">请选择....</option> </select> */var option = document.createElement("option");option.setAttribute("value",xmlProvinceValue);var optionText = document.createTextNode(xmlProvinceValue);option.appendChild(optionText);document.getElementById("province").appendChild(option);}document.getElementById("province").onchange = function(){//情况city的下拉菜单，请选择需要留下var city = document.getElementById("city");var cityOptions = city.getElementsByTagName("option");//i=1,表示第一个请选择要留下//第一种：从前往后删//var len = cityOptions.length//for(var i=1;i<len;i++){//city.removeChild(cityOptions[1]);//}//第二种：从后往前删//for(var i=cityOptions.length-1;i>0;i--){//city.removeChild(cityOptions[i]);//}//第三种：//while(cityOptions.length>1){// city.removeChild(cityOptions[1]);//}//第四种：//while (cityOptions.length > 1) {//var myoption=city.lastChild;//city.removeChild(myoption);//}//alert("初始："+city.length);//初始化，从新设置city的长度为1city.length=1;var provinceValue = this.value;//alert(xmlProvinces.length);var provinceObject = null;for(var i=0;i<xmlProvinces.length;i++){var xmlProvince = xmlProvinces[i];var xmlProvinceValue = xmlProvince.getAttribute("name");//alert(xmlProvinceValue);//判断当前下拉菜单选中的省的值与xml文件中遍历省的属性值进行对比，如果值匹配成功，就从当前省的节点获取对应的城市if(provinceValue == xmlProvinceValue){provinceObject = xmlProvince;break;}}if(provinceObject!=null){//遍历城市节点var xmlCities = provinceObject.getElementsByTagName("city");//alert(xmlCities.length);for(var i=0;i<xmlCities.length;i++){var xmlCity = xmlCities[i];//方法一：//var xmlCityValue = xmlCity.firstChild.nodeValue;//方法二：var xmlCityValue = xmlCity.text;//alert(xmlCityValue);/** * <select id="city" name="city"> <option value="">请选择.....</option> </select> *///创建option节点var option = document.createElement("option");option.setAttribute("value",xmlCityValue);var optionText = document.createTextNode(xmlCityValue);option.appendChild(optionText);city.appendChild(option);//alert(""+city.length);}}}}}}//3、打开连接xmlHttp.open("POST","../xmlFileServlet",true);xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//4、发送请求数据xmlHttp.send(null);}XmlFileServlet.javapackage cn.itcast.servlet;import java.io.IOException;import java.io.PrintWriter;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;@WebServlet("/xmlFileServlet")public class XmlFileServlet extends HttpServlet {public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {request.setCharacterEncoding("UTF-8");response.setContentType("text/xml;charset=utf-8");PrintWriter out = response.getWriter();out.println("<china>");out.println("<province name='吉林省'>");out.println("<city>长春</city>");out.println("<city>吉林市</city>");out.println("<city>四平</city>");out.println("<city>松原</city>");out.println("<city>通化</city>");out.println("</province>");out.println("<province name='辽宁省'>");out.println("<city>沈阳</city>");out.println("<city>大连</city>");out.println("<city>鞍山</city>");out.println("<city>抚顺</city>");out.println("<city>铁岭</city>");out.println("</province>");out.println("<province name='山东省'>");out.println("<city>济南</city>");out.println("<city>青岛</city>");out.println("<city>威海</city>");out.println("<city>烟台</city>");out.println("<city>潍坊</city>");out.println("</province>");out.println("</china>");out.flush();out.close();}}运行效果：
0 0
- AJAX学习（2）实战
- Ajax学习（2）
- Ajax技术实战操练课堂学习笔记
- ajax亲自实战（二）
- AJAX学习（2）jQuery中的Ajax
- ajax 实战
- ajax 实战
- Ajax实战
- Ajax实战项目2 验证用户的唯一性 环境（Ajax+Jquery+struts2）
- ajax学习笔记（2）
- AJAX 初步学习（2）
- JSF2.0实战 - 2、AJAX体验
- DOM—创建html元素(ajax实战学习)
- 机器学习实战（2）-决策树
- python学习日记-实战（2）
- Hadoop实战学习（2）-日志清洗
- ajax学习（2）（CSS基础）
- 学习记录（2 about Ajax）
- HTML----多媒体
- Google为何这样设计OnSharedPreferenceChangeListener
- 创建扩展
- javaScript常用
- mac上创建cocos-2d项目
- AJAX学习（2）实战
- leetcode：Search Insert Position 【Java 】
- HRBUST 1564 螺旋矩阵 DFS
- spring mvc的DefaultServlet的作用
- 常用集合的底层数据结构和实现-Map
- 关于有偿提供拼图响应式后台的通知
- 进程
- 程序员之禅10条法则
- 几何基本函数----Point
