投稿
  1. 极客之音首页
  2. 技术随笔

【AJAX】第三部分 原生AJAX 的基本使用

小半 • • 技术随笔 • 阅读 119

导读：本篇文章讲解 【AJAX】第三部分 原生AJAX 的基本使用，希望对大家有帮助，欢迎收藏，转发！站点地址：www.bmabk.com

【AJAX】第三部分 原生AJAX 的基本使用

文章目录

3. 原生AJAX 的基本使用

3.1 准备工作

1. 安装node.js

2. 安装express（服务器框架）

3. 安装nodemon自动重启工具

nodemon工具作用是：js文件内容有修改自动重新启动服务，不需要停止在重启

进入vscode里先进行初始化环境

npm init --yes 初始化环境

npm install express --save 下载express包

npm install -g nodemon 下载nodemon

nodemon文件名 启动服务

3.2 使用express

// 1. 获取express
const express = require('express')

// 2. 创建应用对象
const app = express()

// 3. 创建路由规则
/*
	'/':表示的是路径
	request是对请求报文的封装
	response是对响应报文的封装
*/
app.get("/",(request,response)=>{
    // 设置响应体
    response.send("Hello!express")
})

// 4. 监听端口启动服务
app.listen(8000,()=>{
    console.log("8000端口监听中....");
})

// 启动的语法： node 文件名

.

3.3 AJAX GET请求的基本操作

html代码

<body>
  /*
  	小案例当点击按钮时获取响应体内容
  */
    <button class="btn">点击我获取服务器数据</button>
    <div class="result"></div>
    
    <script>
        const btn = document.querySelector('.btn')
        const result = document.querySelector('.result')
        btn.onclick = function(){
            // 1. 创建对象
            const xhr = new XMLHttpRequest()

            //2.初始化请求方法和服务器的路径url
            xhr.open('GET','http://127.0.0.1:8000/server')

            //3.发送
            xhr.send()

            //4.事件绑定处理  服务端返回的结果
            /* 
                on ： 表示当...的时候
                readystate ： 表示状态  0 1 2 3 4 
  							0: 表示XMLHttpRequest 实例已经生成，但是open()方法还没有被调用
  							1: 表示open()方法已经执行，但是send()方法还未被调用
								2: 表示send()方法已经执行，并且头信息和状态码已经收到
								3: 表示正在接收服务器传来的body 部分 的数据
								4: 表示服务器数据已经 完全接收 ，或者本次接收已经失败了
                change：表示改变
            */
            xhr.onreadystatechange = function(){
                //判断  服务端返回全部的数据
                if(xhr.readyState === 4)
                {
                    //判断  响应状态码 2xx都表示成功
                    if(xhr.status >= 200 && xhr.status < 300) 
                    {
                        console.log(xhr.status); //状态码
                        console.log(xhr.statusText); //状态信息
                        console.log(xhr.getAllResponseHeaders); //获取全部的响应头
                        console.log(xhr.response); //响应体
                        result.innerHTML = xhr.response
                    }
                }
            }
        }
    </script>
</body>

js代码

// 1. 导入express
const express = require("express")

// 2. 创建应用对象
const app = express()

/* 
    3.创建路由规则
    '/':表示的是路径
	   request是对请求报文的封装
	   response是对响应报文的封装
*/
app.get('/server',(request,response)=>{
    /* 
        设置响应头
        第一个参数：响应头  允许跨域  Access-Control-Allow-Origin
        第二个参数：响应头的内容
     */
    response.setHeader("Access-Control-Allow-Origin","*")

    //设置响应体
    response.send("Hello! AJAX GET") 
})

// 4.监听端口启动服务
app.listen("8000",()=>{
    console.log("8000端口已启动！！！");
})

3.4 AJAX 设置GET请求参数

//2.初始化请求方法和服务器的路径url
xhr.open('GET','http://127.0.0.1:8000/server')
/*
	？做分隔
	& 连接多个参数
*/
 xhr.open('GET','http://127.0.0.1:8000/server?a=100&b=200&c=300')
