JavaScript(Ajax)

Ajax：async javascript and xml - 前端和后端进行交互的一种技术

ajax：异步的js技术，作用是前端跟后端进行传递数据

异步的js和xml - 在很久以前，数据都是以xml形式表现的 - 异步的js操作数据

现在的数据，大多以字符串形式表现，因为所有语言中的字符串都是一样的

前端攻城狮的工作：根据数据渲染页面

1.获取数据 - 服务器中

2.根据数据渲染

Ajax - 语法 四步骤

1.创建对象   -  创建电话

var xhr = new XMLHttpRequest()

2.设置请求出参数 -   调用open方法    ---  找号码，选择卡1 还是卡2 

参数一：请求方式

参数二：请求地址

参数三：布尔值 -  是否异步  -  默认true

xhr.open('get', 'http://localhost:8888/test/first', true)

3.监听请求方式  -  将手机放到耳旁等待听声音

xhr.onreadystatechange = function(){

绑定事件的语法 - 什么时候触发？当ajax请求的状态发生了改变的时候就会触发

ajax的状态 - ajax对象.readyState

    console.log(xhr.readyState); // 0 1 2 3 4

    0表示未初始化 - 没创建对象

    1表示对象创建了，但是还没有发送 - send

    2已经send了，对方已经收到消息了，但是还没有彻底看懂我们什么意思，还有很多事情需要准备

    3对方已经在给我们响应信息了，但是信息不完整

    4数据已经完整了 - 可以接收到完整的数据了

监听这次请求的状态是否到最后  -  4

if(xhr.readyState === 4){
    //判断这次请求是否成功  -  是否是2开头的
    //请求状态 -http状态：
    /*
        1开头：正在进行中
        2开头：各种成功
        3开头：重定向 - 缓存
        4开头: 客户端错误
        5开头: 服务端错误
    */
    if(xhr.status >= 200 && xhr.status < 300){
        //表示这次请求是成功，已经完成了
        //接收对方的数据
        var res = xhr.responseText
        console.log(res)
    }
}

如果在面试中，问你：ajax的工作原理 - ajax的4个步骤

在2-4之间顺序是可以互换的

4.发送 - 调用对象的send方法 - 点击拨号

xhr.send()

AJAX练习

var xhr = new XHLHttpRequest  //当构造函数不需要传参数的时候，new的时候就可以省略小括号
xhr.open('get','http://'请求路径'')  //参数3课选项，默认true  -  异步
xhr.send()
xhr.onreadystatechange = function(){
    //判断是否结束
    if(xhr.readyState === 4) {
        //判断请求是否成功
        if(parseInt(xhr.status/100) == 2) {
                //接收数据
                var res = xhr.responseText
                console.log(res)
             // 像对象的字符串+像数组的字符串 - json字符串
             // json字符串转换成json对象 - JSON.parse(json字符串) - 返回json对象
             res = JSON.parse(res)
            console.log(res);
            console.log(res.age);

            // json对象转成json字符串 - JSON.stringify(json对象) - 返回json字符串
        }
   }
 }

请求方式有很多，最常见的就2个，get和post

get请求通常的数据在地址栏，不如post安全

get请求的数据在地址栏，数据大小是受到限制的 - 4kb。post是没有限制的

1T = 1024G

1G = 1024M

1M = 1024kb

1kb = 1024字节

1个汉字，如果是utf-8 = 3个字节

1个汉字，如果是gbk = 2个字节

get  请求：

1.直接在浏览器中输入地址敲回车

2.在页面中点击了a标签转跳到另一个页面，显示另一个页面中的内容，显示内容也是要发送请求的  -   get

3.引人文件的请求也是get请求，link引人css、script引人js，img引人图片、iframe引人html页面

4.form表单默认能提交，默认提交方法也是get

5通过ajax发送get请求

get请求如何携带参数？get请求的参数会放在地址栏中，在？后面的键值对都属于get请求的参数

var xhr = new XMLHttpRequest;
xhr.open('get','http://localhost:8888/test/third?name=李四&age=888')
xhr.send()
xhr.onreadytatechange = function(){
    if(xhr.readyState === 4) {
        if(xhr.status>=200 && xhr.status<300)
            var res = xhr.responseText;
            //将json字符串转成json对象
            res = JSON.parse(res)
            console.log(res)
    }
}

post 请求带参数：

//post携带参数
var xhr = new XMLHttpRequest
xhr open('post','http://localhost:8888/test/fourth')
//post请求的参数要放在send方法中作为参数的  -  必须的字符串
//post请求要带参数必须在send之前设置 头休息
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded')
//数据在传送之前需要进行编码
xhr.send('name=王五&age=66')
xhr.onreadytatechange = function() {
    if(xhr.readystate === 4){
        if(xhr.status >= 200 && xhr.status < 300) {
            var res = xhr.responseText
            res = JSON.parse(res)
            console.log(res)
        }
    }
}

post请求如果不需要带参数，就可以不设置头信息，不给send中加参数

AJAX请求文件

要请求文件必须使用get请求去做

ajax不光是可以请求后端提供的接口，还可以请求一些文件，获取到文件中的数据

被请求的文件，他的文件类型是没有限制的

ajax如果要请求文件：被请求的文件必须要在web服务器中

web服务器的搭建：利用vscode的插件：live server      preview on web server 

var xhr = new XMLHttpRequest
//xhr.open('get','文件路径.json')
//xhr.open('get','文件路径.css')
//xhr.open('get','文件路径.js')
xhr.open('get','文件路径.xml')
xhr.send()
xhr.onreadystatechange = function(){
    if(xhr.readySate === 4) {
        if(xhr.status >= 200 && xhr.status < 300){
            // var res = xhr.responseText;
            // res = JSON.parse(res)
            // eval函数，可以将一个字符串js代码当做js代码解析执行
            // console.log(res);
            // eval(res) // 当将一段代码当做js代码执行，这段不是js代码，会报错的
            
            // 如果请求的是xml文件，就可以使用独立的另外一种接收数据的方法来接收数据
            var res = xhr.responseXML
            // console.log(res);
            // 将res当做html标签节点来操作
            var class2201 = res.children[0]
            // console.log(class2201);

            var peoples = class2201.querySelectorAll('people')
            // console.log(peoples);
            for(var i=0; i<peoples.length; i++) {
                var nameTag = peoples[i].getElementsByTagName('name')[0]
                // xml的节点中没有innerText只有innerHTML
                console.log(nameTag.innerHTML);

                var ageTag = peoples[i].getElementsByTagName('age')[0]
                // xml的节点中没有innerText只有innerHTML
                console.log(ageTag.innerHTML);
                var sexTag = peoples[i].getElementsByTagName('sex')[0]
                // xml的节点中没有innerText只有innerHTML
                console.log(sexTag.innerHTML);
            }
        }
    }
}

XML：元语言 - 可以开发别的语言的语言 -

例如：html - 作用是存储和传输数据

extension markup language - 可扩展标记语言

这种文件的后缀叫xml

文件中内容是由标签组成 - 自定义标签

必须要有一个文档声明 - <?xml version="1.0" encoding="utf-8"?>

必须要有一个根标签 - 根标签不能叫xml

自定义标签可以有属性 - 跟html标签属性一样

JSON：被请求的文件必须在web服务器中

json字符串/json对象 - json关键字

json格式：  有一种文件后缀就叫json，这种文件存在的目的就是为了存储数据和传输数据

json文件中的数据，必须只能有 一个 对象或数组

键必须加双引号

值如果是字符串，必须加双引号

最后一项后面必须没有逗号

json文件不能有注释

JSON.parse(json字符串)：

长的像对象的字符串+像数组的字符串            键必须有双引号

将json字符串转成json对象

只能转换json字符串或数字字符串或布尔值或null

JSON.stringify(json对象)

对象          数组

将json对象转为json字符串