Ajax基础

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

创建Ajax的步骤:

1创建Ajax对象

2连接到服务器

3发送请求

4接收返回值

oAjax.onreadystatechange = function () {
            console.log(oAjax.readyState);
            //-->2,3,4
            //0:请求未初始化(还没有调用到open方法)
            //1：服务器连接已建立（已调用到open方法）
            //2:表示请求已接收(send方法完成，已接收到全部响应内容)
            //3:请求处理中（解析响应内容）
            //4:请求成功
            console.log(oAjax.status); //--->200三次，表示成功
            //三次是2，3，4 对应的状态码都是200，表示请求成功
            //未成功404
            //如果请求路径错误，状态码则对应3次404,表示请求失败
            if (oAjax.readyState == 4 && oAjax.status == 200) {
                console.log(oAjax.responseText);
                document.querySelector("h1").innerHTML = oAjax.responseText;
            }
            //通过oAjax.responseText来获取返回数据

        }

创建Ajax对象

var oAjax=new XMLHttpRequest();

//实例化Ajax对象
var oAjax = new XMLHttpRequest();

连接到服务器

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

oAjax.open("GET", "abc.txt", true);
console.log("open", oAjax.readyState);
//参数一：GET/POST
//参数二：url 地址
//参数三：true异步请求；false同步请求

参数一：post/get

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

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

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

post/get的区别

同步异步区别

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

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

发送请求

send()

示例：oAjax.send();

接收返回值(监听状态码的改变)

oAjax.onreadystatechange=function(){
              if (oAjax.readyState==4 && oAjax.status==200){
                            alert("请求if成功"+oAjax.responseText);

              }

}

请求状态码

从 0 到 4 发生变化

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

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

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

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

4:请求成功

读取状态码：readyState

请求状态码 ( .status)status

200："OK"（2  3 4状态码对应的状态都是200）

404：未找到页面(当请求的路径（url）发送错误)

获取返回的数据：responseText

让代码执行1次，加个判断：

JSON概念

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

JSON 语法规则

数据在名称/值对中

数据由逗号分隔

大括号保存对象

中括号保存数组

JSON 名称/值对

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

示例："name" : "张三"

JSON 值

可以是数字、字符串、逻辑值、数组、对象、null