// 请求参数就是传给服务端的数据

在这里插入图片描述

3.5 AJAX POST请求的基本操作

html代码

<body>
    <div class="wrapper" style="width: 200px; height: 200px; border: 1px solid black;"></div>
    <script>
        /* 
            当鼠标移入div时向服务端发送请求，把结果显示在div里
        */
        const box = document.querySelector('.wrapper')
        box.addEventListener('mouseover',()=>{
            // 1. 创建对象
            const xhr = new XMLHttpRequest();

            //2. 初始化请求的类型 和 服务端的地址url
            xhr.open('POST','http://127.0.0.1:8000/server')

            //3. 发送
            xhr.send()

            //4. 事件绑定
            xhr.onreadystatechange = function(){
                //判断数据是否全部传输完毕
                if(xhr.readyState === 4)
                {
                    //判断状态码是否正常
                    if(xhr.status >= 200 && xhr.status < 300)
                    {
                        console.log(xhr.response); //输出响应体
                        box.innerHTML = xhr.response
                    }
                }
            }
        })
    </script>
</body>

.

js代码

// 1. 导入express
const express = require('express');

// 2. 创建应用对象
const app = express()

//3. 创建路由规则
/* 
    如果是GET请求这里设置的规则就要是：app.get('/server',(request,response)=>{})
*/
app.post('/server',(request,response)=>{
    response.setHeader('Access-Control-Allow-Origin','*')
    response.send('Hello! AJAX POST')
})

// 4.监听端口服务
app.listen('8000',()=>{
    console.log('8000端口已启动！！！');
})

3.6 AJAX 设置POST请求参数

//3. 发送
 xhr.send('a=100&b=200&c=300')
//在send中传参数
//而GET请求是在open中url后直接追加参数

3.7 设置请求头信息

==html==
xhr.setrequestHeader('Content-Type','application/x-www-from-urlencoded')
// 第二个参数是固定的，第一个参数是类型

==js==
  //如果想要自定义请求头需要加以下代码
  response.setHeader('Access-Control-Allow-Header','*');
	app.all(.)

3.8 服务端响应JSON数据

html代码

  <div class="wrapper" style="width: 200px; height: 200px; border: 1px solid black;"></div>
    <script>
        const box = document.querySelector('.wrapper')
        window.addEventListener('keyup',()=>{
            // 创建对象
            const xhr = new XMLHttpRequest()

            //初始化
            xhr.open('GET','http://127.0.0.1:8000/json-server')

            //发送
            xhr.send()

            //设置响应体的数据类型,写的类型是响应体那里传来的类型（自动转换）
            xhr.responseType = 'json'

            //事件绑定
            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4)
                {
                    if(xhr.status >= 200 && xhr.status < 300)
                    {
                        /* 
                            由于返回的是字符串所以需要做类型转换
                            有二种方式：
                            1.手动转换
                            2.自动转换
                        */
                       
                        //手动转换
                        // let data = JSON.parse(xhr.response)
                        // console.log(data);
                        // box.innerHTML = data.name

                        //自动转换  xhr.responseType = 'json'
                        console.log(xhr.response);
                        box.innerHTML = xhr.response.name
                    }
                }
            }
        })
    </script>

js代码

// 导入
const express = require('express')

// 创建应用对象
const app = express()

// 创建路由规则
app.get('/json-server',(request,response)=>{
    response.setHeader('Access-Control-Allow-Origin','*')

    //需求服务端返回对象
    const data = {
        name:"Jack",
        age:18
    }
    //send方法接收字符串，所以需要对象数据进行转换在传
    response.send(JSON.stringify(data))
})

//监听端口
app.listen('8000',()=>{
    console.log('8000端口已启动！！！');
})

3.9 解决IE浏览器缓存问题

