Ajax介绍和基本使用

JavaWeb学习大纲传送门

本章学习目录

问题的引出：当我们界面，只需要更新部分数据时，难道还要将页面全部刷新，消耗多余资源吗？
问题的解决：Ajax 在浏览器与 Web 服务器之间使用异步数据传输，这样就可使网页从服务器请求少量的信息，而不是整个页面。
页内目录
一，Ajax的介绍
二，传统的将数据展示于客户端的方式
三，基于Ajax的方式
四，Ajax的基本使用
五，JSON的简单基本语法
六，JSON的简单基本语法

一，Ajax的介绍

Ajax的全称：异步的JavaScript和XML
Ajax是一个异步传输技术，即与服务器交互的一种技术，实现了页面内的部分内容与服务器之间的交互，使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。，比如，网页游戏，视频播放的实现
Ajax本身不是一个新技术，而是多个技术的结合体，而JavaScript是Ajax的核心技术
目前的开发主要使用JSON进行数据交互

二，传统的将数据展示于客户端的方式

流程：

三，基于Ajax的方式

流程：

四，Ajax的基本使用

XMLHttpRequest：在Ajax处理中存在一个核心对象，该对象内嵌在浏览器中，并且属于JavaScript，Ajax依靠该对象向服务端发送请求，并对服务端回传的响应进行处理
xmlHttpRequest.onreadystatechange=function(){}：当请求readyState和响应status状态发生改变时，都会执行onreadystatechange事件所指的函数（即回调函数），Ajax的功能性代码都会写在回调函数中
xmlHttpRequest.readyState：存有XMLHttpRequest的状态，从0到4变化：0：请求未初始化；1：服务器连接已建立；2：请求已接收；3：请求处理中；4：请求已完成，且响应已就绪；
xmlHttpRequest.status：200：“响应成功”；404：未找到页面；
xmlHttpRequest.open(参数一，参数二)：建立与服务端的连接(告诉XMLHttpRequest对象请求方式参数一和要请求的服务器地址参数二)
xmlHttpRequest.responseText：获得服务端回传数据
xmlHttpRequest.setRequestHeader("content-Type","application/x-www-form-urlencoded")：post请求方式必须设置的请求头信息
xmlHttpRequest.send(""):发送请求

其他常用方法：

document.querySelectorAll("")：通过选择器querySelector返回一个NodeList 对象表示节点的集合，常见 table tbody
document.createElement("")：创建对象，常见的有：行对象tr，列对象td，超链接对象a
对象一.appendChild(对象二)：将对象二添加到对象一中
对象.colSpan="5"：跨列数
对象.innerHTML="":设置或返回表格行的开始和结束标签之间的 HTML#### 五，

五，Ajax的基本流程

java">    function ajaxDemo(){
        //创建XMLHttpRequest对象
        var xmlHttpRequest = new XMLHttpRequest();
        //建立与服务端的连接(告诉XMLHttpRequest对象要请求的服务器地址和请求方式)
        xmlHttpRequest.open("GET","ajaxDemo.do?operate=ajaxDemo");
        //注册回调函数,当请求状态发生改变时执行(客户端向服务器发送请求的状态会变化多次)
        //onreadystatechange事件，表示请求状态改变事件
        xmlHttpRequest.onreadystatechange=function(){//匿名函数
            //xmlHttpRequest.readyState请求状态码
            //xmlHttpRequest.status：响应状态码
            //只有当请求状态码为4并且响应状态为200时，才表示请求响应成功
            if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200){
                //获得服务端回传的数据
                let txt = xmlHttpRequest.responseText;
            }
        }
        //发送请求
        xmlHttpRequest.send(null);
    }

六，JSON的简单基本语法

JSON字符串

java">    function jsonStr() {
        //声明json字符串和JavaScript字符串一样
        let str="abc";
        alert(str)
    }

JSON对象

java">    function jsonObj() {
        //声明一个json对象
        let jsonObj={
            "stuid":10,
            "stuName":"小王",
            "stuSex":"男",
            "stuAge":20,
            "stuAddress": {
                          "provice":"陕西省",
                          "city":"宝鸡市"
                          }
        };
        //for...in语法在遍历js对象时获得的时属性名
        // for(let obj in jsonObj){
        //     alert(jsonObj[obj])
        // }
        alert(jsonObj.stuAddress.provice)
    }

JSON数组

java">function jsonArr() {
        //声明json数组
        let jsonArr=["aaa","bbb","ccc"];

        jsonArr[4]="eee";//使用下标添加元素
        jsonArr.push("ddd","sdad");//向末尾添加元素
        //for..in语法获得的是数组下标
        // for (let str in jsonArr){
        //     alert(jsonArr[str])
        // }
        //for..of语法遍历数组的元素
        for (let st of jsonArr){
            alert("of")
            alert(st)
        }
    }

JSON对象数组

java">    function jsonArrObj() {
        let jsonArr=[
            {"stuid":10, "stuName":"小王", "stuSex":"男", "stuAge":20},
            {"stuid":11, "stuName":"小2", "stuSex":"d", "stuAge":22},
            {"stuid":12, "stuName":"小d", "stuSex":"男", "stuAge":21},
            {"stuid":13, "stuName":"小c", "stuSex":"男c", "stuAge":23},
            {"stuid":14, "stuName":"小vf", "stuSex":"男", "stuAge":24}
        ]
        // alert(jsonArr[0].stuAge)
        for (let user of jsonArr){
            alert(user.stuid)
        }
    }