Ajax概念

Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术

之前是通过form表单提交数据,但是会造成整个页面的重新加载.

创建Ajax的步骤

创建Ajax对象

连接到服务器

发送请求

接收返回值

创建Ajax对象

var oAjax=new XMLHttpRequest();

   实例化对象           构造函数

连接到服务器

open(方法，文件名，同步异步)

参数一：post/get

参数二：请求的文件名(文件路径)

参数三：同步（false）  异步（true）

oAjax.open("GET","abc.txt",true);

post/get的区别

同步异步区别

同步交互：指发送一个请求，需要等待返回，然后才能够发送下一个请求，有个等待过程

异步交互：指发送一个请求，不需要等待返回，随时可以再发送下一个请求，即不需要等待

发送请求

send()

示例：oAjax.send();

接收 返回值  oAjax.onreadystatechange

可通过 Ajax.responseText 来获取返回的数据

但是会监听到三次状态码,因此我们 需要判断来让代码只执行一次

oAjax.onreadystatechange(监听状态码的改变)=function(){

if (oAjax.readyState==4 && oAjax.status==200){

alert("请求成功"+oAjax.responseText);

}

}

请求状态码 oAjax.readyState

从 0 到 4 发生变化

0: 请求未初始化（还没有调用到open方法）

1: 服务器连接已建立（已调用send方法，正在发生请求）

2: 请求已接收（send方法完成，已接收到全部响应内容）

3: 请求处理中（解析响应内容）

4:请求成功

请求状态码  oAjax.status

2..3.4的状态码都是200

200："OK"

404：未找到页面(路径错误就会显示404)

<script>

        // 创建Ajax对象

        var oAjax = new XMLHttpRequest();

        // 连接到服务器

        oAjax.open("GET", "a.html", true);

        // 发送请求

        oAjax.send();

        // 接收返回值

        oAjax.onreadystatechange = function () {

            if (oAjax.readyState == 4 && oAjax.status == 200) {

                document.write("请求成功" + oAjax.responseText);

            }

        }

    </script>

 

练习1：

Ajax读取text文本

使用Ajax技术，读取text文本

text文本里面具体内容可自定义

<script>

        // 创建Ajax对象

        var oAjax = new XMLHttpRequest();

        // 连接到服务器

        oAjax.open("GET", "a.html", true);

        // 发送请求

        oAjax.send();

        // 接收返回值

        oAjax.onreadystatechange = function () {

            if (oAjax.readyState == 4 && oAjax.status == 200) {

                document.write("请求成功" + oAjax.responseText);

            }

        }

    </script>

JSON概念

JSON是一种轻量级的数据交换格式，它基于 ECMAScript 的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据

JSON 语法规则

数据在名称/值对中

数据由逗号分隔

大括号保存对象

中括号保存数组

JSON 名称 / 值对

JSON 数据的书写格式是：名称/值对

示例："name" : "张三"(注意点是,必须要加双引号在JSON文件里)

JSON 值

可以是数字、字符串、逻辑值、数组、对象、null( 以逗号为分割,最后一个值不加逗号)

{

    "id": null,

    "name": "zhangsan",

    "age": 30,

    "flag": true,

    "arr": [

        {

            "a": 10,

            "aa": 100

        },

        {

            "b": 20,

            "bb": 200

        }

    ],

    "arr1": [

        "前端",

        "Java",

        "大数据"

    ],

    "obj": {

        "school": "清华大学"

    }

}

JSON值

 练习题:如果通过按钮获得JSON中arr的值 两种写法

<button onclick="huoqu()">点击获取</button>

    <ul></ul>

    <script>

        var ul = document.querySelector("ul")

        function huoqu() {

            // 创建Ajax对象

            var oAjax = new XMLHttpRequest();

            // 连接到服务器

            oAjax.open("GET", "a.JSON", true);

            // 发送请求

            oAjax.send();

            // 接收返回值

            oAjax.onreadystatechange = function () {

                if (oAjax.readyState == 4 && oAjax.status == 200) {

                    var list = JSON.parse(oAjax.responseText);

                    // 第一种方式创建节点插入父元素中

                    // for (var i = 0; i < list.arr.length; i++) {

                    //     var li = document.createElement("li");

                    //     var text = document.createTextNode(list.arr[i].content);

                    //     li.appendChild(text);

                    //     ul.appendChild(li)

                    // }

                    // 第二种方式,使用字符串拼 结合innerHTML 覆盖到ul里面,由于是覆盖所以只显示一遍,只后都是被覆盖

                    var str = "";

                    for (var i = 0; i < list.arr.length; i++) {

                        str += "<li>" + list.arr[i].content + "</li>"

                    }

                    ul.innerHTML = str;

                }

            }

        }

    </script>