问题：在一些浏览器中(IE),由于缓存机制的存在，导致AJAX只会发送的第一次请求，剩余多次请求不会在发送给 浏览器而是直接加载缓存中的数据。
解决方式：浏览器的缓存是根据url 地址来记录的，所以我们只需要修改url 地址即可避免缓存问题

xhr.open("get","/testAJAX?t="+Date.now());
//加上时间戳

.

3.10 AJAX请求超时和网络异常问题

html代码

  <button>点击我获取信息</button>
    <div class="wrapper" style="width: 200px; height: 200px; border: 1px solid black;"></div>
    <script>
        const btn = document.querySelector('button')
        const wrapper = document.querySelector('.wrapper')
        btn.onclick = function(){
            const xhr = new XMLHttpRequest()
            
            // 设置超时时间，如果超过设置的时间自动取消请求
            xhr.timeout = 2000

            // 超时的回调
            xhr.ontimeout = function(){
                alert('请求超时，请重新刷新页面！')
            }
            
            //网络异常的回调
            xhr.onerror = function(){
                alert('网络异常，请重新尝试！')
            }

            xhr.open('GET','http://127.0.0.1:8000/delay')
            xhr.send()
            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4)
                {
                    if(xhr.status >= 200 & xhr.status < 300)
                    {
                        wrapper.innerHTML = xhr.response
                    }
                }
            }
        }
    </script>

js代码

const express = require('express')

const app = express()

app.get('/delay',(request,response)=>{
    response.setHeader('Access-Control-Allow-Origin','*')
    //延时3s返回响应
    setTimeout(() => {
        response.send('延时请求')
    }, 3000);
})

app.listen('8000',()=>{
    console.log('8000端口已启动！！！');
})

3.11 AJAX取消请求

const xhr = new XMLHttpRequest()
//取消请求
xhr.abort()
...

3.12 解决重复请求的问题

html代码

 <button>发送请求</button>
    <script>
        const btn = document.querySelector('button')
        let xhr = null
        let flag = false  //表示是否正在请求 true表示正在请求
        btn.onclick = function(){
            if(flag)  //如果真 表示在执行就取消请求
            {
                xhr.abort()
            }  
            flag = true
            xhr = new XMLHttpRequest()
            xhr.open('GET','http://127.0.0.1:8000/delay')
            xhr.send()
            xhr.onreadystatechange = function(){
              //当数据全部返回时
                if(xhr.readyState === 4)
                {   
                    flag = false
                }
            }
        }
        
    </script>

js代码

const express = require('express')

const app = express()

app.get('/delay',(request,response)=>{
    response.setHeader('Access-Control-Allow-Origin','*')
    setTimeout(() => {
        response.send('Hello！')
    }, 2000);
})

app.listen('8000',()=>{
    console.log('8000端口已启动！！！');
})

3.13 总结使用的API

  • XMLHttpRequest()：创建 XHR 对象的构造函数
  • status：响应状态码值，如 200、404
  • statusText：响应状态文本，如 ’ok‘、‘not found’
  • readyState:标识请求状态的只读属性 0-1-2-3-4
  • onreadystatechange：绑定 readyState 改变的监听
  • responseType：指定响应数据类型，如果是 ‘json’，得到响应后自动解析响应
  • response：响应体数据，类型取决于 responseType 的指定
  • timeout：指定请求超时时间，默认为 0 代表没有限制
  • ontimeout：绑定超时的监听
  • onerror：绑定请求网络错误的监听
  • open()：初始化一个请求，参数为：(method, url[, async])
  • send(data)：发送请求
  • abort()：中断请求 （发出到返回之间）
  • getResponseHeader(name)：获取指定名称的响应头值
  • getAllResponseHeaders()：获取所有响应头组成的字符串
  • setRequestHeader(name, value)：设置请求头

总结

以上就是今天要讲的内容，本文介绍了原生AJAX 的基本使用，希望对大家有所帮助！

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/82945.html

赞 (0)
小半的头像小半
0 0

相关推荐

极客之音——专业性很强的中文编程技术网站，欢迎收藏到浏览器，订阅我们！