jquery的ajax学习笔记

Ajax操作
$.ajax
$.ajax({
  async: true,
  url: '/url/to/json',
  type: 'GET',
  data : { id : 123 },
  dataType: 'json',
  timeout: 30000,
  success: successCallback,
  error: errorCallback,
  complete: completeCallback,
  statusCode: {
        404: handler404,
        500: handler500
  }
})


function successCallback(json) {
    $('<h1/>').text(json.title).appendTo('body');
}


function errorCallback(xhr, status){
    console.log('出问题了！');
}


function completeCallback(xhr, status){
    console.log('Ajax请求已结束。');
}


accepts：将本机所能处理的数据类型，告诉服务器。
async：该项默认为true，如果设为false，则表示发出的是同步请求。
beforeSend：指定发出请求前，所要调用的函数，通常用来对发出的数据进行修改。
cache：该项默认为true，如果设为false，则浏览器不缓存返回服务器返回的数据。注意，浏览器本身就不会缓存POST请求返回的数据，所以即使设为false，也只对HEAD和GET请求有效。
complete：指定当HTTP请求结束时（请求成功或请求失败的回调函数，此时已经运行完毕）的回调函数。不管请求成功或失败，该回调函数都会执行。它的参数为发出请求的原始对象以及返回的状态信息。
contentType：发送到服务器的数据类型。
context：指定一个对象，作为所有Ajax相关的回调函数的this对象。
crossDomain：该属性设为true，将强制向相同域名发送一个跨域请求（比如JSONP）。
data：向服务器发送的数据，如果使用GET方法，此项将转为查询字符串，附在网址的最后。
dataType：向服务器请求的数据类型，可以设为text、html、script、json、jsonp和xml。
error：请求失败时的回调函数，函数参数为发出请求的原始对象以及返回的状态信息。
headers：指定HTTP请求的头信息。
ifModified：如果该属性设为true，则只有当服务器端的内容与上次请求不一样时，才会发出本次请求。
jsonp：指定JSONP请求“callback=?”中的callback的名称。
jsonpCallback: 指定JSONP请求中回调函数的名称。
mimeType：指定HTTP请求的mime type。
password：指定HTTP认证所需要的密码。
statusCode：值为一个对象，为服务器返回的状态码，指定特别的回调函数。
success：请求成功时的回调函数，函数参数为服务器传回的数据、状态信息、发出请求的原始对象。
timeout: 等待的最长毫秒数。如果过了这个时间，请求还没有返回，则自动将请求状态改为失败。
type：向服务器发送信息所使用的HTTP动词，默认为GET，其他动词有POST、PUT、DELETE。
url：服务器端网址。这是唯一必需的一个属性，其他属性都可以省略。
username：指定HTTP认证的用户名。
xhr：指定生成XMLHttpRequest对象时的回调函数。


原生js的ajax请求
var request = new XMLHttpRequest();
request.open('GET', '/bar/foo.txt', false);
request.send(null);
请求的五种状态
0，对应常量UNSENT，表示XMLHttpRequest实例已经生成，但是open()方法还没有被调用。
1，对应常量OPENED，表示send()方法还没有被调用，仍然可以使用setRequestHeader()，设定HTTP请求的头信息。
2，对应常量HEADERS_RECEIVED，表示send()方法已经执行，并且头信息和状态码已经收到。
3，对应常量LOADING，表示正在接收服务器传来的body部分的数据，如果responseType属性是text或者空字符串，responseText就会包含已经收到的部分信息。
4，对应常量DONE，表示服务器数据已经完全接收，或者本次接收已经失败了。
返回的状态码
200, OK，访问正常
301, Moved Permanently，永久移动
302, Move temporarily，暂时移动
304, Not Modified，未修改
307, Temporary Redirect，暂时重定向
401, Unauthorized，未授权
403, Forbidden，禁止访问
404, Not Found，未发现指定网址
500, Internal Server Error，服务器发生错误
基本上，只有2xx和304的状态码，表示服务器返回是正常状态。


ajax请求的简便写法
$.get();
$.getScript();
//用于从服务器端加载一个脚本文件
$.getScript('/static/js/myScript.js', function() {
   functionFromMyScript();
});
回调函数接收三个参数，分别是脚本文件的内容，http响应状态信息，ajax对象实例
$.getScript( "ajax/test.js", function (data, textStatus, jqxhr){
  console.log( data ); // test.js的内容
  console.log( textStatus ); // Success
  console.log( jqxhr.status ); // 200
});
$.getJSON();
//服务器端返回JSON格式的数据，可以使用该方法替换
$.post();
$.fn.load();
//用于获取服务器端的HTML文件，将其放入当前元素


ajax文件上传
<input type="file" id="test-input">
var file = $('#test-input')[0].files[0];
var formData = new FormData();
formData.append('file', file);
$.ajax('myserver/uploads', {
    method: 'POST',
    contentType: false,
    processData: false,
    data: formData
});
或者直接发送文件
var file = $('#test-input')[0].file[0];
$.ajax('myserver/uploads', {
    method: 'POST',
    contentType: file.type,
    processData: false,
    data: file
});