前端 五——ajax

内容概要：

1.ajax的特点

2.基于JS的ajax

3.基于jQuery的ajax

---

1.特点：

局部刷新

异步传送（交互）

　　缺点：

（1）无形中向服务器发送的请求次数太多，导致服务器压力增大。

（2）需要处理浏览器兼容问题

2.基于JS的ajax

采用ajax异步方式，通过js获取form中所有input、select等组件的值，将这些值组成Json格式，通过异步的方式与服务器端进行交互，
一般将表单数据传送给服务器端，服务器端处理数据并返回结果信息等

　　用法：

1. 处理浏览器兼容问题，来创建XMLHttpRequest对象：
2. 创建XMLHttpRequest对象；
3. 调用open()方法打开与服务器的连接；
4. 调用send()方法发送请求；
5. 为XMLHttpRequest对象指定onreadystatechange事件函数，这个函数会在 XMLHttpRequest的1、2、3、4，四种状态时被调用；

<h1>AJAX</h1>
<button onclick="send()">测试</button>
<div id="div1"></div>

<script>
       function createXMLHttpRequest() {
            try {
                return new XMLHttpRequest();//大多数浏览器
            } catch (e) {
                try {
                    return new ActiveXObject("Msxml2.XMLHTTP");
                } catch (e) {
                    return new ActiveXObject("Microsoft.XMLHTTP");
                }
            }
        }

        function send() {
            var xmlHttp = createXMLHttpRequest();
            xmlHttp.onreadystatechange = function() {
                if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                    var div = document.getElementById("div1");
                    div.innerText = xmlHttp.responseText;
                    div.textContent = xmlHttp.responseText;
                }
            };

            xmlHttp.open("POST", "/ajax_post/", true);
            //post: xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xmlHttp.send(null);  //post: xmlHttp.send("b=B");
        }

</script>

#--------------------------------views.py
from django.views.decorators.csrf import csrf_exempt

def login(request):
    print('hello ajax')
    return render(request,'index.html')

@csrf_exempt   ＃csrf防御
def ajax_post(request):
    print('ok')
    return HttpResponse('helloyuanhao')

　　注：POST请求时，要在send之前，open之后加请求头

3.基于jQuery的ajax

（1）快捷API：
<1>$.get(url, [data], [callback], [type])
<2>$.post(url, [data], [callback], [type])  //type: text|html|json|script

 应用：
    //请求参数应该尽量放在data参数中，因为可以自动编码，手动拼接url要注意编码问题
    function testWithDataAndCallback() {
        //$.post...

        $.get('/user/list', {type: 1}, function (data, callbacktype, jqXHR) {
            console.log(data);//将json字符串解析成json对象
        });
    }

 －－－－－－－－－－－－－－

　　

<3>$.getScript()使用 AJAX 请求，获取和运行 JavaScript:

应用：
     function testGetScript() {
            // alert(testFun(3, 4));
            $.getScript('test.js', function () {
                alert(add(1, 6));
            });
        }

    // test.js
    function add(a,b){
       return a+b
       }

　　

<4>$.getJSON()
   与$.get()是一样的，只不过就是做后一个参数type必须是json数据了。一般同域操作用$.get()就可以，$.getJson 最主要是用来进行jsonp跨域操作的。

（2）核心API（推荐使用）

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

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

　　

<2> $.ajax的基本使用

$.ajax({
        url:"//",
        data:{a:1,b:2},   /*当前ajax请求要携带的数据，是一个json的object对象，ajax方法就会默认地把它编码成某种格式(urlencoded:?a=1&b=2)发送给服务端；*/
        dataType：   /*预期服务器返回的数据类型,服务器端返回的数据会根据这个值解析后，传递给回调函数。*/
        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 () {
}
}
});

核心API的重要字段(参数)：

<1> ----------请求数据相关: data, processData, contentType, traditional--------------

       data: 当前ajax请求要携带的数据，是一个json的object对象，ajax方法就会默认地把它编码成某种格式
             (urlencoded:?a=1&b=2)发送给服务端；此外，ajax默认以get方式发送请求。

             # function testData() {
             #   $.ajax("/test",{     //此时的data是一个json形式的对象
             #      data:{
             #        a:1,
             #        b:2
             #      }
             #   });                   //?a=1&b=2

processData：声明当前的data数据是否进行转码或预处理，默认为true，即预处理；if为false，
             # 那么对data：{a:1,b:2}会调用json对象的toString()方法，即{a:1,b:2}.toString()
             # ,最后得到一个［object，Object］形式的结果。
             # {"1":"111","2":"222","3":"333"}.toString();//[object Object]
             # 该属性的意义在于，当data是一个dom结构或者xml数据时，我们希望数据不要进行处理，直接发过去，
             # 就可以讲其设为true。

contentType：默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。
             # 用来指明当前请求的数据编码格式；urlencoded:?a=1&b=2；如果想以其他方式提交数据，
             # 比如contentType:"application/json"，即向服务器发送一个json字符串：
             #   $.ajax("/ajax_get",{
             #
             #      data:JSON.stringify({
             #           a:22,
             #           b:33
             #       }),
             #       contentType:"application/json",
             #       type:"POST",
             #
             #   });                          //{a: 22, b: 33}

             # 注意：contentType:"application/json"一旦设定，data必须是json字符串，不能是json对象

 traditional：一般是我们的data数据有数组时会用到 ：data:{a:22,b:33,c:["x","y"]},
              traditional为false会对数据进行深层次迭代；          

<2> ------------------------ 响应数据: dataType、dataFilter------------------------

dataType：预期服务器返回的数据类型,服务器端返回的数据会根据这个值解析后，传递给回调函数。
            # 默认不需要显性指定这个属性，ajax会根据服务器返回的content Type来进行转换；比如我们的服务器响应的
            # content Type为json格式，这时ajax方法就会对响应的内容进行一个json格式的转换，if转换成功，我们在
            # success的回调函数里就会得到一个json格式的对象；转换失败就会触发error这个回调函数。如果我们明确地指
            # 定目标类型，就可以使用data Type。
            # dataType的可用值：html｜xml｜json｜text｜script
            # 见下dataType实例

dataFilter: 类型：Function 给 Ajax返回的原始数据的进行预处理的函数。见下dataFilter实例

<3> 请求类型 type：

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

<4> 前置处理 beforeSend(XHR)

    类型：Function 发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头。XMLHttpRequest
    # 对象是唯一的参数。这是一个 Ajax 事件。如果返回 false 可以取消本次 ajax 请求。
    # 见下beforeSend实例
<5> jsonp  类型：String

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

<6> jsonpCallback  类型：String

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

　　

　

前端知识点补充：http://www.cnblogs.com/yuanchenqi/articles/5997456.html