Ajax学习总结1
2011-06-07 08:03
323 查看
Ajax的英文全称即是:Asynchronous JavaScript And XML
使用一个检验用户名是否存在的例子来演示Ajax的实现
servlet
jsp
js
实现Ajax分5步:
1.创建XMLHttprequest对象
2.注册回调函数
3.设置连接信息
4.发送数据,与服务端进行交互
5.接收响应数据(写在回调函数中)
当Ajax使用XML来进行交互的实现
1.js部分,只需修改回调函数其中接收数据的部分
2.servlet部分的修改
使用jquery框架实现Ajax
js
使用jquery获取xml数据的交互
Ajax乱码问题
1.在传参数时,将传递参数进行2次encodeURI编码,这样不论浏览器本身是什么编码格式,都不会乱码
var url = "AJAXServer?name=" + encodeURI(encodeURI($("#userName").val()));
2.在servlet端进行参数的接收时,也进行次转码
String name = URLDecoder.decode(name,"UTF-8");
使用一个检验用户名是否存在的例子来演示Ajax的实现
servlet
package 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 logonServlet extends HttpServlet { @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { // TODO Auto-generated method stub this.doPost(req, resp); } @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { // TODO Auto-generated method stub resp.setContentType("text/html;charset=GB2312"); PrintWriter out = resp.getWriter(); String name = req.getParameter("name"); if("hany".equals(name)){ out.print("该用户名已存在"); }else{ out.print("该用户名可以进行注册"); } } }
jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> <script type="text/javascript" src="check1.js"></script> </head> <body> <!--基于标准的一些好习惯,首先标签名要小写,其次标签必须关闭,第三属性名必须是小写的,第四属性值必须位于双引号中--> name: <br/> <!--ajax方式下不需要使用表单来进行数据提交,因此不用写表单标签--> <!--ajax方式不需要name属性,需要一个id的属性--> <input type="text" id="name" /> <input type="button" value="校验" onclick="check()"/> <!--这个div用于存放服务器段返回的信息,开始为空--> <!--id属性定义是为了利用dom的方式找到某一个节点,进行操作--> <div id="result"></div> <!--<div id="result">123</div><div>456</div>--> <!--<span>123</span><span>456</span>--> <!--div和span的直观差异,div中的内容独占行,span中的内容和前后其他内容相处良好--> </body> </html>
js
实现Ajax分5步:
1.创建XMLHttprequest对象
2.注册回调函数
3.设置连接信息
4.发送数据,与服务端进行交互
5.接收响应数据(写在回调函数中)
//用户名校验的方法 //这个方法将使用XMLHTTPRequest对象来进行AJAX的异步数据交互 var xmlhttp; function check() { //使用dom的方式获取文本框中的值 //document.getElementById("name")是dom中获取元素节点的一种方法,一个元素节点对应HTML页面中的一个标签,如果<input> //value可以获取一个元素节点的value属性值 var userName = document.getElementById("name").value; //1.创建XMLHttpRequest对象 //这是XMLHttpReuquest对象无部使用中最复杂的一步 //需要针对IE和其他类型的浏览器建立这个对象的不同方式写不同的代码 if (window.XMLHttpRequest) { //针对FireFox,Mozillar,Opera,Safari,IE7,IE8 xmlhttp = new XMLHttpRequest(); //针对某些特定版本的mozillar浏览器的BUG进行修正 if (xmlhttp.overrideMimeType) { xmlhttp.overrideMimeType("text/xml"); } } else if (window.ActiveXObject) { //针对IE6,IE5.5,IE5 //两个可以用于创建XMLHTTPRequest对象的控件名称,保存在一个js的数组中 //排在前面的版本较新 var activexName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"]; for (var i = 0; i < activexName.length; i++) { try{ //取出一个控件名进行创建,如果创建成功就终止循环 //如果创建失败,回抛出异常,然后可以继续循环,继续尝试创建 xmlhttp = new ActiveXObject(activexName[i]); break; } catch(e){ } } } //确认XMLHTtpRequest对象创建成功 if (!xmlhttp) { alert("XMLHttpRequest create fail!!"); return; } //2.注册回调函数 //注册回调函数时,之需要函数名,不要加括号 //我们需要将函数名注册,如果加上括号,就会把函数的返回值注册上,这是错误的 xmlhttp.onreadystatechange = callback; //3.设置连接信息 //3.1 使用GET方式发送 //第一个参数表示http的请求方式,支持所有http的请求方式,主要使用get和post //第二个参数表示请求的url地址,get方式请求的参数也在url中 //第三个参数表示采用异步还是同步方式交互,true表示异步 xmlhttp.open("GET","logon?name="+ userName,true); //3.2 使用GET方式发送 //xmlhttp.open("POST","logon",true); //POST方式需要自己设置http的请求头 //xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //POST方式发送数据 //xmlhttp.send("name=" + name); //4.发送数据,开始和服务器端进行交互 //同步方式下,send这句话会在服务器段数据回来后才执行完 //异步方式下,send这句话会立即完成执行 xmlhttp.send(null); } //回调函数 function callback() { //5.接收响应数据 //判断对象的状态是交互完成 if (xmlhttp.readyState == 4) { //判断http的交互是否成功 if (xmlhttp.status == 200) { //获取服务漆器端返回的数据 //获取服务器段输出的纯文本数据 var responseText = xmlhttp.responseText; //将数据显示在页面上 //通过dom的方式找到div标签所对应的元素节点 var divNode = document.getElementById("result"); //设置元素节点中的html内容 divNode.innerHTML = responseText; } else { alert("出错了!!!"); } } }
当Ajax使用XML来进行交互的实现
1.js部分,只需修改回调函数其中接收数据的部分
//回调函数 function callback() { //alert(xmlhttp.readyState); //5。接收响应数据 //判断对象的状态是交互完成 if (xmlhttp.readyState == 4) { //判断http的交互是否成功 if (xmlhttp.status == 200) { //使用responseXML的方式来接收XML数据对象的DOM对象 var domObj = xmlhttp.responseXML; if (domObj) { //<message>123123123</message> //dom中利用getElementsByTagName可以根据标签名来获取元素节点,返回的是一个数组 var messageNodes = domObj.getElementsByTagName("message"); if (messageNodes.length > 0) { //获取message节点中的文本内容 //message标签中的文本在dom中是message标签所对应的元素节点的字节点,firstChild可以获取到当前节点的第一个子节点 //通过以下方式就可以获取到文本内容所对应的节点 var textNode = messageNodes[0].firstChild; //对于文本节点来说,可以通过nodeValue的方式返回文本节点的文本内容 var responseMessage = textNode.nodeValue; //将数据显示在页面上 //通过dom的方式找到div标签所对应的元素节点 var divNode = document.getElementById("result"); //设置元素节点中的html内容 divNode.innerHTML = responseMessage; } else { alert("XML数据格式错误,原始文本内容为:" + xmlhttp.responseText); } } else { alert("XML数据格式错误,原始文本内容为:" + xmlhttp.responseText); } } else { alert("出错了!!!"); } } }
2.servlet部分的修改
protected void doGet(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException { try{ //修改点1----响应的Content-Type必须是text/xml httpServletResponse.setContentType("text/xml;charset=utf-8"); PrintWriter out = httpServletResponse.getWriter(); //1.取参数 String old = httpServletRequest.getParameter("name"); //修改点2-----返回的数据需要拼装成xml格式 StringBuilder builder = new StringBuilder(); builder.append("<message>"); //2.检查参数是否有问题 if(old == null || old.length() == 0){ builder.append("用户名不能为空").append("</message>"); } else{ //3.校验操作 String name = old; if(name.equals("wangxingkui")){ //4。和传统应用不同之处。这一步需要将用户感兴趣的数据返回给页面段,而不是将一个新的页面发送给用户 //写法没有变化,本质发生了改变 builder.append("用户名[" + name + "]已经存在,请使用其他用户名").append("</message>"); } else{ builder.append("用户名[" + name + "]尚未存在,可以使用该用户名注册").append("</message>"); } out.println(builder.toString()); System.out.println(builder.toString()); } } catch(Exception e){ e.printStackTrace(); } }
使用jquery框架实现Ajax
js
//定义用户名校验的方法 function check(){ //1.获取文本框中的内容 //document.getElementById("name"); //Jquery的查找节点的方式,参数中#加上id属性值可以找到一个节点。 //jquery的方法返回的都是jquery的对象,可以继续在上面执行其他的jquery方法 var jqueryObj = $("#name"); //获取节点的值 var userName = jqueryObj.val(); //2.将文本框中的数据发送给服务器段的servelt //使用jquery的XMLHTTPrequest对象get请求的封装 $.get("logon?name=" + name,null,callback); } //回调函数 function callback(data) { // alert("服务器段的数据回来了!!"); //3.接收服务器端返回的数据 // alert(data); //4.将服务器段返回的数据动态的显示在页面上 //找到保存结果信息的节点 var resultObj = $("#result"); //动态的改变页面中div节点中的内容 resultObj.html(data); } // 实现check的简洁写法,使用了内部函数 function check_easy() { var url = "logon?name=" + $("#name").val(); $.get(url,null,function(data){ $("#result").html(data); }); }
使用jquery获取xml数据的交互
//回调函数 function callback(data) { // alert("服务器段的数据回来了!!"); //3.接收服务器端返回的数据 //需要将data这个dom对象中的数据解析出来 //首先需要将dom的对象转换成JQuery的对象 var jqueryObj = $(data); //获取message节点 var message = jqueryObj.children(); //获取文本内容 var text = message.text(); //4.将服务器段返回的数据动态的显示在页面上 //找到保存结果信息的节点 var resultObj = $("#result"); //动态的改变页面中div节点中的内容 resultObj.html(text); }
Ajax乱码问题
1.在传参数时,将传递参数进行2次encodeURI编码,这样不论浏览器本身是什么编码格式,都不会乱码
var url = "AJAXServer?name=" + encodeURI(encodeURI($("#userName").val()));
2.在servlet端进行参数的接收时,也进行次转码
String name = URLDecoder.decode(name,"UTF-8");
相关文章推荐
- ajax 学习总结(三)
- 学习struts2建bbs总结五:使用jquery+ajax验证用户名是否存在以及struts效验信息不断重复的问题
- 【Ajax】学习总结
- JavaScript学习总结(七)Ajax和HTTP状态字
- Ajax学习总结
- Ajax和Jquery学习总结(2)——JSON格式的数据
- ajax 学习总结(二)
- Ajax 学习总结
- Ajax W3School学习总结
- ajax学习总结
- Ajax的学习总结
- JavaScript学习总结(七)Ajax和Http状态字
- AJAX学习总结(入门)
- JavaScript学习总结之JS、AJAX应用
- Spring Boot学习总结(6)——SpringBoot解决ajax跨域请求问题的配置
- AJAX学习总结
- AJAX技术学习总结
- ajax 学习总结
- Ajax入门学习总结
- 学习Ajax技术总结