原生Ajax详解

前端之家收集整理的这篇文章主要介绍了原生Ajax详解前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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()

    终止请求

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...

2、跨浏览器支持

  • XmlHttpRequest

  • IE7+,Firefox,Chrome,Opera,etc.

  • ActiveXObject("Microsoft.XMLHTTP")

  • IE6,IE5

代码示例:

<!DOCTYPE html>
<html>
<head>
    <Meta charset="UTF-8">
    <title></title>
</head>
<body>

    <h1>XMLHttpRequest - Ajax请求</h1>
    <input type="button" onclick="XmlGetRequest();" value="Get发送请求" />
    <input type="button" onclick="XmlPostRequest();" value="Post发送请求" />

    <script src="/statics/jquery-1.12.4.js"></script>
    <script type="text/javascript">

        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', true);
            // 发送请求
            xhr.send();
        }

    </script>

</body>
</html>


猜你在找的Ajax相关文章