Ajax请求

Ajax即Asynchronous Javascript And XML；这不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。

Ajax技术的核心是XMLHttpRequest对象（简称XHR），XHR为向服务器发送请求和解析服务器响应提供了流畅的接口。能够以异步方式从服务器取得更多信息，意味着用户单击后，可以不必刷新页面也能取得新数据。也就是说，可以使用XHR 对象取得新数据，然后再通过DOM 将新数据插入到页面中。这种技术就是无须刷新页面即可从服务器取得数据，但不一定是XML数据。

XMLHttpRequest对象

使用XMLHttpRequest (XHR)对象可以与服务器交互。可以从URL获取数据，而无需让整个的页面刷新。这使得Web页面可以只更新页面的局部，而不影响用户的操作。

对象方法

XMLHttpRequest()

构造函数初始化一个 XMLHttpRequest 对象。必须在所有其他方法被调用前调用构造函数。

open(method, url, async)

初始化一个请求。调用open()方法并不会真正发送请求，而只是启动一个请求以备发送；

• method, 要使用的HTTP方法，比如GET，POST，PUT，DELETE等；
• url, 一个要向其发送请求的URL；
• async, 是否异步执行操作，默认为true。

setRequestHeader(header, value)

设置HTTP请求头部的方法。此方法必须在open()方法和 send()之间调用。如果多次对同一个请求头赋值，只会生成一个合并了多个值的请求头。如果没有设置Accept属性，则此发送出send()的值为此属性的默认值*/*。

send(data)

用于发送 HTTP 请求。如果是异步请求（默认为异步请求），则此方法会在请求发送后立即返回；如果是同步请求，则此方法直到响应到达后才会返回。如果请求方法是GET或者HEAD，则应将请求主体设置为null。

abort()

如果请求已被发出，此方法将该请求终止。当一个请求被终止，它的readyState属性将被置为0。

对象属性

readyState

返回一个XMLHttpRequest对象当前所处的状态；

• 0, 代理被创建，但尚未调用open()方法。
• 1, open()方法已经被调用。
• 2, send()方法已经被调用，响应头和状态已经可获得。
• 3, 响应体部分正在被接收，responseText属性已经包含部分数据。
• 4, 请求操作已经完成。

onreadystatechange

会在XMLHttpRequest的readyState属性发生改变时触发readystatechange事件的时候被调用。

responseText

返回一个DOMString，它包含对文本的请求的响应，如果请求不成功或尚未发送，则返回null；responseText属性在请求完成之前将会得到部分属性。

status

返回了XMLHttpRequest响应中的数字状态码。

statusText

返回了XMLHttpRequest请求中的状态文本信息。

timeout

请求超时时间，单位毫秒。

示例

GET请求

GET是最常见的请求类型，最常用于向服务器查询某些信息。必要时，可以将查询字符串参数追加到URL 的末尾，以便将信息发送给服务器。

<script>
    //获取按钮节点
    var btn = document.getElementById('submit');
    //按钮节点添加点击事件
    btn.onclick = function(){
        //实例化一个XMLHttpRequest对象
        var xhr = new XMLHttpRequest();
        //设置readyState改变后的回调函数
        xhr.onreadystatechange = function(){
            //请求已经完成，并且状态码为200
            if(xhr.readyState === 4 && xhr.status === 200){
                console.log(xhr.status);  //200
                console.log(xhr.statusText);  //OK
                data = JSON.parse(xhr.responseText)  //解析后端返回的JSON数据
                console.log(data);  //{user: "root", city: "beijing", job: "teacher"}
            }
        };
        //初始化一个GET请求
        xhr.open('GET', '/app/ajax2.html?user=root&pwd=123');
        //设置请求头信息
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');
        //设置请求超时时间
        xhr.timeout = 300;
        //发送请求
        xhr.send(null);
    };
</script>

基于django的后端代码

# url为/ajax2.html的views
from django.http import HttpResponse
import json

def ajax2(req):
    # 获取前端请求的信息
    user = req.GET.get('user')
    # 需要返回给前端的数据
    data = {'user': user, 'city': 'beijing', 'job': 'teacher'}
    # 序列化为JSON格式数据
    return HttpResponse(json.dumps(data))

POST请求

POST请求，通常用于向服务器发送应该被保存的数据。POST请求把数据作为请求的主体提交。POST请求的主体可以包含非常多的数据，而且格式不限。

<input type="button" value="submit" id="submit">
<script>
    //获取按钮节点
    var btn = document.getElementById('submit');
    //按钮节点添加点击事件
    btn.onclick = function(){
        //实例化一个XMLHttpRequest对象
        var xhr = new XMLHttpRequest();
        //设置readyState改变后的回调函数
        xhr.onreadystatechange = function(){
            //请求已经完成，并且状态码为200
            if(xhr.readyState === 4 && xhr.status === 200){
                console.log(xhr.status);  //200
                console.log(xhr.statusText);  //OK
                var data = JSON.parse(xhr.responseText);  //解析后端返回的JSON数据
                console.log(data);  //{user: "root", city: "beijing", job: "teacher"}
            }
        };
        //初始化一个POST请求
        xhr.open('POST', '/app/ajax2.html');
        //设置请求头信息
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');
        //设置请求超时时间
        xhr.timeout = 300;
        //发送请求数据
        xhr.send("user=root;pwd=123;");
    };
</script>

基于django的后端代码

# url为/ajax2.html的views
from django.http import HttpResponse
import json

def ajax2(req):
    # 获取前端POST请求的信息
    user = req.POST.get('user')
    # 需要返回给前端的数据
    data = {'user': user, 'city': 'beijing', 'job': 'teacher'}
    # 序列化为JSON格式数据
    return HttpResponse(json.dumps(data))

跨域请求

默认情况下，XHR对象只能访问与包含它的页面位于同一个域中的资源，这种安全策略可以预防某些恶意行为。

实现合理的跨域请求对开发某些浏览器应用程序也是至关重要的。

JSONP

JSONP(JSON with padding)，是应用JSON 的一种新方法，JSONP看起来与JSON差不多，只不过是被包含在函数调用中的JSON。JSONP由两部分组成：回调函数和数据。回调函数是当响应到来时在前端页面中调用的函数。回调函数的名字一般是在请求中指定的，传递给后端。而数据就是后端传入回调函数中的JSON数据。

JSONP是通过动态<script>元素来使用的，使用时可以为src属性指定一个跨域URL。因为JSONP是有效的JavaScript代码，所以在请求完成后，即在JSONP响应加载到页面中以后，就会立即执行。

<script>
    function handleResponse(data){
        console.log("user:"+data.user);
        console.log("city:"+data.city);
        console.log("job:"+data.job);
    }
</script>
<!-- 添加script标签，src指定请求跨域URL，callback指定回调函数名，callback也是自定义的，后端用它来获取回调函数名 -->
<script src="/app/ajax2.html?callback=handleResponse"></script>

后端处理请求时，只需获取前端的回调函数名，然后与数据一起返回给前端

#view.py
def ajax2(request):
    #获取前端定义的函数名
    func = request.GET.get('callback', 'handleResponse')
    #需要返回给前端的数据
    data = {'user': 'admin', 'city': 'beijing', 'job': 'teacher'}
    #向前端返回数据，回调函数+数据
    return HttpResponse('%s(%s)' % (func,data))