小君大帅比前端开发 2020-04-27

Django框架中的Ajax操作原生ajax发送GET、POST请求浏览器兼容处理

前面我们上传文件采用的时form表单的形式，我们也可以使用ajax来实现文件的上传。ajax包括原生的ajax、jquery、伪ajax三种。

Ajax主要就是使用【XmlHttpRequest】对象来完成请求的操作，该对象在主流浏览器中均存在(除早起的IE)，Ajax首次出现IE5.5中存在（ActiveX控件）。

XmlHttpRequest对象的主要方法：

1. void open(String method,String url,Boolen async)
   用于创建请求
    
   参数：
       method： 请求方式（字符串类型），如：POST、GET、DELETE...
       url：    要请求的地址（字符串类型）
       async：  是否异步（布尔类型）
 
2. void send(String body)
    用于发送请求
 
    参数：
        body： 要发送的数据（字符串类型）
 
3. void setRequestHeader(String header,String value)
    用于设置请求头
 
    参数：
        header： 请求头的key（字符串类型）
        vlaue：  请求头的value（字符串类型）
 
4. String getAllResponseHeaders()
    获取所有响应头
 
    返回值：
        响应头数据（字符串类型）
 
5. String getResponseHeader(String header)
    获取响应头中指定header的值
 
    参数：
        header： 响应头的key（字符串类型）
 
    返回值：
        响应头中指定的header对应的值
 
6. void abort()
 
    终止请求

那么现在创建一个ajax路由规则，定义视图函数并创建ajax模板，json路由用于接收信息：


ajax视图函数
def ajax(request):
    return render(request,'ajax.html')
json视图函数
def json(request):
    reg={'status':True,'data':None}  #定义一个字典
    import json  #转换为字符串
    return HttpResponse(json.dumps(reg))
ajax.html
<input type="button" value="ajax提交" onclick="Ajax();">
<script>
    function Ajax() {
        var xhr=new XMLHttpRequest(); /*创建对象*/
        xhr.open('GET','/json/', true)  /*get方式 提交到index页面 异步*/
        xhr.send("name=root ; pwd=123");  /*以字符串的形式发送数据  注意分号*/
    }
</script>

XmlHttpRequest对象的主要属性：

    
1. Number readyState
   状态值（整数）
 
   详细：
      0-未初始化，尚未调用open()方法；
      1-启动，调用了open()方法，未调用send()方法；
      2-发送，已经调用了send()方法，未接收到响应；
      3-接收，已经接收到部分响应数据；
      4-完成，已经接收到全部响应数据；
 
2. Function onreadystatechange
   当readyState的值改变时自动触发执行其对应的函数（回调函数）
 
3. String responseText
   服务器返回的数据（字符串类型）
 
d. XmlDocument responseXML
   服务器返回的数据（Xml对象）
 
4. Number states
   状态码（整数），如：200、404...
 
5. String statesText
   状态文本（字符串），如：OK、NotFound...

修改ajax.html页面的js函数：

<input type="button" value="ajax提交" onclick="Ajax();">
<script>
    function Ajax() {
        var xhr=new XMLHttpRequest(); /*创建对象*/
        xhr.open('GET','/json/', true)  /*get方式 提交到index页面 异步*/
        xhr.onreadystatechange=function () {    /* readyState中状态发生变化的时候执行这个函数 */
                if(xhr.readyState===4){
                    //接收完毕
                    console.log(xhr.responseText);  //接受服务器返回的字符串 {'status':True,'data':None}
                 }
       }
        xhr.send("name=root ; pwd=123");  /*以字符串的形式发送数据  注意分号*/
    }
</script>

以上是发送的get请求，如果想要发送post请求，使用以上代码在服务器端就拿不到post的数据，这里需要设置请求头：

<input type="button" value="ajax提交" onclick="Ajax();">
<script>
    function Ajax() {
        var xhr=new XMLHttpRequest(); /*创建对象*/
        xhr.open('POST','/json/', true)  /*get方式 提交到index页面 异步*/
        xhr.onreadystatechange=function () {    /* readyState中状态发生变化的时候执行这个函数 */
                if(xhr.readyState===4){
                    //接收完毕
                    var obj=JSON.parse(xhr.responseText)
                 }
       }
       // 设置请求头
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');
        xhr.send("name=root ; pwd=123");  /*以字符串的形式发送数据  注意分号*/
    }
</script>

如果你没有设置请求头，那么在服务器后台就拿不到数据，一般出错都在这里，需要注意。

跨浏览器支持

XmlHttpRequest
IE7+, Firefox, Chrome, Opera, etc.
ActiveXObject("Microsoft.XMLHTTP")
IE6, IE5

对于浏览器兼容就是XMLHttpRequest这句，我们可以写为window.XMLHttpRequest,具体可以进行一个判断：

<input type="button" value="ajax提交" onclick="Ajax();">
<script>
     function getXHR(){
            var xhr = null;
            if(XMLHttpRequest){  //如果存在
                xhr = new XMLHttpRequest();
            }else{  //如过没有
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            return xhr;

        }
    function Ajax() {
        var xhr=getXHR();
        xhr.open('POST','/json/', true)  /*get方式 提交到index页面 异步*/
        xhr.onreadystatechange=function () {    /* readyState中状态发生变化的时候执行这个函数 */
                if(xhr.readyState===4){
                    //接收完毕
                    var obj=JSON.parse(xhr.responseText)
                 }
       }
       // 设置请求头
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');
        xhr.send("name=root ; pwd=123");  /*以字符串的形式发送数据  注意分号*/
    }
</script>

原生ajax请求