Ajax异步处理和利用jquery对Ajax的使用

来源：互联网发布：青年网络公开课张捷编辑：程序博客网时间：2024/06/07 03:52

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" onblur="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);}}
运行结果：

阅读全文

0 0