原生Ajax--XmlHttpRequest对象

Posted sun96

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了原生Ajax--XmlHttpRequest对象相关的知识,希望对你有一定的参考价值。

Ajax主要就是使用 【XmlHttpRequest】对象来完成请求的操作,该对象在主流浏览器中均存在(除早起的IE)

1、XmlHttpRequest对象介绍

XmlHttpRequest对象的主要方法:

技术分享图片
a. void open(String method,String url,Boolen async)
   用于创建请求
    
   参数:
       method: 请求方式(字符串类型),如:POST、GET、DELETE...
       url:    要请求的地址(字符串类型)
       async:  是否异步(布尔类型)
 
b. void send(String body)
    用于发送请求
 
    参数:
        body: 要发送的数据(字符串类型)
 
c. void setRequestHeader(String header,String value)
    用于设置请求头
 
    参数:
        header: 请求头的key(字符串类型)
        vlaue:  请求头的value(字符串类型)
 
d. String getAllResponseHeaders()
    获取所有响应头
 
    返回值:
        响应头数据(字符串类型)
 
e. String getResponseHeader(String header)
    获取响应头中指定header的值
 
    参数:
        header: 响应头的key(字符串类型)
 
    返回值:
        响应头中指定的header对应的值
 
f. void abort()
 
    终止请求
原生Ajax方法

XmlHttpRequest对象的主要属性:

技术分享图片
a. Number readyState
   状态值(整数)
 
   详细:
      0-未初始化,尚未调用open()方法;
      1-启动,调用了open()方法,未调用send()方法;
      2-发送,已经调用了send()方法,未接收到响应;
      3-接收,已经接收到部分响应数据;
      4-完成,已经接收到全部响应数据;
 
b. Function onreadystatechange
   当readyState的值改变时自动触发执行其对应的函数(回调函数)
 
c. String responseText
   服务器返回的数据(字符串类型)
 
d. XmlDocument responseXML
   服务器返回的数据(Xml对象)
 
e. Number states
   状态码(整数),如:200、404...
 
f. String statesText
   状态文本(字符串),如:OK、NotFound...
原生Ajax属性
技术分享图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<input type="button" value="ajax" onclick="ajax1();"/>

<script>

    function ajax1() {

        var xhr= new XMLHttpRequest();   //创建对象
        xhr.open(GET,/xiaoqing/ajax_json,true);
        xhr.send(name=root;pwd=123);

        xhr.onreadystatechange= function() {

            if (xhr.readyState==4){
                var obj=JSON.parse(xhr.responseText);   //返回值
                console.log(obj);
            }
        }

    }

</script>


</body>
</html>
ajax.html
技术分享图片
import json
def ajax_json(request):
    ret = {status:True,data:None}

    return HttpResponse(json.dumps(ret),status=404,reason="Not Found")
views.py

 如果是post请求发过去:

技术分享图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<input type="button" value="ajax" onclick="ajax1();"/>
<script src="/static/jquery-3.2.1.min.js"></script>
<script src="/static/jquery.cookie.js"></script>
<script>
    var csrftoken = $.cookie(csrftoken);
    function ajax1() {

        var xhr= new XMLHttpRequest();   //创建对象
        xhr.open(POST,/xiaoqing/ajax_json/,true);

        xhr.setRequestHeader(Content-Type,application/x-www-form-urlencoded; charset-UTF-8);//POST请求必须设置
        xhr.setRequestHeader(X-CSRFtoken,csrftoken);  #csrf_token 请求头
        xhr.send(name=root;pwd=123);


        xhr.onreadystatechange = function() {

            if (xhr.readyState == 4){
                var obj = JSON.parse(xhr.responseText);   //返回值
                console.log(obj);
                console.log(csrftoken);
            }
        }


    }

</script>


</body>
</html>
POST请求需设置请求头

 兼容IE

 function GetXHR(){
            var xhr = null;
            if(XMLHttpRequest){
                xhr = new XMLHttpRequest();
            }else{
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            return xhr;

        }

        function XhrPostRequest(){
            var xhr = GetXHR();
            // 定义回调函数
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    // 已经接收到全部响应数据,执行以下操作
                    var data = xhr.responseText;
                    console.log(data);
                }
            };
            // 指定连接方式和地址----文件方式
            xhr.open(POST, "/test/", true);
            // 设置请求头
            xhr.setRequestHeader(Content-Type, application/x-www-form-urlencoded; charset-UTF-8);
            // 发送请求
            xhr.send(n1=1;n2=2;);
        }

        function XhrGetRequest(){
            var xhr = GetXHR();
            // 定义回调函数
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    // 已经接收到全部响应数据,执行以下操作
                    var data = xhr.responseText;
                    console.log(data);
                }
            };
            // 指定连接方式和地址----文件方式
            xhr.open(get, "/test/", true);
            // 发送请求
            xhr.send();
        }

    </script>

 


以上是关于原生Ajax--XmlHttpRequest对象的主要内容,如果未能解决你的问题,请参考以下文章

原生Ajax(XMLHttpRequest)

转载并整理AJAX XmlHttpRequest对象详解

Ajax操作

02AJAX XMLHttpRequest对象

Ajax技术

不同浏览器创建 ajax XMLHTTPRequest对象的方法及兼容性问题总结