jQuery对Ajax的操作进行了封装。jQuery中\(.ajax()属于最底层的方法,这个放在后面说,首先看看封装了\).ajax()的方法。

load()方法

load()可以远程载入HTML并插入到DOM中。结构为:

load(url [,data] [,callback])
  • url(String):服务端资源的url。
  • data(Obejct):发送到服务器的key/value数据
  • callback(Function):请求完成时(无论成功或失败)的回调函数,在响应数据已经加载到包装集元素之后被调用。传入这个函数的参数是响应文本、状态码、以及xhr实例。

加载HTML文档

首先构造一个要被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()的传递方式根据参数data来自动指定。如果没有参数,则采用GET方式传递,否则,会自动转换为POST方式。

回调函数

在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操作的影响。无论进行多少次GET操作,返回的结果是完全一致的。\).post()发送到服务器的数据可以用来修改应用的模型状态。例如,可以添加或删除信息。

$.get()

$.get()结构为:

$.get(url [, data] [, callback] [, type])

$.get()参数说明:

  • url(String):请求的服务器端资源的url
  • data(Object):以key/value的形式构造查询字符串追加到url
  • callback(Function):在请求成功(success)时被调用。将请求结果和状态传递给该方法。
  • type(String):服务器端返回内容的格式

HTML文档

下面添加评论的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()),
location: encodeURI($("#location").val()),
contentTxt: encodeURI($("#contentTxt").val())
}, function (data, 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中这种区别对用户是不可见的。
  • GET对传输的数据大小有限制(通常不大于2kb),使用POST方式传递的数据量比GET大得多(理论上不受限制)
  • GET方式请求的数据会被浏览器缓存,这种情况可能带来安全问题。

\(.get()和\).post()的结构和使用方式都相同。

\(.getScript()和\).getJson()

$.getScript()

$.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()是jquery最底层的实现。

$.ajax(options)

这个方法只包含了1个参数,这个参数里面包含了$.ajax()所需要的请求设置以及回调函数,参数以key/value形式存在

$.ajax()参数说明:

  • url(String):发送请求地址。

  • type(String):请求方式(POST或GET),默认为GET。其他HTTP请求方法如PUT、DELETE,仅部分浏览器支持。

  • data(Object或String):发送到服务器的数据。如果不是字符串,将自动转换为字符串格式。GET请求中将附加在url后。对象必须是key/value格式,例如{id:"xxyh", password:"123456"}转换为&id=xxyh&password=123456。如果是数组,将自动为不同值对应同一个名称。例如{name:["xxyh","dudu"]}转换为&name=xxyh&name=dudu。

  • dataType(String):预期服务器返回的数据类型。如果不指定,jquery将根据HTTP包MINE信息返回responseXML或responseText,并作为回调函数参数传递。可用类型:

    • xml:返回XML文档,可用jquery处理
    • html:返回纯文本HTML信息,包含的script标签会插入DOM时执行。
    • script:返回纯文本JavaScript代码。如果没有设置cache参数,不会自动缓存结果。在远程请求时(不在同一个域下),所有POST请求都将转为GET请求。
    • json:返回JSON数据。
    • jsonp:JSONP格式。使用JSONP形式调用函数时,例如myurl?callback=?,jquery将自动替换后一个“?”为正确的函数名,以执行回调函数。
    • text:返回纯文本字符串。
  • complete(Function):请求完成后回调函数(请求成功或失败后均调用)。

    参数: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, textStatus, 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);
}
})
});
})

