ajax基础及get请求方式例子

ajax

ajax是异步的javascript与XML 可以完成对应的异步请求

特点:

局部刷新(不会重新加载页面,只会改变页面的一部分)

ajax是原生js里面自带的

ajax可以发送http请求

前后端与数据库联系

前端 发送请求 后端 访问数据库

数据库返回执行的内容 给到后端,后端进行处理 将数据响应到前端(响应操作)

ajax创建

内置对象 请求对象 在请求的过程中 监听请求状态 请求成功后从而获得响应 响应里面在读取到数据

		//创建一个请求对象
        let xhr = new XMLHttpRequest()
        //设置请求地址
        xhr.open('get',"https://jsonplaceholder.typicode.com/todos")
        //发送请求
        xhr.send()
        //监听请求状态
        xhr.onreadystatechange = function(){
            //请求完成后,读取响应的数据
            //判断是否成功了
            //状态码    1 表示已经成功还需要继续操作  2 已经完成   3 重定向页面   4 客户端错误(404,找不到)  5服务器错误
            //readyState值  0未初始化   1 启动  2 接受请求未响应  3 部分完成    4 完成
            if(xhr.readyState == 4 && /^20\d$/.test(xhr.status)){
                console.log(xhr.responseText);//获取响应的内容
                // response 响应主体    responseType 响应数据类型
            }
        }

例子

css样式

        .selected{
            background-color: aqua;

        }

js样式

        //建立XMLHttpRequest
        let xhr = new XMLHttpRequest()
        //设置请求(get请求  传递参数 直接在请求地址后面加?参数1=值&参数2=值2...)
        //_page是第几页 _limit是每页的个数
        xhr.open('GET','https://jsonplaceholder.typicode.com/todos')
            
        //发送请求
        xhr.send()
        //监听请求状态
        xhr.onreadystatechange = function(){
            if(xhr.readyState==4 && /^20\d$/.test(xhr.status)){
                //在监听方法中获取对应响应的内容
                let res = xhr.responseText
                //转为数组,求得长度为总个数
                let count = JSON.parse(res).length
                //设置每一页显示个数
                const page = 9
                //求出页数
                const pageCount = Math.ceil(count/page)
                //先加载第一页内容
                changePage(1)
                //渲染到页面
                //创建table                
                function changePage(currentPage){
                    //建立XMLHttpRequest
                    let xhr1 = new XMLHttpRequest()
                    //设置请求(get请求  传递参数 直接在请求地址后面加?参数1=值&参数2=值2...)
                    //_page是第几页 _limit是每页的个数
                    xhr1.open('GET',`https://jsonplaceholder.typicode.com/todos?_page=${currentPage}&_limit=${page}`)
                        
                    //发送请求
                    xhr1.send()
                    //监听请求状态
                    xhr1.onreadystatechange = function(){
                        if(xhr1.readyState==4 && /^20\d$/.test(xhr1.status)){
                            //在监听方法中获取对应响应的内容
                            let res = xhr1.responseText
                            //转为数组
                            res = JSON.parse(res)
                            //渲染到页面
                            //创建table
                            //如果已经有table,就清除
                            if(document.querySelector('table')){
                                document.querySelector('table').remove()
                            }
                            //没有就创建table
                            let table = document.createElement('table')
                            //创建表头
                            let tHead = document.createElement('tr')
                            //创建自己添加的序号
                            let th1=document.createElement('th')
                            th1.innerText = '序号'
                            //把序号也添加到表头里
                            tHead.appendChild(th1)
                            //为本来就存在的键创建表th
                            for(let key in res[0]){
                                let th = document.createElement('th')
                                th.innerText = key
                                //把表th添加到表头
                                tHead.appendChild(th)
                                }
                            //把表头添加到table
                            table.appendChild(tHead)
                            //为本来就存在的格子添加大小
                            table.border = '1px'
                            //将table添加到body
                            document.body.appendChild(table)
                            //遍历对象数组
                            res.forEach((v,index) => {
                                //创建tr和td
                                let tr = document.createElement('tr')
                                //创建序号的表td
                                let firstTd = document.createElement('td')
                                //填充序号内容
                                firstTd.innerText = index+1
                                //把序号添加到tr
                                tr.appendChild(firstTd)
                                //遍历对象
                                for(let attr in v){
                                    //创建表td
                                    let td = document.createElement('td')
                                    //把对象的内容添加到表td
                                    td.innerHTML = v[attr]
                                    //把td添加到tr
                                    tr.appendChild(td)
                                }
                                //把tr添加到table
                                    table.appendChild(tr)
                            });
                        }
                    }
                }
                //生成对应按钮
                
                //生成上一页按钮并添加到body中
                let btn1 = document.createElement('button')                
                document.body.appendChild(btn1)
                btn1.innerText = '上一页'
                //遍历创建按钮
                for(let i=1;i<=pageCount;i++){
                    let btn = document.createElement('button')
                    //第一页为默认选中
                    if(i==1){
                        btn.className = 'selected'
                    }
                    //每个按钮的值
                    btn.innerText = i                    
                    //切换按钮功能
                    btn.onclick = function(){
                        //点击时页面切换
                        changePage(i)
                        //清除所有按钮的class
                        fn()
                        //点击按钮添加class
                        btn.className = 'selected'
                    }
                    //每个按钮添加到body中
                    document.body.appendChild(btn)
                }
                //创建下一页的按钮
                let btn2 = document.createElement('button')
                btn2.innerText = '下一页'
                document.body.appendChild(btn2)
                //得到已经选择了的按钮(也就是class为selected的按钮)                       
                let select = document.querySelector('.selected')
                //得到按钮的值
                let index = Number(select.innerText)
                let countBtn = index
                //点击上一页事件
                btn1.onclick = function(){
                    //再次获取按钮的值
                    let select = document.querySelector('.selected')
                    let index = Number(select.innerText)
                    let countBtn = index 
                    //当小于2也就是1时不能在往上一页
                    if(countBtn<2){
                        countBtn=2
                    } 
                    //往上一页跳转
                    changePage(countBtn-1) 
                    //所有按钮的class清除
                    fn()
                    //为上一页的class赋值
                    btns[countBtn-1].className = 'selected'                                                                      
                }
                //同理设置下一页按钮的事件
                btn2.onclick = function(){  
                    let select = document.querySelector('.selected')
                    let index = Number(select.innerText)
                    let countBtn = index  
                    if(countBtn>pageCount-1){
                        countBtn=pageCount-1
                    }                
                    changePage(countBtn+1)                    
                    
                    fn()
                    btns[countBtn+1].className = 'selected'                
                }
                
                
                
            }
        } 
		//获取所有按钮
        let btns = document.getElementsByTagName('button')
        //封装清除所有按钮class的方法
        function fn(){
            for(let btn of btns){
                btn.className = ''
            }
        }