前端学习之-Ajax

什么是AJAX:翻译成中文就是“异步Javascript和XML”。


AJAX具有的特点:异步,
              浏览器页面局部刷新.


AJAX的优缺点:
优点：
        AJAX使用Javascript技术向服务器发送异步请求；
        AJAX无须刷新整个页面；
        因为服务器响应内容不再是整个页面，而是页面中的局部，所以AJAX性能高；
缺点：
        AJAX并不适合所有场景，很多时候还是要使用同步交互；
        AJAX虽然提高了用户体验，但无形中向服务器发送的请求次数增多了，导致服务器压力增大；
        因为AJAX是在浏览器中使用Javascript技术完成的，所以还需要处理浏览器兼容性问题；


AJAX技术:
四步操作：
创建核心对象；
使用核心对象打开与服务器的连接；
发送请求
注册监听，监听服务器响应。
XMLHTTPRequest:
open(请求方式, URL, 是否异步)
send(请求体)
onreadystatechange，指定监听函数，它会在xmlHttp对象的状态发生变化时被调用
readyState，当前xmlHttp对象的状态，其中4状态表示服务器响应结束
status：服务器响应的状态码，只有服务器响应结束时才有这个东东，200表示响应成功；
responseText：获取服务器的响应体.



< 1 >  $.ajax的两种写法：

$.ajax("url", {})
$.ajax({})

< 2 >  $.ajax的基本使用

$.ajax({
    url: "//",
    data: {a: 1, b: 2},
    type: "GET",
    success: function(){}
})

< 3 > 回调函数


$.ajax('/user/allusers', {

    success: function(data) {
    console.log(arguments);
},

error: function(jqXHR, textStatus, err)
{
// jqXHR: jQuery增强的xhr
// textStatus: 请求完成状态
// err: 底层通过throw抛出的异常对象，值与错误类型有关
console.log(arguments);
},

complete: function(jqXHR, textStatus)
{
// jqXHR: jQuery增强的xhr
// textStatus: 请求完成状态
success | error
console.log('statusCode: %d, statusText: %s', jqXHR.status, jqXHR.statusText);
console.log('textStatus: %s', textStatus);
},

statusCode: {
    '403': function(jqXHR, textStatus, err) {
    console.log(arguments); // 注意：后端模拟errror方式：HttpResponse.status_code = 500

},
'400': function()
{
}
}
});