AJax技术

Ajax学习札记01-简单实现数据异步交互

字号+ 作者:H5之家 来源:H5之家 2017-09-02 15:00 我要评论( )

Ajax学习笔记01-简单实现数据异步交互 Ajax的简单实现: ①.Demo-1:以简单数据段的形式返回给前台页面: 页面代码:index.html !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"htmlheadscript type=

Ajax学习笔记01-简单实现数据异步交互
Ajax的简单实现:
①.Demo-1:以简单数据段的形式返回给前台页面:

页面代码:index.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script type="text/javascript" src="js/verify.js"></script> <script type="text/javascript" src="js/jquery-1.4.2.js"></script> <script type="text/javascript"> </script> <title>用户名验证</title> </head> <body> 用户名校验ajax实例,请输入用户名:<br/> <!-- <form action="AjaxServer" method="post"> 用户名:<input type="text"/> <input type="submit" value="检验"/> </form> --> <!--ajax可以不需要使用表单来进行数据提交,因此不用写表单标签 --> <!--ajax方式不需要name属性,需要一个id的属性--> 用户名:<input type="text"/> <input type="button" value="检验一下"/> <!--这个div用于存放服务器端返回的信息开始为空,id属性利用dom的方式找到某个节点--> <div></div> </body> </html>


后台servlet代码:
1. AjaxServer---以out.println()的形式往前台输出数据段,并不是刷新页面
Import…
/** * Created by IntelliJ IDEA. * User: 赵光鹏 * Date: 2011-11-16 * Time: 15:35:55 * Alt+enter 导入包修复的功能 * To change this template use File | Settings | File Templates. */ public class AjaxServer extends HttpServlet{ @Override protected void doGet(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException { //解决乱码问题,一定要在获取getWriter对象之前 httpServletResponse.setCharacterEncoding("utf-8"); httpServletResponse.setContentType("text/html;charset-utf-8"); PrintWriter out = httpServletResponse.getWriter(); //1.取页面端传过来的页面信息 String old = httpServletRequest.getParameter("name"); //name是从js中定义的url中参数获取的 // String name = new String(old.getBytes("iso8859-1"),"utf-8"); String name = URLDecoder.decode(old,"UTF-8"); System.out.println("转换编码前"+old); System.out.println("转换编码前"+old); //2.检查参数是否有问题 if(name==null||name.length()==0){ out.println("用户名不能为空"); }else{ //3. 校验操作 if(name.equals("guangpeng")){ //4 .和传统应用不同,这一步是将用户感兴趣的数据返回给页面段,而不是将新的页面传递给用户 out.println("欢迎您"+name+"!"); } else{ out.println(name+"--11用户尚未注册,请先注册!"); } } } @Override protected void doPost(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException { doGet(httpServletRequest, httpServletResponse); } }

Js文件代码:
①. 利用Jquery简单实现ajax与后台服务器的交互:

//定义用户名校验的方法
function verify(){ // var url = "AjaxServer?name="+encodeURI(encodeURI($("#userName").val())); /* * jquery链式编程 * var userName = $("#userName").val(); * */ //jquery返回都是jquery对象,可以继续在上面执行其他的方法 var jqueryObj = $("#userName"); //获取节点的值 var userName = jqueryObj.val(); // alert(userName); //2.将文本框中的数据发送给服务器段的servlet //使用jquery的XMLHTTPrequest对象请求的封装 $.get("AjaxServer?name="+userName,null,callback); // } //回调函数,是数据异步交互的一个体现 function callback(data){ //3. 接收服务器端返回的数据 // alert("服务器的数据回来了!!!"); //alert(data); $("#result").html(data); //4.将服务器返回的数据动态的显示在网页上面 }
Demo1可以实现数据以字符串的形式与服务器进行数据交互,其实js文件也去掉注释,利用jquery链式编程的思想,也可以简单的写为:verity1.js

function verify(){
    var userName = $("#userName").val();
    $.get("AjaxServer?name="+userName,null,function(data){
        $("#result").html(data);

    });
}


Demo2:使用XmlHttpRequest对象进行ajax异步数据交互
使用XmlHttpRequest对象进行ajax异步数据交互:html页面和servlet是相同的,只是在页面中更新引入的js文件就可以:


//这个方法将使用XmlHttpRequest对象进行ajax异步数据交互
var xmlhttp; function verify(){ //var xmlhttp; //使用dom的方式获取文本框中的值 var userName = document.getElementById("userName").value; if(window.XMLHttpRequest){ //针对firefox,mozillor opera safari ie7.8 xmlhttp = new XMLHttpRequest(); //修正某些浏览器bug的代码,能正确的返回xml格式的数据 if(xmlhttp.overrideMimeType){ xmlhttp. overrideMimeType("text/xml"); } }else if(window.ActiveXObject){ //针对ie6,5 //两个可以用于创建XMLHttpRequest对象的控件名称,保存在一个js中 //排在前面的版本较新 ,控件版本不一样,要尝试性的去创建 var activeNeme = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"]; for(var i=0; i<activeNeme.length; i++){ try{ xmlhttp = new ActiveXObject(activeNeme[i]); break; }catch(e){ } } } if(!xmlhttp){ alert("XMLHttpRequest对象创建失败"); }else{ alert(xmlhttp); } //2.回调函数的注册 //只是需要函数名,不要加括号,如果加上括号,会把函数的返回值注册上 xmlhttp.onreadystatechange = callback;//这里写的是函数名 //3.设置连接信息 Get方式实现 //第一个参数表示http的请求方式,支持所有的http的请求方式,主要使用get和post //第二个参数表示请求的url地址,get参数也在url中 //第三个参数表示采用异步还是同步方式交互,true表示异步 // xmlhttp.open("GET","AjaxServer?name="+userName, true); //4.发送数据,开始和服务器进行交互 // 同步方式下,send这句话会在服务器端数据回来后才执行 //异步方式下,send这句话会立即完成执行 //xmlhttp.send(null); //post方式请求的的代码 xmlhttp.open("POST","AjaxServer", true); //自己设置http请求头 xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //post方式发送数据 xmlhttp.send("name="+userName); } //回调函数 function callback(){ //5.接收响应数据 //判断对象的状态是交互完成 4表示交互完成 ,XMLHttpRequest共有五种状态0-4 if(xmlhttp.readyState == 4){ //判断http的交互是否成功 if(xmlhttp.status == 200){ //获取服务器端返回的数据 //获取服务器端输出的纯文本数据 var responseText = xmlhttp.responseText; //将数据显示在页面上 var divNode = document.getElementById("result"); divNode.innerHTML = responseText; } } }

从js的角度来了解ajax数据交互原理。

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • jquery实现ajax无刷新效果

    jquery实现ajax无刷新效果

    2017-09-03 08:05

  • JavaWeb(9):AJAX

    JavaWeb(9):AJAX

    2017-09-02 14:04

  • 前端学习之ajax

    前端学习之ajax

    2017-09-02 14:04

  • Xajax相关资料

    Xajax相关资料

    2017-09-02 08:02

网友点评