033_jQuery Ajax的ajax方法

1. $.ajax()方法通过HTTP请求加载远程数据。

2. $.ajax()方法是jQuery底层AJAX实现。简单易用的高层实现见$.get, $.post等。

3. $.ajax()方法返回其创建的XMLHttpRequest对象的超类。大多数情况下你无需直接操作该函数, 除非你需要操作不常用的选项, 以获得更多的灵活性。

4. 语法

$.ajax({name:value, name:value, ... })

5. 参数

6. 所有的选项都可以通过$.ajaxSetup()函数来全局设置。

7. 最简单的情况下, $.ajax()可以不带任何参数直接使用。不过, 我们最好设置一个url。

8. 参数详解

8.1. url

8.1.1. 类型: String

8.1.2. 默认值: 当前页地址。发送请求的地址。

8.2. type

8.2.1. 类型: String

8.2.2. 默认值: "GET"。请求方式("POST"或"GET")。注意: 其它HTTP请求方法, 如: PUT和DELETE也可以使用, 但仅部分浏览器支持。

8.3. data

8.3.1. 类型: String

8.3.2. 发送到服务器的数据。将自动转换为请求字符串格式。GET请求中将附加在URL后。查看processData选项说明以禁止此自动转换。必须为Key/Value格式。如果为数组, jQuery将自动为不同值对应同一个名称。如: {foo:["bar1", "bar2"]}转换为'&foo=bar1&foo=bar2'。

8.4. processData

8.4.1. 类型: Boolean

8.4.2. 默认值: true。默认情况下, 通过data选项传递进来的数据, 如果是一个对象(技术上讲只要不是字符串), 都会处理转化成一个字符串, 以配合默认内容类型"application/x-www-form-urlencoded"。如果要发送其它不希望转换的信息, 请设置为false, 在上传文件的时候它就是false。

8.5. contentType

8.5.1. 类型: String/Boolean

8.5.2. 默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。默认值适合大多数情况。常用值还有一个"multipart/form-data", 在上传文件的时候就是这个值。不过在上传文件的时候要设置成false, 服务器才认为是二进制信息。

8.6. dataType

8.6.1. 类型: String

8.6.2. 预期服务器返回的数据类型。如果不指定, jQuery将自动根据HTTP包MIME信息来智能判断, 比如: XML MIME类型就被识别为XML。JSON就会生成一个JavaScript对象, 而script 则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后, 传递给回调函数。可用值:

"text": 返回纯文本字符串
"json": 返回JSON数据。
"html": 返回纯文本html信息; 包含的script标签会在插入dom时执行。
"xml": 返回XML文档, 可用jQuery处理。
"script": 返回纯文本JavaScript代码。不会自动缓存结果, 除非设置了"cache"参数。注意: 在远程请求时(不在同一个域下), 所有POST请求都将转为GET请求(因为将使用DOM的script标签来加载)。
"jsonp": JSONP格式。使用JSONP形式调用函数时, 如: "myurl?callback=?", jQuery将自动替换?为正确的函数名, 以执行回调函数。

8.7. async

8.7.1. 类型: Boolean

8.7.2. 默认值: true。默认设置下, 所有请求均为异步请求。如果需要发送同步请求, 请将此选项设置为false。注意, 同步请求将锁住浏览器, 用户其它操作必须等待请求完成才可以执行。

8.8. cache

8.8.1. 类型: Boolean

8.8.2. 默认值: true, dataType为script和jsonp时默认为false。设置为false将不缓存此页面。

8.9. jsonp

8.9.1. 类型: String

