原生Ajax

Eric 发布于2019-08-21 11:32 / 671人阅读

摘要：异步的创建一个对象以下如果是方法要给传参数并且要设置请求头等待服务器返回的内容工作状态初始化正在发送发送完成正在解析完成请求返回的内容就被存放在这个属性下面当状态值发生改变的时候触发服务器状态状态码将获取到的数据转换成对象循环获得到

Ajax 异步的JavaScript and XML

window.onload = function(){
    var btn = document.getElementById("btn");
    btn.onclick = function(){
    // 1.创建一个ajax对象
        // ie6以下 ActiveXObject("Microsoft.XMLHTTP")
        if(window.XMLHttpRequest){
            var xhr = new XMLHttpRequest();
        }else{
            var xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }

        xhr.open("get","getlist.php","true");
        xhr.send();
        /*
        如果是post方法要给send传参数data,并且要设置请求头;
        xhr.open("post","getlist.php","true");
        xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
        xhr.send(data);
        */

        //等待服务器返回的内容
        /*
            readyState: ajax工作状态 0初始化 1正在发送 2发送完成 3正在解析 4完成
            responseText: ajax请求返回的内容就被存放在这个属性下面
            onreadystatechange：当readyState状态值发生改变的时候触发

            status：服务器状态 http状态码
        */
        xhr.onreadystatechange = function(){
            if (xhr.readyState == 4) {
                if (xhr.status == 200) {
                    //alert(xhr.responseText);
                    
                    var data = JSON.parse(xhr.responseText); //将获取到的数据转换成对象
                    var list = document.getElementById("list");
                    var html = "";
                    for(var i = 0; i < data.length;i++){ //循环获得到的新闻数组
                        html +="" + data[i].title + " [" + data[i].date + "]"
                    }

                    list.innerHTML = html;//innerHTML改变元素里的内容
                        
                }else{
                    alert("出错了，error:" + xhr.status);
                };
            };
        }
    }
}

补充


//JSON.stringify()将对象转换成字符串
var arr = [1,2,3];
alert(JSON.stringify(arr));

var arr = {left:100};
alert(JSON.stringify(arr));

//JSON.parse() 将数组字符串转换成对象
var string = "[100,200,300]";
var date = JSON.parse(string);
alert(date[0]);

var string = "{"left":100}";//★JSON的键名必须用双引号★
var date = JSON.parse(string);
alert(date.left);

云服务器 GPU云服务器原生ajax 原生php ajax ajax原生js实现原生js封装ajax

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86836.html

原生JS与jQuery对AJAX的实现

摘要：原生与对的实现一定义里这么解释异步的和。二原生实现所有现代浏览器以及均内建对象。一般是正常未找到页面，一般是错误，或者后台没有创建相应的内部服务错误，多为后台错误。基本上通过发送的数据及传回的数据就能定位问题所在了。原生JS与jQuery对AJAX的实现一、定义 W3C里这么解释AJAX： AJAX = Asynchronous JavaScript and XML（异步的 Jav...

Chaz 2019-08-21 10:37 评论0 收藏0
原生JS封装ajax以及request

摘要：一封装原生的为类以及用法见之前的文章根据确定请求的头部以及别的信息。二封装实用性的类在项目中经常需要将进行封装，使用类发起请求。请求不带请求带请求不带请求带请求不带请求带这个方法感觉可以再次进行封装。完整代码点击查看以上。一、封装原生的xhr为ajax类 xhr以及用法见之前的文章 1、根据url确定请求的头部以及别的信息。 var _headerConfig = {}; ...

james 2019-08-23 13:10 评论0 收藏0
原生javaScript实现Ajax 和 jQuery实现Ajax

摘要：作者后台使用的是语言，所以这里以后台为例子不影响学习一原生使用方法创建对象兼容处理处理低版本不兼容问题准备发送请求方式接口参数名参数值异步执行发送回调是表示数据解析完成，后台处理完成了。是表示处理的结果是的。作者后台使用的是php语言，所以这里以php后台Api为例子,不影响学习Ajax 一、 javaScript原生使用Ajax 1.get方法 //1.创建对象兼容处理 var ...

ssshooter 2019-08-23 17:03 评论0 收藏0
原生JS封装AJAX请求

摘要：一直在用方法来写请求，用的多了，不免对这其中是怎么实现的产生了兴趣，于是乎，小弟闲来无聊研究了一下原生实现请求，网上看了很多前辈们的关于请求的封装方法，也借鉴了很多经验，于是乎就出现了小弟的一个原生封装的版本，希望大家看了之后能够明白，下面一直在用jQuery方法来写ajax请求，用的多了，不免对这其中是怎么实现的产生了兴趣，于是乎，小弟闲来无聊研究了一下原生实现ajax请求，网上看...

newsning 2019-08-02 15:56 评论0 收藏0
原生JS封装AJAX请求

摘要：一直在用方法来写请求，用的多了，不免对这其中是怎么实现的产生了兴趣，于是乎，小弟闲来无聊研究了一下原生实现请求，网上看了很多前辈们的关于请求的封装方法，也借鉴了很多经验，于是乎就出现了小弟的一个原生封装的版本，希望大家看了之后能够明白，下面一直在用jQuery方法来写ajax请求，用的多了，不免对这其中是怎么实现的产生了兴趣，于是乎，小弟闲来无聊研究了一下原生实现ajax请求，网上看...

hiyang 2019-08-30 13:08 评论0 收藏0