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;
@Override
protected 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());
}
@Override
protected 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;
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// 创建一个磁盘文件的工厂, 然后将它 传递到servletFileUplaod的实例中
DiskFileItemFactory diskFileItemFactory = new DiskFileItemFactory();
ServletFileUpload servletFileUpload = new ServletFileUpload(diskFileItemFactory);
// 根据request对象获取所有的文件集合, 这里包括input标签输入的值也属于FileInput
try {
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标签的name
String value = fileItem.getString(); // input表单的value
System.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. 回调函数
