AJAX知识总结
|
jQuery Ajax总结 jQuery对Ajax的操作进行了封装。jQuery中属于最底层的方法，这个放在后面说，首先看看封装了.ajax()属于最底层的方法，这个放在后面说，首先看看封装了.ajax()的方法。 load()方法 load(url [,data] [,callback]) 首先构造一个要被load()方法加载的新闻评论页面，comment.html: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>最新评论</title>
</head>
<body>
<div class="comment">
<p>
<a href="#" class="username">张三</a>
<span class="location">[北京市网友]</span>
</p>
<p class="contentTxt">一楼给度娘</p>
</div>
<div class="comment">
<p>
<a href="#" class="username">李四</a>
<span class="location">[山东省济南市网友]</span>
</p>
<p class="contentTxt">没抢到沙发</p>
</div>
<div class="comment">
<p>
<a href="#" class="username">王五</a>
<span class="location">[河南省郑州市网友]</span>
</p>
<p class="contentTxt">顶顶顶顶顶</p>
</div>
</body>
</html>
然后创建load.html，添加一个button按钮触发Ajax事件，将加载进来的HTML内容存放到id为“resText”的元素中。 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../jquery/jquery-2.2.3.js"></script>
<script type="text/javascript"> $(function () { // 点击按钮，触发加载动作 $("#btn").click(function () { // 将comment.html加载进id为“resText”的元素里 $("#resText").load("comment.html"); }); }) </script>
</head>
<body>
<input type="button" id="btn" value="load评论">
<div>最新评论：</div>
<div id="resText"></div>
</body>
</html>
load()的url参数的语法结构为“url selector”，可以加载指定的内容。例如，加载comment.html页面中class为“contentTxt”的内容： $(“#resText”).load(“comment.html .contentTxt”); 回调函数 在load方法中，无论ajax请求是否成功，请求完成(complete)后，回调函数就会被触发，对应$.ajax()中的complete回调函数。 $("#resText").load("comment.html",function (responseText,textStatus,XMLHttpRequest) {
alert(responseText); // 请求返回的内容
alert(textStatus); // 请求状态
alert(XMLHttpRequest); // XMLHttpRequest对象
});
load()常用来从web服务器上获取静态的数据文件。如果要向服务器传递参数，可以使用或.get()或.post()方法。 与.get()与.post() $.get() $.get()结构为： $.get(url [,callback] [,type]) url(String):请求的服务器端资源的url 下面添加评论的html页面： <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../jquery/jquery-2.2.3.js"></script>
<script type="text/javascript"> $(function () { $("#send").click(function () { // 点击按钮触发get请求 $.get("get1.jsp",{ // 向服务器传递参数，encodeURI进行完整编码 username: encodeURI($("#username").val()),location: encodeURI($("#location").val()),contentTxt: encodeURI($("#contentTxt").val()) },function (data,textStatus) { // alert(textStatus); // 返回请求状态 // alert(decodeURI(data)); // 返回请求的状态 // 将返回的数据添加到id为“resText”的元素中 $("#resText").html(decodeURI(data)); }) }); }) </script>
</head>
<body>
<form id="form1">
<p>添加评论:</p>
<p>姓名:<input type="text" name="username" id="username"></p>
<p>位置:<input type="text" name="location" id="location"></p>
<p>内容:<textarea name="contentTxt" id="contentTxt"></textarea></p>
<p><input type="button" id="send" value="提交"></p>
</form>
<div>最新评论：</div>
<div id="resText"></div>
</body>
</html>
接下来构造get1.jsp，模拟服务器处理请求并返回数据： <%@ page contentType="text/html;charset=UTF-8" language="java" %>
<% String username = request.getParameter("username"); String location = request.getParameter("location"); String content = request.getParameter("contentTxt"); out.println("<div class='comment'><a href='#' class='username'>" + username + "</a><span class='location'>"+ location + "</span></p><p class='contentTxt'>"+content+"</p></div>"); %>
然后需要将.jsp发布到tomcat等web容器进行访问。 JSON数据 相对于xml文件而言，json相当简洁、易读。接下来看看服务器返回json形式的数据的情况。 客户端页面get2.html: <!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript" src="../jquery/jquery-2.2.3.js"></script>
<script type="text/javascript"> $(function () { $("#send").click(function () { $.get("get2.jsp",{ username: encodeURI($("#username").val()),textStatus) { alert(textStatus); var username = data.username; var location = data.location; var contentTxt = data.contentTxt; username = decodeURI(username); location = decodeURI(location); contentTxt = decodeURI(contentTxt); var txtHtml = "<div class='comment'><p><a href='#' class='username'>" + username + "</a><span class='location'>" + location + "</span></p><p class='contentTxt'>" + contentTxt + "</p></div>"; $("#resText").html(txtHtml);// 将返回的数据添加到页面 },"json"); }) }) </script>
</head>
<body>
<form id="form1">
<p>添加评论:</p>
<p>姓名:<input type="text" name="username" id="username"></p>
<p>位置:<input type="text" name="location" id="location"></p>
<p>内容:<textarea name="contentTxt" id="contentTxt"></textarea></p>
<p><input type="button" id="send" value="get提交"></p>
</form>
<div>最新评论：</div>
<div id="resText"></div>
</body>
</html>
上面encodeURI()是用于编码，否则中文就无法解析，这个希望以后有时间再总结，这里先记住。回调函数的第4个参数(type)设置为“json”,代表期待服务器返回的数据格式。 需要添加json-lib.jar，用于构造json格式的数据。get2.jsp: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ page import="net.sf.json.JSONObject" %>
<% String username = request.getParameter("username"); String location = request.getParameter("location"); String contentTxt = request.getParameter("contentTxt"); JSONObject json = new JSONObject(); json.put("username",username); json.put("location",location); json.put("contentTxt",contentTxt); out.println(json); %>
json的格式非常严格，任何一个括号的不匹配或缺失都会导致页面的脚本终止运行。上面通过java代码首先创建了一个json对象。如果通过拼接的方式构造json数据，必须是标准的json格式： out.println("{"username":""+ username+ "","location":"" + location + "","contentTxt":""+ contentTxt+"" }");
$.post()
除了对服务器的状态和应用的模型数据的影响，和.get()和.post()还有以下区别： GET请求会将参数跟在url后进行传递，POST请求则作为HTTP消息的实体内容发送给Web服务器。在ajax中这种区别对用户是不可见的。 和.getScript()和.getJson() $.getScript()用来加载.js文件，与加载一个HTML片段一样，js文件会自动执行。 将$.load()的comment.html页面改写为js文件，将评论添加到id为“resText”的元素中。js1.js: var comments = [
{
"username": "张三","location": "[北京市网友]","contentTxt": "一楼献度娘"
},{
"username": "李四","location": "[山东省济南市网友]","contentTxt": "没抢到沙发"
},{
"username": "王五","location": "[河南省郑州市网友]","contentTxt": "顶顶顶顶顶"
}
];
var html = '';
$.each(comments,function (index,comment) {
html += "<div class='comment'><a href='#' class='username'>" + comment['username'] +
"</a><span class='location'>" + comment['location'] +
"</span></p><p class='contentTxt'>" + comment['contentTxt'] + "</p></div>";
});
$("#resText").html(html);
$.getScript()直接加载进js，并自动执行:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../jquery/jquery-2.2.3.js"></script>
<script type="text/javascript"> $(function () { // 点击按钮加载js1.js文件 $("#send").click(function () { $.getScript("js1.js"); }) }) </script>
</head>
<body>
<p>
<input type="button" id="send" value="加载script">
</p>
<div class="comment">最新评论：</div>
<div id="resText"></div>
</body>
</html>
$.getJSON() 用于加载文件，用法与.getJSON()用于加载JSON文件，用法与.getScript()相同。 json数据： [
{
"username": "张三","location": "[北京市网友]","contentTxt": "一楼献度娘"
},{
"username": "李四","location": "[山东省济南市网友]","contentTxt": "没抢到沙发"
},{
"username": "王五","location": "[河南省郑州市网友]","contentTxt": "顶顶顶顶顶"
}
]
jquery代码：
$(function () {
$("#send").click(function () {
$.getJSON("demo.json",function (data) {
$("#resText").empty();
var html = '';
$.each(data,function (index,comment) {
html += "<div class='comment'><a href='#' class='username'>" + comment['username'] +
"</a><span class='location'>" + comment['location'] +
"</span></p><p class='contentTxt'>" + comment['contentTxt'] + "</p></div>";
});
$("#resText").html(html);
});
})
});
$.ajax()方法 $.ajax(options) $.ajax()参数说明： url(String):发送请求地址。 参数：XMLHttpRequest对象和一个描述成功请求类型的字符串。 function(XMLHttpRequest,textStatus){
this; // 调用本次Ajax请求时传递的options参数
}
success(Function):请求成功回调函数。有2个参数：
参数：由服务器返回，并根据dataType参数进行处理后的数据和描述状态的字符串。
function(data,textStatus) {
// data 可能是xmlDoc,jsonObj,html,text等
this; // 调用本次Ajax请求时传递的options参数
}
error(Function):请求失败时被调用的函数。这个函数有3个参数，即XMLHttpRequest对象、错误信息和捕获的错误对象
function(XMLHttpRequest,errorThrown){
// 通常情况下textStatus和errorThrown只有一个包含信息
this; // 调用本次Ajax请求时传递的options参数
}
contentType(String):当发送信息至服务器时，内容编码类型默认为”application/x-www-form-urlencoded”。 jsonp(String):在一个jsonp请求中重写回调函数的名字。用来替代在“callback=?”这种GET或POST请求中URL参数里的“callback”部分，例如{jsonp:’onJsonPLoad’}会导致将“onJsonPLoad=?”传给服务器。 获取JSON数据 接下来通过$.ajax()获取json数据。jquery代码： $(function () {
$("#send").click(function () {
$.ajax({
type:"GET",url:"demo.json",dataType:"json",success: function (data) {
$("#resText").empty();
var html = "";
$.each(data,function (commentIndex,comment) {
html += "<div class='comment'><a href='#' class='username'>" + comment['username'] +
"</a><span class='location'>" + comment['location'] +
"</span></p><p class='contentTxt'>" + comment['contentTxt'] + "</p></div>";
});
$("#resText").html(html);
}
})
});
})
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |