博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jQuery Ajax总结
阅读量:4597 次
发布时间:2019-06-09

本文共 6533 字,大约阅读时间需要 21 分钟。

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:

  
最新评论

张三 [北京市网友]

一楼给度娘

李四 [山东省济南市网友]

没抢到沙发

王五 [河南省郑州市网友]

顶顶顶顶顶

然后创建load.html,添加一个button按钮触发Ajax事件,将加载进来的HTML内容存放到id为“resText”的元素中。

  
最新评论:

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页面:

  

添加评论:

姓名:

位置:

内容:

最新评论:

接下来构造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("
" + username + "
"+ location + "

"+content+"

"); %>

然后需要将.jsp发布到tomcat等web容器进行访问。

JSON数据

相对于xml文件而言,json相当简洁、易读。接下来看看服务器返回json形式的数据的情况。

客户端页面get2.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()

$.getScirpt()

$.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 += "
" + comment['username'] + "
" + comment['location'] + "

" + comment['contentTxt'] + "

"; }); $("#resText").html(html);

$.getScript()直接加载进js,并自动执行:

  

最新评论:

$.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 += "
" + comment['username'] + "
" + comment['location'] + "

" + comment['contentTxt'] + "

"; }); $("#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 += "
" + comment['username'] + "
" + comment['location'] + "

" + comment['contentTxt'] + "

"; }); $("#resText").html(html); } }) }); }) [转发自http://www.cnblogs.com/xiaoxiaoyihan/p/6050854.html]

转载于:https://www.cnblogs.com/gw1016/p/6071620.html

你可能感兴趣的文章
使用 NPOI 、aspose实现execl模板公式计算
查看>>
行为型模式:中介者模式
查看>>
How to Notify Command to evaluate in mvvmlight
查看>>
33. Search in Rotated Sorted Array
查看>>
461. Hamming Distance
查看>>
Python垃圾回收机制详解
查看>>
{面试题1: 赋值运算符函数}
查看>>
Node中没搞明白require和import,你会被坑的很惨
查看>>
Python 标识符
查看>>
Python mysql 创建连接
查看>>
企业化的性能测试简述---如何设计性能测试方案
查看>>
centos7 安装中文编码
查看>>
POJ - 3683 Priest John's Busiest Day
查看>>
正则表达式start(),end(),group()方法
查看>>
vuejs 学习旅程一
查看>>
javascript Date
查看>>
linux常用命令2
查看>>
狼图腾
查看>>
13、对象与类
查看>>
Sublime Text3 个人使用心得
查看>>