专栏首页天天Ajax(20171101)

Ajax(20171101)

1.ajax

AJAX = 异步 JavaScript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。
这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。

2.创建 XMLHttpRequest 对象

eg:
 var xhr = null;
        if (window.XMLHttpRequest) {
          //所有现代浏览器(IE7+、Firefox、Chrome、Safari 以及 Opera)
          //均内建 XMLHttpRequest 对象。
            xhr = new XMLHttpRequest();
        } else {
          //老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveX 对象:
            xhr = new ActiveXObject('Microsoft.XMLHTTP');
        }

3.向服务器发送请求

与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。 然而,在以下情况中,请使用 POST 请求: a)无法使用缓存文件(更新服务器上的文件或数据库) b)向服务器发送大量数据(POST 没有数据量限制) c)发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠

4.服务器响应

如需获得来自服务器的响应,请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
属性  描述
   responseText 获得字符串形式的响应数据。
  responseXML   获得 XML 形式的响应数据。

5.onreadystatechange 事件

当请求被发送到服务器时,我们需要执行一些基于响应的任务。
每当 readyState 改变时,就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。

6.处理服务器返回的数据

将服务器返回的数据渲染到页面上
案例一-----------------------------------------------------------
(后台文件为json格式)


eg:
样式:
<style>
        .con {
            width: 600px;
            margin: 100px auto;
            padding: 20px;
            border: 1px solid #eee;
        }
        .con table {
            border-bottom: 1px solid #eee;
            font-size: 16px;
            font-weight: 800;
            line-height: 2em;
            text-align: center;
            width: 100%;
        }
        .con table thead{
            text-align: center;
        }
        .con table td{
            border:1px solid #eee ;
            padding: 5px 10px;
        }
        .con table td:nth-of-type(1){
            text-align: right;
        }
        .con table td:nth-of-type(2){
            text-align: left;
        }
    </style>
结构:
<div class="con">
   <table id="information">
       <thead><tr><th colspan="3">北京空气状况</th></tr></thead>

   </table>
</div>

ajax:
      //执行函数
    showInfo();
    //封装函数
    function showInfo() {
        var information = document.getElementById("information");
        var info_tbody = document.createElement("tbody");
        information.appendChild(info_tbody);
        info_tbody.innerHTML = "";
        var xhr = null;
        //兼容处理,创建XMLHttpRequest对象,下图有转化后的内容截图
        if (window.XMLHttpRequest) {
            xhr = new XMLHttpRequest();
        } else {
            xhr = new ActiveXObject('Microsoft.XMLHTTP');
        }
        xhr.open("get","tq.json");
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                //将返回的数据转化成json格式
                var data =JSON.parse(xhr.responseText);
               for(var i in data.data){
                    if(i=="yesterday"){
                        var trye = document.createElement("tr");
                        var tdye = document.createElement("td");
                        tdye.innerHTML=i;
                        trye.appendChild(tdye);
                        var tdye1 = document.createElement("td");
                        var stri="";
                        for(var s in data.data.yesterday){
                            stri+=data.data.yesterday[s]
                        }
                        tdye1.innerHTML =stri;
                        trye.appendChild(tdye1);
                        info_tbody.appendChild(trye);
                    }else if(i=="forecast"){
                        var trf = document.createElement("tr");
                        var tdf = document.createElement("td");
                        tdf.innerHTML=i;
                        trf.appendChild(tdf);
                        var tdf1 = document.createElement("td");
                        for(var j in data.data.forecast){
                            var pt = document.createElement("p");
                            var str="";
                            for(var m in data.data.forecast[j]){
                                str+=data.data.forecast[j][m]
                            }
                            pt.innerHTML = str;
                            tdf1.appendChild(pt);
                        }
                        trf.appendChild(tdf1);
                        info_tbody.appendChild(trf);
                    }else{
                        var trtag = document.createElement("tr");
                        trtag.innerHTML="<td>"+i+"</td><td>"+data.data[i]+"</td>";
                        info_tbody.appendChild(trtag);
                    }

               }
            }
        };
        xhr.send();
    }

案例二----------------------------------------------------------- (后台文件为xml格式) 其他内容一样只是数据处理稍有差别 showInfo(); function showInfo() { var xhr = null; if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else { xhr = new ActiveXObject('Microsoft.XMLHTTP'); } xhr.open('get', 'tq.xml'); xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) { var data = xhr.responseXML; // var tbody =document.createElement("tbody"); //读取XML数据 var resp = data.getElementsByTagName("resp")[0];//不同的地方 var city = resp.getElementsByTagName("city")[0]; var dttag = document.createElement("dt"); dttag.innerHTML = city.textContent;//获得元素的文本属性 ....... } }; xhr.send(); }

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 文档片段(createDocumentFragment)

    天天_哥
  • DOM

    天天_哥
  • Canvas

    天天_哥
  • Ajax笔记

    本文主要是我学习ajax的笔记,不涉及到原理,只是记录如何使用。如果有错欢迎各位大佬指出。提前先转一篇写的非常全面的博客你真的会使用XMLHttpRequest...

    bamboo
  • 第110天:Ajax原生js封装函数

    半指温柔乐
  • 《大胖 • 小课》- 玩玩多文件配多进度上传

    这是《大胖小课》栏目的专题一《说说文件上传那些事儿》的第4节-《玩玩多文件配多进度上传》

    zz_jesse
  • 原生AJAX请求教程

    ajax 即 Asynchronous Javascript And XML,AJAX 不是一门的新的语言,而是对现有持术的综合利用。本质是在 HTTP 协议的...

    老马
  • Web前端-Ajax基础技术(下)

    ajax,web程序是将信息放入公共的服务器,让所有网络用户可以通过浏览器进行访问。

    达达前端
  • XMLHttpRequest使用指南大全

    我们通常将Ajax等同于XMLHttpRequest,但细究起来它们两个是属于不同维度的2个概念。

    空空云
  • 你真的会使用XMLHttpRequest吗?

    我们通常将Ajax等同于XMLHttpRequest,但细究起来它们两个是属于不同维度的2个概念。

    用户2458785

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动