8.9.2. 在一个jsonp请求中重写回调函数的名字。这个值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分, 比如: {jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。

8.10. jsonpCallback

8.10.1. 类型: String

8.10.2. 为jsonp请求指定一个回调函数名。这个值将用来取代jQuery自动生成的随机函数名。这主要用来让jQuery 生成度独特的函数名, 这样管理请求更容易, 也能方便地提供回调函数和错误处理。你也可以在想让浏览器缓存GET请求的时候, 指定这个回调函数名。

8.11. username

8.11.1. 类型: String

8.11.2. 用于设置HTTP访问认证请求的用户名。

8.12. password

8.12.1. 类型: String

8.12.2. 用于设置HTTP访问认证请求的密码

8.13. timeout

8.13.1. 类型: Number

8.13.2. 设置请求超时时间(毫秒)。此设置将覆盖全局设置。

8.14. global

8.14.1. 类型: Boolean

8.14.2. 是否触发全局AJAX事件。默认值: true。设置为false将不会触发全局AJAX事件, 如: ajaxStart或ajaxStop可用于控制不同的Ajax事件。

8.15. ifModified

8.15.1. 类型: Boolean

8.15.2. 仅在服务器数据改变时获取新数据。默认值: false。使用HTTP包Last-Modified头信息判断。

8.16. context

8.16.1. 类型: Object

8.16.2. 这个对象用于设置Ajax相关回调函数的上下文。也就是说, 让回调函数内this指向这个对象(如果不设定这个参数, 那么this就指向调用本次AJAX请求时传递的options参数)。比如: 指定一个DOM 元素作为context参数, 这样就设置了success回调函数的上下文为这个DOM元素。

8.16.3. 就像这样:

$.ajax({url: "test.html", context: document.body, success: function(){$(this).addClass("done"); // this指的是body节点
}});

8.17. scriptCharset

8.17.1. 类型: String

8.17.2. 只有当请求时dataType为"jsonp"或"script", 并且type是"GET"才会用于强制修改charset。通常只在本地和远程的内容编码不同时使用。

8.18. traditional

8.18.1. 类型: Boolean

8.18.2. 如果你想要用传统的方式来序列化数据, 那么就设置为true。请参考工具分类下面的jQuery.param方法。

8.19. beforeSend(jqXHR,options)

8.19.1. 类型: Function

8.19.2. 发送请求前可修改XMLHttpRequest对象的函数, 如: 添加自定义HTTP头。

8.19.3. 第一个参数是XMLHttpRequest对象的超类。第二个参数是调用本次AJAX请求时传递的options参数。

8.19.4. 这是一个Ajax事件。如果返回false可以取消本次ajax请求。

8.20. xhr

8.20.1. 类型: Function

8.20.2. 需要返回一个XMLHttpRequest对象。用于重写或者提供一个增强的XMLHttpRequest对象。

8.21. dataFilter(response, dataType)

8.21.1. 类型: Function

8.21.2. 给Ajax返回的原始数据的进行预处理的函数。提供data和dataType两个参数。data是Ajax返回的原始数据, type是调用$.ajax()时提供的dataType参数。函数返回的值将由jQuery进一步处理。

8.21.3.

8.22. success(response,textStatus,jqXHR)

8.22.1. 类型: Function

8.22.2. 请求成功后的回调函数。

8.22.3. 第一个参数是由服务器返回的数据。第二个参数是描述状态的字符串。第三个参数是XMLHttpRequest对象超类。

8.23. error(jqXHR,textStatus,error)

8.23.1. 类型: Function

8.23.2. 请求失败时调用此函数。

8.23.3. 有以下三个参数: XMLHttpRequest对象超类、描述错误状态的字符串(可能是"timeout", "error", "notmodified"和"parsererror"等)、捕获的异常对象。

8.24. complete(xhr,textStatus)

8.24.1. 类型: Function

8.24.2. 请求完成后回调函数(请求成功或失败之后均调用)。

8.24.3. 第一个参数是XMLHttpRequest对象超类。第二个参数是描述状态的字符串(可能是"success"等)。

9. 例子

9.1. 新建一个名为jQueryAjax动态WEB工程

9.2. 新建test.html

<!DOCTYPE html>
<html><head><title>测试文档</title><meta charset="utf-8" /></head><body> <h2>这是test.html文件中的h2</h2><p id="p1">这是test.html文件中的p</p></body>
</html>

9.3. 新建test.js

document.getElementById('result').innerHTML='我是服务器使用js返回的文本。';

9.4. 新建test.json

{"data": {"code": 1, "info": "success", "msg": "请求成功。"}}

9.5. 新建test.xml

<?xml version="1.0" encoding="UTF-8"?>
<data><code>1</code><info>success</info><msg>请求成功。</msg>
</data>

9.6. 新建index.html

<!DOCTYPE html>
<html><head><title>jQuery-Ajax的Ajax()方法</title><meta charset="utf-8" /><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){$('#btn1').click(function(){$.ajax({url: 'test.html',dataType: 'html',cache: true});});$('#btn2').click(function(){$.ajax({url: 'test.xml',dataType: 'xml',cache: false});});$('#btn3').click(function(){var fd = new FormData();fd.append("photo",$("#photo")[0].files[0]);fd.append("r", Math.random());$.ajax({url: 'UploadFile.action',type: 'post',data: fd,processData: false, // 必须有processData: false设置, 否则都没有请求, 设置为true也没有请求。contentType: false // 必须有contentType: false设置, 而且必须为false, 才能是multipart/form-data二进制的请求。});});$('#btn4').click(function(){$.ajax({url: 'JqueryAjax.action',dataType: 'script',data: {dataType: 'js'}});});$('#btn5').click(function(){var jqXHL = $.ajax({url: "JqueryAjax.action", type: 'post', data: {dataType: 'json'}, processData: true, dataType: 'json',async: true,timeout: 50000, context: $("#result"),beforeSend: function(jqXHL,options){console.log('-------beforeSend Start-------------');for(var i = 0; i < arguments.length; i++){console.log(arguments[i]);}console.log('-------beforeSend End-------------');},xhr: function(){console.log('-------xhr Start-------------');console.log('-------xhr End-------------');var xhr = new XMLHttpRequest();return xhr;},dataFilter: function(response, dataType){console.log('-------dataFilter Start-------------');for(var i = 0; i < arguments.length; i++){console.log(arguments[i]);}        console.log('-------dataFilter End-------------');return response;},success: function(response,textStatus,jqXHL){console.log('-------success Start-------------');for(var i = 0; i < arguments.length; i++){console.log(arguments[i]);}   console.log('-------success End-------------');$(this).text(jqXHL.responseText);},error: function(jqXHL,textStatus,error){console.log('-------error Start-------------');for(var i = 0; i < arguments.length; i++){console.log(arguments[i]);}        console.log('-------error End-------------');},complete: function(jqXHL,textStatus){console.log('-------complete Start-------------');for(var i = 0; i < arguments.length; i++){console.log(arguments[i]);}console.log('-------complete End-------------');}                        }); console.log('jqXHL = ' + jqXHL);});});</script><style type="text/css">div {width: 450px;height: 100px;background-color: pink;}</style></head><body> <div id="result">结果区域</div><br /><button id="btn1">使用缓存的test.html</button> <button id="btn2">不使用缓存的test.xml</button><br /><br /><input type="file" id="photo" placeholder="免冠照片" /><button id="btn3">上传文件</button> <br /><br /><button id="btn4">获取test.js</button> <button id="btn5">回调函数</button></body>
</html>

9.7. 新建JqueryAjax.java

package com.rjbd.ja;import java.io.BufferedReader;
import java.io.FileReader;
import java.io.IOException;import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;public class JqueryAjax extends HttpServlet {private static final long serialVersionUID = 1L;@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {String dataType = req.getParameter("dataType");FileReader fr = new FileReader(getServletContext().getRealPath("test." + dataType));BufferedReader br = new BufferedReader(fr);StringBuffer sb = new StringBuffer();String result = null;while((result = br.readLine()) != null) {sb.append(result);}br.close();fr.close();if("js".equals(dataType)) {dataType = "javascript";}// 响应客户端的内容类型是text/html 编码是UTF-8(包含字符编码和网页编码)resp.setContentType("text/" + dataType + ";charset=UTF-8");resp.getWriter().write(sb.toString());}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {doGet(req, resp);}
}

9.8. 新建UploadFile.java

package com.rjbd.ja;import java.io.File;
import java.io.IOException;
import java.util.Iterator;
import java.util.List;import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;public class UploadFile extends HttpServlet {private static final long serialVersionUID = 1L;@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {// 创建一个磁盘文件的工厂, 然后将它 传递到servletFileUplaod的实例中DiskFileItemFactory diskFileItemFactory = new DiskFileItemFactory();ServletFileUpload servletFileUpload = new ServletFileUpload(diskFileItemFactory);// 根据request对象获取所有的文件集合, 这里包括input标签输入的值也属于FileInputtry {List<FileItem> fileItemList = servletFileUpload.parseRequest(req);Iterator<FileItem> iterator = fileItemList.iterator();while (iterator.hasNext()) {FileItem fileItem = (FileItem) iterator.next();if (fileItem.isFormField()) { // 是否是表单提交域, 可以分区是否上传的附件String name = fileItem.getFieldName(); // input标签的nameString value = fileItem.getString(); // input表单的valueSystem.out.println("name = " + name + ", value= " + value);} else {String fieldName = fileItem.getFieldName(); // 表单提交过来的file input标签中name的属性值String fileName = fileItem.getName(); // file input上传的文件名String contentType = fileItem.getContentType(); // 获得上传文件的类型long size = fileItem.getSize(); // 上传文件的大小String filePath = getServletContext().getRealPath("/") + fileName;File saveFile = new File(filePath);fileItem.write(saveFile); // 将文件写入磁盘中}}} catch (Exception e) {e.printStackTrace();}}
}

9.9. 修改web.xml

9.10. 导入commons-fileupload-1.4.jar和commons-io-2.8.0.jar做文件上传使用

9.11. 运行项目

9.12. 使用缓存的test.html

9.13. 不使用缓存的test.xml

9.14. 上传文件

9.15. 运行脚本

9.16. 回调函数

033_jQuery Ajax的ajax方法相关推荐

jQuery监控页面所有ajax请求的方法
jQuery实现监控页面所有ajax请求的方法本文实例讲述了jQuery实现监控页面所有ajax请求的方法.分享给大家供大家参考,具体如下: 你是不是有遇到这样的问题:页面发起两个ajax请求,希望 ...
ajax请求get方法的封装,使用jQuery中Ajax的封装函数——$.get()
MATLAB中图片格式与视频格式的转换参考:https://blog.csdn.net/iracer/article/details/48876473 Matlab-将绘图保存为视频VideoWri ...
window.onbeforeunload() 事件调用ajax的解决方法
1 function window.onbeforeunload() { 2 3 var jhid = $("#ctl00_ContentBody_hfGuid").val(); ...
w3c的ajax操作函数,关于ajax的使用方法_例题、ajax的数据处理
AJAX 的关于ajax的使用方法_例题.ajax的数据处理需要注意的是,调用的封装的数据库,和jQuery的保存地址一.注册 (1)写文本框来进行用户名的验证 //这个使用来显示提示信息的 ( ...
jq中法可以发起ajax请求的方法有,jQuery实现监控页面所有ajax请求的方法
本文实例讲述了jQuery实现监控页面所有ajax请求的方法.分享给大家供大家参考,具体如下: 你是不是有遇到这样的问题:页面发起两个ajax请求,希望它们都成功以后,再做一个动作? 很容易想到的解决 ...
[js] 说说防止重复发送ajax请求的方法有哪些？各自有什么优缺点？
[js] 说说防止重复发送ajax请求的方法有哪些?各自有什么优缺点? // 方法一防抖function debounce(f, ms) { let time; return function(){ ...
ASP.NET MVC如何使用Ajax的辅助方法
前言:前面我们已经简单的介绍过了MVC如何Jquery,因为我们如果使用Ajax的话必须要了解Jquery,这篇博客我们将大致了解一下ASP.NET MVC如何使用Ajax的辅助方法,此博客是我的读书 ...
jquery ajax缓存问题解决方法小结
jquery ajax缓存问题解决方法小结参考文章: (1)jquery ajax缓存问题解决方法小结 (2)https://www.cnblogs.com/zhuyeshen/p/11599254 ...
jquery ajax实例get,jQuery中ajax的get()方法用法实例
本文实例讲述了jQuery中ajax的get()方法用法.分享给大家供大家参考.具体分析如下: $.get()通过 HTTP GET请求从服务器上请求数据. 语法结构: $.get(url, [dat ...
AJAX请求 $.post方法的使用
AJAX请求 $.post方法的使用使用jQuery的$.post方法可以以POST形式向服务器发起AJAX请求.$.post方法是jQuery的实用工具方法. $.post方法语法 $.post( ...

033_jQuery Ajax的ajax方法

033_jQuery Ajax的ajax方法相关推荐

最新文章

热门文章