Ajax基本使用，实现方式以及与数据库交互 |
您所在的位置：网站首页 › ajax实例里面的函数 › Ajax基本使用，实现方式以及与数据库交互 |
Ajax基本使用，实现方式以及与数据库交互
|
Ajax概念
Ajax：Asynchronous JavaScript and XML（以及DHTML等）的缩写。详细可参考w3school关于Ajax介绍 异步和同步这两个概念是建立在客户端和服务器端相互通信的基础上。 同步：客户端必须等待服务器端的响应，在等待的期间客户端不能做其他操作。 异步：客户端不需要等待服务器的响应，在服务器处理请求的过程中，客户端可以进行其他的操作。 Ajax的特点 改善表单验证方式，不再需要打开新页面，也不再需要将整个页面数据提交；不需刷新页面就可改变页面内容，减少用户等待时间；按需获取数据，每次只从服务器端获取需要的数据。读取外部数据，进行数据处理整合。异步与服务器进行交互，在交互过程中用户无需等待，仍可继续操作之前，我们在做web开发的时候想要验证输入或登录，只能用form表单提交到另一个jsp页面或者是servlet中去，（好像也可以用JavaScript方法判断，但是有时好像会失效，不知道怎么回事QAQ） 传统的网页（即不用ajax技术的网页），想要更新内容或者提交一个表单，都需要重新加载整个网页。 使用ajax技术的网页，通过在后台服务器进行少量的数据交换，就可以实现异步局部更新。 使用Ajax，用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的Web用户界面。 我觉得Ajax框架一个最大的好处就是可以实现异步处理操作，比如说，在验证登录的时候就可以不用提交到其他地方，直接在当前页面就可以获取到信息，还有查询信息也可以在当前页面得到了，还节省了文件数量。 例子： Ajax实现用户验证 服务器返回消息checkUser.jsp主要连接数据库以及查询数据 JSON 概念JavaScript Object Notation 即JavaScript对象表示法。 json数据是由键值对构成的。 键用引号（单双都行），也可以不使用引号； 值的取值类型： 数字（整数或浮点数）字符串（在双引号中）数组（在方括号中）逻辑值（true或false） {“persons”: [{},{}] }对象（在花括号中） {“address”:{“province”: “山西”……}}null数据由逗号分隔：多个键值对由逗号分隔； 花括号保存对象：使用{}定义json格式； 方括号保存数组：[ ] Person p = new Person(); p.setName("张三"); p.setAge(23); p.setGender("男"); //json表示 var p={"name":"张三","age":23,"gender":"男"};json现在多用于存储和交换文本信息的语法，比XML更小、更快、更易解析。 实现方式 1. 原生的JS实现方式大致思路是这样的： Ajax使用JavaScript实现，首先建立XmlHttpRequest对象，然后获取输入框的参数，用get方式向服务器端的servlet发送请求，然后当XmlHttpRequest对象的状态值为4，响应状态码为200的时候，代表一切正常，回调函数中使用XmlHttpRequest对象的responseText方法获取返回值，并输出到页面上，这样就实现了查询但页面不刷新，url也没有改变。 例子： 客户端html页面： function fun(){ //发送异步请求 //创建核心对象 var xmlhttp; if(window.XMLHttpRequest) { xmlHttpReq = new XMLHttpRequest();//非IE浏览器 }else { xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");//IE浏览器 } /*2.发送请求 参数：1.请求方式：GET,POST GET：请求参数拼接在URL后，send()空参 POST：请求参数在send()方法中定义 2.请求的URL 3.同步或异步请求：true（异步），false（同步） */ xmlhttp.open("GET","ajaxServlet?username=tom",true); //3.发送请求 xmlhttp.send(); //4.接收并处理来自服务器的响应结果 //获取方式：xmlhttp.responseText //当xmlhttp对象的就绪状态改变时，触发事件onreadystatechange xmlhttp.onreadystatechange=function() { //判断readyState就绪状态是否为4，判断status响应状态是否为200 if(xmlhttp.readyStatus==4 && xmlhttp.status==200){ //获取服务器的响应结果 var responseText=xmlhttp.responseText; alert(responseText); } } }注意：要配置web.xml文件，添加下面这段代码进去 ajaxServlet com.ajaxServlet ajaxServlet /ajaxServlet服务器端servlet的doPost方法： protected void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException{ request.setCharacterEncoding("UTF-8"); response.setCharacterEncoding("UTF-8"); response.setContentType("text/html;charset=utf-8"); //获取请求参数 String username=request.getParameter("username"); PrintWriter out=response.getWriter(); out.write("hello!"+username); } 2. JQuery实现方式$.ajax()、$.post()、$.get() jQuery简介jQuery是一个封装了很多JS的库，提供多个与Ajax有关的方法。通过jQuery Ajax方法，我们能够使用HTTP Get和HTTP Post从远程服务器上请求文本、HTML、XML或JSON，同时可以把这些外部数据直接载入网页的被选元素中。 jQuery Ajax本质就是XMLHttpRequest，对他进行了封装，方便调用！ 下载地址：https://jquery.com/，下载之后，复制到web工程的js文件夹（自定义的）中就可以用了。 jQuery的几个方法（$可以代替jQuery）： $.get（…） 所有参数： url：待载入页面的URL地址 data: 待发送Key/value参数。 success：载入成功时回调函数 datatype：返回内容格式，xml，json，script，text，html$.post（…） 所有参数： url：待载入页面的URL地址 data：待发送Key/value参数 success：载入成功时回调函数 datatype：返回内容格式，xml，json，script，text，html$.ajax(…) 部分参数： url：请求地址 type：请求方式，GET，POST(1.9.0之后用method） data：要发送的数据 success：成功之后执行的回调函数（全局）其余的很少用到，就不列了。。。 举例： 语法：$.ajax( {键值对} ) //使用$.ajax发送异步请求 $.ajax({ url:"ajaxServlet",//请求路径 type:"POST",//请求方式 //data:"username=jack&age=23", //请求参数 data:{"username":"jack","age":23},//json格式 success:function(data){//响应成功后的回调函数 alert(data); }, error:function (){ alert("出错啦……") },//表示请求响应如果出错，会执行的回调函数 dataType:"text" })$.get()方法： function fun(){ $.get("ajaxServlet",{username:"rose"},function(data){ alert(data); },"text"); }$.post()方法： function fun(){ $.post("ajaxServlet",{username:"rose"},function(data){ alert(data); },"text"); }get和post方法的最大区别在于get方法提交的参数在URL可见，而post要打开控制台才能看到。 get方法： post方法： 我想要实现使用Ajax实现，输入框输入学生的学号，然后提交到servlet去查询数据库，然后返回结果到当前页面上来。用JS可以实现了，但是jQuery方法就是不行，测试发现当前页面的学号参数传到servlet里面是null，试过了很多种方法就是传不了输入框的学号过去，wtcl o(╥﹏╥)o emmm大学生学业繁忙（大作业截止时间要到了），没太多时间耗在这上面了，就先用JS实现的方法吧。。。 下面附上相应功能的JavaScript代码，如果有路过的大佬会jQuery方法评论区教菜鸡一下呗。。。 JS方法： var xmlHttpReq; //创建一个XmlHttpRequest对象 function createXmlHttpRequest() { //window.alert("进入到createXmlHttpRequest()函数"); if(window.XMLHttpRequest) { xmlHttpReq = new XMLHttpRequest();//非IE浏览器 }else { xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");//IE浏览器 } } //检测用户名是否已经被注册 function checkSno() { //window.alert("进入到checkSno()函数"); var sno = document.getElementById("sno").value;//获取输入框参数 if(sno=="") { alert("学号输入为空！"); return false; } //首先创建对象 createXmlHttpRequest(); //指明准备状态改变时回调的函数名 xmlHttpReq.onreadystatechange=handle; //尝试以异步的get方式访问某个URL,get请求参数 //请求服务器端的一个servlet var url = "./snoSelect_servlet?sno="+sno;//+Math.random(); //window.alert(sno); xmlHttpReq.open("get",url,true); //向服务器发送请求 xmlHttpReq.send(); //window.alert("已经发送数据"); } //状态发生改变时回调的函数 function handle() { //准备状态为4 //window.alert("进入到handle()函数"); if(xmlHttpReq.readyState==4) { //window.alert("响应已完成，您可以获取并使用服务器的响应了。"); //响应状态码为200，代表一切正常 if(xmlHttpReq.status==200) { window.alert("响应完成！ "); var res = xmlHttpReq.responseText;//获得返回值 var result = document.getElementById("result"); result.innerHTML = ""+res+"";//将res写入到result中 } } }jQuery方法： function checkSno(){ $.ajax({ url:"snoSelect_servlet",//请求路径 type:"GET",//请求方式 async:false,//异步 //data:"username=jack&age=23", //请求参数 //测试之后，发现数据库接收参数sno=null data:{sno:$("input[name='sno']").val()},//json格式 processData: false, // jQuery不要去处理发送的数据 contentType: false, // jQuery不要去设置Content-Type请求头 success:function(data){ alert(data); var result = document.getElementById("result"); result.innerHTML = ""+data+"";//将res写入到result中 }, error:function (){ alert("出错啦……") }//表示请求响应如果出错，会执行的回调函数 }); } |
【本文地址】