jQuery Ajax总结的更多相关文章

  1. IE8/9 JQuery.Ajax 上传文件无效

    IE8/9 JQuery.Ajax 上传文件有两个限制: 使用 JQuery.Ajax 无法上传文件(因为无法使用 FormData,FormData 是 HTML5 的一个特性,IE8/9 不支持) ...

  2. jquery ajax解析

    jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯. 废话少说,直接进入正题,我们先来看一些简单的方法,这些方法都是对 ...

  3. jQuery.ajax 根据不同的Content-Type做出不同的响应

    使用H5+ASP.NET General Handler开发项目,使用ajax进行前后端的通讯.有一个场景需求是根据服务器返回的不同数据类型,前端进行不同的响应,这里记录下如何使用$.ajax实现该需 ...

  4. jQuery.ajax(url,[settings])

    概述 通过 HTTP 请求加载远程数据. jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax() 返回其创建的 XMLHttpRequest 对象. ...

  5. jQuery Ajax 实例 ($.ajax、$.post、$.get)

    jQuery Ajax 实例 ($.ajax.$.post.$.get) 转 Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的诧异了. ...

  6. jQuery Ajax传值给Servlet,在Servlet里Get接受参数乱码的解决方法

    最近在学jquery ui,在做一个小功能的时候需要将前台的值获取到,通过Ajax传递给Servlet,然后再在返回数据结果,但是在Servlet接受参数的时候,通过后台打印,发现接受乱码,代码示例如 ...

  7. JQuery+Ajax+Struts2+Hibernate 实现完整的登录注册

    写在最前: 下午有招聘会,不想去,总觉得没有准备好,而且都是一些不对口的公司,可是又静不下心来,就来写个博客. 最近在仿造一个书城的网站:http://www.yousuu.com ,UI直接拿来用, ...

  8. 用.NET MVC实现长轮询,与jQuery.AJAX即时双向通信

    两周前用长轮询做了一个Chat,并移植到了Azure,还写了篇博客http://www.cnblogs.com/indream/p/3187540.html,让大家帮忙测试. 首先感谢300位注册用户 ...

  9. jQuery AJAX 网页无刷新上传示例

    新年礼,提供简单.易套用的 jQuery AJAX 上传示例及代码下载.后台对文件的上传及检查,以 C#/.NET Handler 处理 (可视需要改写成 Java 或 PHP). 有时做一个网站项目 ...

  10. 用JQuery Ajax 与一般处理程序 请求数据无刷新,以及如何调试错误

    通过 ajax() 与 一般处理程序,请求数据库数据,实现界面无刷新. Jquery ajax 请求参数详细说明 http://www.w3school.com.cn/jquery/ajax_ajax ...

随机推荐

  1. understand EntityManager.joinTransaction()

    Join Transaction The EntityManager.joinTransaction() API allows an application managed EntityManager ...

  2. PHP命名空间-总结

    首先创建三个文件: one.php.two.php.three.php one.php namespace a\b\c; class Type { function getInfo(){ echo & ...

  3. python中的编解码小结

    在用python27写文件或者上传文件时遇到这样一个问题:.在网上搜了下说加入以下三行代码可以解决: import sys reload(sys) sys.setdefaultencoding('ut ...

  4. vertical-align和line-height的深入应用

    vertical-align和line-height的深入应用 本文的重点是了解vertical-align和line-height的使用 涉及到的名词:基线,底端,行内框,行框,行间距,替换元素及非 ...

  5. windows 2003 iis php

    我的环境 是   windows server200 ee   iis6.0  程序是php 1.一台安装好的 Windows 2003 服务器,并且已经安装了 IIS 6. 2.下载 windows ...

  6. PKU 3318 Matrix Multiplication(神奇的输入)

    #include<cstdio> using namespace std; ][]; ][],C[][]; int Read() { ; ; while((ch=getchar())==' ...

  7. 2018秦皇岛ccpc-camp Steins;Gate (原根+FFT)

    因为给定的模数P保证是素数,所以P一定有原根. 根据原根的性质,若\(g\)是\(P\)的原根,则\(g^k\)能够生成\([1,P-1]\)中所有的数,这样的k一共有P-2个. 则\(a_i*a_j ...

  8. tensorflowxun训练自己的数据集之从tfrecords读取数据

    当训练数据量较小时,采用直接读取文件的方式,当训练数据量非常大时,直接读取文件的方式太耗内存,这时应采用高效的读取方法,读取tfrecords文件,这其实是一种二进制文件.tensorflow为其内置 ...

  9. Linux下修改时间

    修改linux的时间可以使用date指令 date命令的功能是显示和设置系统日期和时间. 输入date 查看目前系统时间. 修改时间需要 date -功能字符 修改内容 命令中各选项的含义分别为: - ...

  10. quartz (一) 基于 Quartz 开发企业级任务调度应用

    本文转自:http://www.ibm.com/developerworks/cn/opensource/os-cn-quartz/ Quartz 基本概念及原理 Quartz Scheduler 开 ...