不管要求什么,要求到哪个路径文件,就返回哪个资源。
比如要求一份图片资源
浏览器得到
要求一段视频资源:
跳转的这个过程表示同步过程
浏览器要求什么资源,跟随显示什么资源’
二、Ajax-是一个异步要求局部刷新。通过异步要求,要求到做事器资源数据后通过脚本来修正页面中的部分内容。
Ajax是由JS(javascript)推出的.
由JQuery对JS中Ajax代码进行封装和简化达到方便利用的效果。
三、分类第一层 $.ajax()函数 $.ajax({属性名:值,属性名:值})是Jquery中功能最全的,代码写起来相对最难的。
<script type=34;text/javascript" src="js/jquery-1.7.2.js"></script><script type="text/javascript">/ url:要求做事器地址data:要求参数dataType:做事器返回数据的类型error:要求出错实行的功能success:要求成功实行的功能,function(data) data是做事器返回的数据type:要求办法/$(function(){$("a").click(function(){$.ajax({url: "demo",data:{"name":"张三"},dataType: "html",error:function(){alert("要求出错。")},success: function(data){alert("要求成功"+data)},type: "post"})return false;})});</script>
当触发a 超链接时,向做事器要求demo(url),发送data,类型html,要求成功收到做事器数据。
这种第一层代码代码功能最全写起来麻烦
第二层:
$.get()
参数
url,[callback]String,FunctionV1.0
url:待载入 JS 文件地址。
callback:成功载入后回调函数。
$.post()
这两个相称于dataType,没有error
参数
url,[data],[callback],[type]String,Map,Function,StringV1.0
url:发送要求地址。
data:待发送 Key/value 参数。
callback:发送成功时回调函数。
type:返回内容格式,xml, html, script, json, text, _default。
代码实例:改写成post
参数servlet接管
$.post是为了简化$.ajax
第三层(简化$.get())$.getJSON(url,data,success),相称于设置$.get中 dataType="json"
$.getScript(url,data,success),相称于设置$.get中dataType="script"
如果做事器返回数据是从表中取出的数据,为了方便客服端操作返回的数据,做事器返回的数据设置成JSON
客户端把JSON当作成数据或数组操作
JSON是一种数据格式
JSONObject:JSON工具,理解成Java中工具
{"key":value,"key":value}
JSONArray:JSON数组
[{"key":value,"key":value},{"key":value,"key":value}]
JSON常用的工具除了goson还有复制到项目
把User的Java工具转换为JSON
浏览器访问:
Ajax要求json数据
浏览器得到的数据
这是一个工具
Ajax得到数组[{"id":2,"usernameString":"李四","passwordString":"122223"},{"id":1,"usernameString":"张三","passwordString":"123"}]
Ajax遍历循环数组
得到返回数据
<%@ 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" src="js/jquery-1.7.2.js"></script><script type="text/javascript">/ url:要求做事器地址data:要求参数dataType:做事器返回数据的类型error:要求出错实行的功能success:要求成功实行的功能,function(data) data是做事器返回的数据type:要求办法/$(function(){$("a").click(function(){/ $.ajax({url: "demo",data:{"name":"张三"},dataType: "html",error:function(){alert("要求出错。")},success: function(data){alert("要求成功"+data)},type: "post"}) /$.post("demo",{"name":"张三"},function(data){var result="";for(var i=0;i<data.length;i++){result+="<tr>";result+="<td>"+data[i].id+"</td>";result+="<td>"+data[i].usernameString+"</td>";result+="<td>"+data[i].passwordString+"</td>";result+="<tr/>";}/相称于先清空后添加 /$("#mytbody").html(result)})return false;})});</script> </head> <body> <a href="">跳转</a><br> <table border="1"> <thead></thead> <tr> <td>编号</td> <td>姓名</td> <td>密码</td> </tr> <tbody id="mytbody"></tbody> <tfoot></tfoot> </table> </body></html>
求关注,早日打破100粉目标