1.异步刷新，在不影响前端操作的前提下，跟服务器进行数据的交互；
2.异步和同步的区别：
异步刷新请求和响应的主动权都在客户端；
同步刷新请求的主动权在客户端，响应的主动权在服务端；
工作原理：由一个XmlHttpRequest对象来完成，带对象是js的内置对象，本不是java对象。
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript">
var xhr=new XMLHttpRequest();
function show(){
alert("llllllll");
/* var v = document.getElementById("msg_name");
v.innerHtml="用户名已占用"; */
var name=document.getElementById("msg").value;
alert(name);
alert(xhr);
// xhr.open("get", "ajaxServlet?name="+name, true);
xhr.open("post", "ajaxServlet", true);//开启一个链接
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");//当为get请求时无此属性的设置
xhr.send("name="+name);//当为get请求时发送为send();send空方法，无任何参数
xhr.onreadystatechange=back1;//回调函数
/* xhr.onreadystatechange=function(){//使用匿名函数
if(xhr.readyState==4&&xhr.status==200){
var h= xhr.responseText;
var v = document.getElementById("msg_name");
v.innerHTML = h;
// v.innerHTML=h;
}
} */
}
function back1(){
if(xhr.readyState==4&&xhr.status==200){//接收服务器的响应状态-----4代表请求已完成，且响应已就绪
var h= xhr.responseText;//得到服务器的响应文本
var v = document.getElementById("msg_name");
v.innerHTML = h;
/* v.innerHTML=h; */
}
}
</script>
</head>
<body>
<form action="" enctype="application/x-www-form-urlencoded"></form>
name:<input type="text" id="msg" name="name" οnblur="show()"><span id="msg_name">请输入用户名</span><br>
pwd:<input type="text" id="pwd" name="pwd">
<input type="submit" value="ok">
</body>
</html>
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 AjaxServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html");
PrintWriter out = response.getWriter();
String name=request.getParameter("name");
System.out.println(name);
String msg="no";
String n_msg="yes";
if("admin".equals(name)){
out.print(msg);
}else{
out.print(n_msg);
}
}
}
2.jquery对Ajax的封装
分为三层：
$.ajax
load();$.get();$.post()；
$.getscript();$.getJson();
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'testjquery.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> <script type="text/javascript" src="jquery-1.9.1.js"></script> <script type="text/javascript"> $(function(){ $("#ajax").click(function(){ alert("iii"); $.ajax({ type:'POST',//指定请求方式 url:'testAjaxServlet',//指定请求url data:'name=lisi&age=1',//指定请求参数列表 success:function(data){//回调函数 alert(data); $("<tr></tr>").appendTo("#show").append("<td>"+data.name+"</td>") .append("<td>"+data.age+"</td>").append("<td>"+data.sex+"</td>") .append("<td>"+data.adder.shi+"</td>"); }, dataType:'json'//回调数据的类型 }); }); $("#get").click(function(){ alert("iii"); var data = $("#form1").serialize(); $.get( 'testAjaxServlet',data,function(data){ alert(data); $("<tr></tr>").appendTo("#show").append("<td>"+data.name+"</td>") .append("<td>"+data.age+"</td>").append("<td>"+data.sex+"</td>") .append("<td>"+data.adder.shi+"</td>"); },'json'); }); $("#post").click(function(){ alert("iii"); var data = $("#form1").serialize(); $.post( 'testAjaxServlet',data,function(data){ alert(data); $("<tr></tr>").appendTo("#show").append("<td>"+data.name+"</td>") .append("<td>"+data.age+"</td>").append("<td>"+data.sex+"</td>") .append("<td>"+data.adder.shi+"</td>"); },'json'); }); $("#load").click(function(){ var data = $("#form1").serialize(); $("#div_show").load("testAjaxServlet", data); }); $("#getjson").click(function(){ var data = $("#form1").serialize(); $.getJSON( 'testAjaxServlet',data,function(data){ alert(data); $("<tr></tr>").appendTo("#show").append("<td>"+data.name+"</td>") .append("<td>"+data.age+"</td>").append("<td>"+data.sex+"</td>") .append("<td>"+data.adder.shi+"</td>"); }); }); $("#getscript").click(function(){ $.getScript( '123.js'); }); }); </script> </head> <form action="" id="form1"> name:<input type="text" name="name"><br> age:<input type="text" name="age"><br> </form> <button id="ajax">ajax</button> <button id="get">get</button> <button id="post">post</button> <button id="load">load</button> <button id="getjson">getjson</button> <button id="getscript">getscript</button> <body> <table align="left" width="500" border="1" id="show"> <tr> <td>name</td> <td>age</td> <td>sex</td> <td>adder</td> </tr> </table><br> <div id="div_show"></div> </body> </html>
对应后台代码：运行结果：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; import com.bean.Adder; import com.bean.person; import com.google.gson.Gson; public class TestAjaxServlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html"); PrintWriter out = response.getWriter(); String name=request.getParameter("name"); String age=request.getParameter("age"); String sex="get-nan"; person p=new person(); p.setName(name); p.setAge(Integer.parseInt(age)); p.setSex(sex); Adder adder = new Adder(); adder.setAid(1); adder.setSheng("shanxi"); adder.setShi("get-xian"); p.setAdder(adder); Gson g=new Gson(); String person=g.toJson(p); out.print(person); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html"); PrintWriter out = response.getWriter(); String name=request.getParameter("name"); String age=request.getParameter("age"); String sex="nan"; person p=new person(); p.setName(name); p.setAge(Integer.parseInt(age)); p.setSex(sex); Adder adder = new Adder(); adder.setAid(1); adder.setSheng("shanxi"); adder.setShi("xian"); p.setAdder(adder); Gson g=new Gson(); String person=g.toJson(p); out.print(person); } }
533
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
