Ajax简介与应用

最新推荐文章于 2022-09-08 21:08:12 发布

lz010123

最新推荐文章于 2022-09-08 21:08:12 发布

阅读量86

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/lz010123/article/details/124354246

版权

本文详细介绍了Ajax的工作原理、创建请求对象、发送异步GET和POST请求，以及如何解析响应数据。重点讲解了前端与后端交互的过程，包括使用XMLHttpRequest和设置请求头。适合初学者了解AJAX在前端开发中的应用。

摘要由CSDN通过智能技术生成

Ajax

ajax 异步的javascript与xml 他可以完成对应的异步请求

局部刷新（不会重新加载页面而只改变页面的一部分）

ajax是原生js里面自带的（封装的）

ajax可以发送http请求 request 请求 response 响应

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

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

get请求默认的方式不需要指向访问形式默认为get请求

1.创建一个请求对象

let xhr = new XMLHttpRequest()

2.设置请求的方法和地址（携带数据）

xhr.open('GET',"https://jsonplaceholder.typicode.com/todos")//参数1请求的方法 参数2请求的地址

4.监听请求状态 (写在3前面是因为可以从开始就监听)

状态码 1 表示已经成功需要继续操作 2 已经完成 3 重定向页面 4 客户端错误 404（找不到页面） 5 服务器错误（500）

readyState 值 0未初始化 1启动 2 接受请求未响应 3 部分完成 4 完成

xhr.onreadystatechange = function(){
	//5.请求完成以后 读取响应的数据
	//判断是否成功了
	if(xhr.readyState == 4 &&  /^20\d$/.test(xhr.status)) {
        console.log(xhr.responseText);//获取响应的内容 responseText 
        // response 返回响应体 responseText返回响应文本 responseType响应数据类型
    }
}

3.发送请求

xhr.send()

5.请求完成以后读取响应的数据（代码写在监听请求状态里）

post请求需要指定一般用于表单他是会封装到请求体中

1.创建请求对象

 let xhr = new XMLHttpRequest()

2.set请求方式以及地址

xhr.open('POST','http://useker.cn/login')

3.设置请求头 key value 两个都是srting类型

xhr.setRequestHeader("content-type","application/javascript; charset=utf-8") //utf-8万国码 gb2312 gbk 国标码

4.发送请求 send里面没有? 也是用&拼接

xhr.send('uname=1&upwd=2') //他里面的内容会放在请求体中

5.监听

xhr.onreadystatechange = function(){
    if(xhr.readyState == 4 && /^20\d$/.test(xhr.status)){
        //6.接收响应
        console.log(xhr.responseText);
    }
}

6.接收响应（代码写在监听请求状态里）

ajax数据响应获取

<body>
    <button>获取数据</button>
    <script>
        // 1.获取按钮
        var btn = document.querySelector('button')
        // 2.给按钮添加点击事件
        btn.onclick = function(){
            // 3.建立XMLHttpRequest
            let xhr = new XMLHttpRequest()
            // 4.设置请求（设置请求方法 get 设置请求的地址）
            //get请求 传递参数 直接在请求地址后面写?参数1=值&参数2=值2....
            // xhr.open('GET','https://jsonplaceholder.typicode.com/todos?id=200')
            // _page是第几页 _limit每页的个数
            xhr.open('GET','https://jsonplaceholder.typicode.com/todos_page=2&_limit=10')
            // 5.发送请求
            xhr.send()
            // 6.监听请求状态
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4 && /^20\d$/.test(xhr.status)){
                    // 7.在监听方法中获取对应响应的内容
                    let res = xhr.responseText //获取到是一个字符串
                    //转为数组类型
                    res = JSON.parse(res)
                    // 8.渲染到页面
                    // 创建table
                    let table = document.createElement('table')
                    let tHead = document.createElement('tr')
                    let td = document.createElement('th')
                    td.innerText = '序号'
                    tHead.appendChild(td)
                    for(let key in res[0]){
                        // 创建tr和td
                        let td = document.createElement('th')
                        td.innerText = key
                        tHead.appendChild(td)
                    }
                    table.appendChild(tHead)
                    table.border = '1px'
                    // 将table添加到body
                    document.body.appendChild(table)
                    // 拿到数据是一个数组  // 遍历对象数组
                    res.forEach((v,index) => {
                        // 创建tr和td
                        let tr = document.createElement('tr')
                        //加序号
                        let firstTd = document.createElement('td')
                        //填充内容 
                        firstTd.innerText = index+1
                        tr.appendChild(firstTd)
                        for (let attr in v) {
                            let td = document.createElement('td')
                            //填充内容 
                            td.innerText = v[attr]
                            tr.appendChild(td)
                        }
                        //添加到table中
                        table.appendChild(tr)
                    });
                }
        }
        }
      
    </script>
</body>

创建请求对象的兼容问题（封装一个方法）

XMLHttpRequest //主流的

ActiveXObject //兼容ie6

function createXhr(){
    if(window.XMLHttpRequest){
        return new XMLHttpRequest()
    }
    return new ActiveXObject("Microsoft.XMLHTTP");
}