Ajax学习总结1

最新推荐文章于 2024-09-20 16:26:58 发布

南愚寒凝

最新推荐文章于 2024-09-20 16:26:58 发布

阅读量476

点赞数

分类专栏： Ajax 文章标签： ajax xmlhttprequest callback 服务器 jquery function

本文链接：https://blog.csdn.net/hany233/article/details/6528737

版权

Ajax 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Ajax的英文全称即是：Asynchronous JavaScript And XML

使用一个检验用户名是否存在的例子来演示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/>   <input type="text" id="name" /> <input type="button" value="校验" οnclick="check()"/>   <div id="result"></div>    </body> </html>

实现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

//定义用户名校验的方法 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");