1.后台处理程序
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% String username = request.getParameter("username"); String password = request.getParameter("password"); System.out.println(username+"=========="+password); out.print("响应内容-->姓名:" +username+",密码:"+password); %>
2.get方式请求
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 4 <html> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 7 <title>Ajax实现前后台交互</title> 8 </head> 9 <body> 10 <form action="#" method=""> 11 <input type="text" name="username" id="username" /> 12 <input type="password" name="password" id="password" /> 13 <input type="button" value="ajax登录" onclick="tzLogin();" /> 14 </form> 15 16 <div id="result"></div> 17 <script type="text/javascript"> 18 19 function tzLogin(){ 20 var username = document.getElementById("username").value; 21 var password = document.getElementById("password").value; 22 var params = "?username="+username+"&password="+password+"&method=get"; 23 24 //创建一个Ajax对象 25 var xhr = new XMLHttpRequest(); 26 27 28 xhr.onreadystatechange = function(){ 29 if(this.readyState == 4 && this.status == 200){ 30 document.getElementById("result").innerText = this.responseText; 31 } 32 33 }; 34 //true代表异步 35 xhr.open("get","login.jsp"+params,true); 36 xhr.send(); 37 } 38 </script> 39 </body> 40 </html>
3.post方式请求
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 4 <html> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 7 <title>Ajax实现前后台交互</title> 8 </head> 9 <body> 10 <form action="#" method=""> 11 <input type="text" name="username" id="username" /> 12 <input type="password" name="password" id="password" /> 13 <input type="button" value="ajax登录" onclick="tzLogin();" /> 14 </form> 15 16 <div id="result"></div> 17 <script type="text/javascript"> 18 19 20 function tzLogin(){ 21 var username = document.getElementById("username").value; 22 var password = document.getElementById("password").value; 23 var params = "username="+username+"&password="+password+"&method=post"; 24 25 //创建一个Ajax对象 26 var xhr = new XMLHttpRequest(); 27 28 xhr.onreadystatechange = function(){ 29 if(this.readyState == 4 && this.status == 200){ 30 document.getElementById("result").innerText = this.responseText; 31 } 32 33 }; 34 xhr.open("post","login.jsp",true); 35 //发送数据，如果请求方式是post话send一定要设置参数 36 //如果get xhr.send(); 如果post send一定要设置参数 37 xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 38 xhr.send(params); 39 } 40 </script> 41 </body> 42 </html>
4.模拟jQuery封装Ajax请求
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <!DOCTYPE html> 4 <html> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 7 <title>Ajax实现前后台交互</title> 8 </head> 9 <body> 10 <form action="#" method=""> 11 <input type="text" name="username" id="username" /> 12 <input type="password" name="password" id="password" /> 13 <input type="button" id="button" value="ajax登录" onclick="tzLogin();" /> 14 </form> 15 16 <div id="result"></div> 17 <script type="text/javascript"> 18 var $ = { 19 ajax : function(opts){ 20 //创建一个Ajax对象 21 var xhr = null; 22 23 if(window.XMLHttpRequest){ 24 xhr = new XMLHttpRequest(); 25 }else{ 26 var ids = ["MSXML2.XMLHTTP.3.0","Microsoft.XMLHTTP","MSXML2.XMLHTTP"]; 27 for(var i=0;i<ids.length;i++){ 28 try{ 29 xhr = new ActiveXObject(ids[i]); 30 break; 31 }catch(e){ 32 33 } 34 } 35 } 36 37 38 xhr.onreadystatechange = function(){ 39 if(this.readyState == 4 && this.status == 200){ 40 var text = this.responseText; 41 if(opts.success) opts.success.call(this,text); 42 }else{ 43 if(opts.error) opts.error.call(this,"调用有异常"); 44 } 45 }; 46 47 var params = ""; 48 for(var k in opts.data){ 49 if(params != "") { 50 params += "&"; 51 } 52 params += (k+"="+opts.data[k]); 53 } 54 //true代表异步 55 if(opts.type.toLowerCase() == "get"){ 56 var url = opts.url; 57 if(params != ""){ 58 url = opts.url+"?"+params; 59 } 60 xhr.open("get",url,opts.async); 61 xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest"); 62 xhr.send(); 63 }else if(opts.type.toLowerCase() == "post"){ 64 xhr.open("post",opts.url,opts.async); 65 xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 66 xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest"); 67 xhr.send(params); 68 } 69 } 70 71 }; 72 73 74 75 76 function tzLogin(){ 77 78 $.ajax({ 79 type: "post", 80 url: "login.jsp", 81 data: { 82 username:document.getElementById("username"), 83 password:document.getElementById("password") 84 }, 85 dataType: "json", 86 async : true, 87 success: function(data){ 88 document.getElementById("result").innerText = data; 89 }, 90 error:function(){ 91 document.getElementById("result").innerText = "调用有异常"; 92 } 93 }); 94 95 } 96 </script> 97 </body> 98 </html>
5.说明解析
ajax XMLHttpRequest
1.AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
XML HttpRequest http请求的一种，传输的数据格式在早期常用XML
它是构建HTTP请求的javascript对象，在早期它是
ActiveX对象形式存在，服务器端和客户端传递异步的问题
早期数据的传递：字符串和XML
实际上，Ajax就是javascript和XML直接建立的一种异步传输的过程
2.创建 XMLHttpRequest 对象
创建 XMLHttpRequest 对象的语法：var xhr = new XMLHttpRequest();
老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：
var xhr = new ActiveXObject("Microsoft.XMLHTTP");
3.ajax 只不过是另一种Http请求的而已，它和form表单原理是一样的，
只不过不会刷新页面进行的一种异步交互
4.请求方式 getpost
get基于浏览器请求
1.直接在浏览器输入框输入一个地址进行请求
2.点击a链接是一个get请求
3.通过form指明method="get"
4.ajax指明请求方式get
post:form里面method="post"
5.请求的状态和响应异常
请求的状态,readyState
0:未初始化状态
1：载入请求的状态
2:载入完成状态
3:请求交互状态
4：请求完成状态s
可以捕获服务器错误
500服务器连接失败 -- 服务器关闭
404代表页面找不到
405请求方式有问题
200 代表交互成功，正确请求和响应
ajax里面指明post请求