每日一记--Ajax(下)
今天基本将Ajax基础版弄明白，也就是将将学会用吧。
现在说说今天主要学习到了什么？
1、Ajax两种请求方式
①get方式，带参数请求。
上篇用的就是带get方式的请求，只是没有带参数而已。
Ajax使用get方式带参数怎么使用呢？
其实也就是拼凑url地址而已。
使用的方式open(method,url,async,user,password)。重点是前两个参数。
1 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> 2 <% 3 String path = request.getContextPath(); 4 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 5 %> 6 7 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 8 <html> 9 <head> 10 <base href="<%=basePath%>"> 11 12 <title>测试</title> 13 14 <meta http-equiv="pragma" content="no-cache"> 15 <meta http-equiv="cache-control" content="no-cache"> 16 <meta http-equiv="expires" content="0"> 17 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 18 <meta http-equiv="description" content="This is my page"> 19 <!-- 20 <link rel="stylesheet" type="text/css" href="styles.css"> 21 --> 22 23 <!-- 声明JS代码域 --> 24 <script type="text/javascript"> 25 function ajaxReq(){ 26 //获取用户请求数据 27 var uname = document.getElementById("uname").value; 28 var data = "name=" + uname; 29 //创建Ajax引擎对象 30 var ajax; 31 if(window.XMLHttpRequest){ 32 ajax=new XMLHttpRequest(); 33 }else if(window.ActiveXObject){ 34 ajax=new ActiveXObject("Msxml2.XMLHTTP"); 35 } 36 //复写onreadystatement对象 37 ajax.onreadystatechange=function(){ 38 //判断Ajax状态码 39 if(ajax.readyState==4){ 40 //判断响应状态码 41 if(ajax.status==200){ 42 //获取相应内容 43 var result =ajax.responseText; 44 //处理相应内容 45 //alert("hahaha"); 46 alert(result); 47 } 48 }else{ 49 var showdiv=document.getElementById("showdiv"); 50 showdiv.innerHTML="<img src='img/1.gif' width='200px' height='100px' />"; 51 } 52 } 53 //发送请求 54 //get 请求实体拼接在URL后面 55 var str=encodeURI("ajax?" +data); 56 ajax.open("get",str); 57 ajax.send(null); 58 //post 59 /*ajax.open("post","ajax"); 60 ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 61 ajax.send("name=好啊&pwd=1234");*/ 62 } 63 </script> 64 <style type="text/css"> 65 #showdiv{ 66 border:solid 1px; 67 width:200px; 68 height:100px; 69 } 70 </style> 71 72 73 74 </head> 75 76 <body> 77 <form action="" enctype="application/x-www-form-urlencoded"></form> 78 <h3>欢迎登录</h3> 79 <hr> 80 <input type="text" name="uname" id ="uname" value=""/> 81 <input type="button" value="测试" onclick="ajaxReq()"/> 82 <div id="showdiv"></div> 83 </body> 84 </html>
这里重点说下：关于ajax的open方式的第二个参数的问题，因为使用get方式发送，应该格外注意编码格式，不然收到的数据会匹配不上造成不必要的麻烦。
url这个参数我特意使用encodeURI()这个方法，由于在使用open的直接方法进行传参时出现后台乱码！！！可能存在的问题是关于传递参数的编码格式问题，而这个encodeURI是不会对 / 进行编译的！！！
再说一个问题，通过页面想数据库查询数据的时候，使用SQL语句where查询，传递name等于某值时，在myeclipse后台显示正确的参数值，但是一直在数据库中参数不到！！！
这个原因是因为在向数据库中传递的name需要再一次进行编码转换！！！ 在SQL的URL中添加编码格式，比如mysql的URL："jdbc:mysql://localhost:3306/XX?characterEncoding=utf8"，这样查询语句才能被数据库识别。才能查询到结果。
②post请求方式
基本差不多知识需要传递post的编码格式让服务器知道是post的数据传递方式。
1 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> 2 <% 3 String path = request.getContextPath(); 4 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 5 %> 6 7 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 8 <html> 9 <head> 10 <base href="<%=basePath%>"> 11 12 <title>测试</title> 13 14 <meta http-equiv="pragma" content="no-cache"> 15 <meta http-equiv="cache-control" content="no-cache"> 16 <meta http-equiv="expires" content="0"> 17 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 18 <meta http-equiv="description" content="This is my page"> 19 <!-- 20 <link rel="stylesheet" type="text/css" href="styles.css"> 21 --> 22 23 <!-- 声明JS代码域 --> 24 <script type="text/javascript"> 25 function ajaxReq(){ 26 //获取用户请求数据 27 var uname = document.getElementById("uname").value; 28 var data = "name=" + uname; 29 //创建Ajax引擎对象 30 var ajax; 31 if(window.XMLHttpRequest){ 32 ajax=new XMLHttpRequest(); 33 }else if(window.ActiveXObject){ 34 ajax=new ActiveXObject("Msxml2.XMLHTTP"); 35 } 36 //复写onreadystatement对象 37 ajax.onreadystatechange=function(){ 38 //判断Ajax状态码 39 if(ajax.readyState==4){ 40 //判断响应状态码 41 if(ajax.status==200){ 42 //获取相应内容 43 var result =ajax.responseText; 44 //处理相应内容 45 //alert("hahaha"); 46 alert(result); 47 } 48 }else{ 49 var showdiv=document.getElementById("showdiv"); 50 showdiv.innerHTML="<img src='img/1.gif' width='200px' height='100px' />"; 51 } 52 } 53 //发送请求 54 //get 请求实体拼接在URL后面 55 /*var str=encodeURI("ajax?" +data); 56 ajax.open("get",str); 57 ajax.send(null);*/ 58 //post 59 ajax.open("post","ajax"); 60 ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 61 ajax.send("name=好啊&pwd=1234"); 62 } 63 </script> 64 <style type="text/css"> 65 #showdiv{ 66 border:solid 1px; 67 width:200px; 68 height:100px; 69 } 70 </style> 71 72 73 74 </head> 75 76 <body> 77 <form action="" enctype="application/x-www-form-urlencoded"></form> 78 <h3>欢迎登录</h3> 79 <hr> 80 <input type="text" name="uname" id ="uname" value=""/> 81 <input type="button" value="测试" onclick="ajaxReq()"/> 82 <div id="showdiv"></div> 83 </body> 84 </html>
重点设置ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");以及post的参数在请求体中，所以将参数放在请求体中便好。
其中关于使用Ajax通过MVC三层架构进行数据访问以及响应就不细说了，这个重点是关于使用gson编码格式。有个影响吧。
今天基本重点学习了Ajax的知识吧，基本会用感觉差不多吧~~~~
