ajax学习笔记

大胖喵
180 阅读4分钟

一:Ajax介绍

Ajax能够提供：

  1. 不刷新更新网页
  2. 在页面加载后向服务端请求数据
  3. 在页面加载后从服务端接收数据
  4. 后台服务器发送数据

二：XML介绍

XML：是一种可扩展的编辑语言，设计的宗旨是为了传输数据，是一种自我描述语言，现在都用json来代替了

三：http协议请求报文和响应报文结构

  1. 请求报文
  • 行：（1）：请求方式（2）：请求url（3）：http版本
  • 头
  • 体
  • 空行
  1. 响应报文

  • 行 HTTP/1.1 200 ok

  • 头

    Content-Type:text/html;charset=utf-8

    Content-length:2048

    Content-encoding:gzip

  • 体

  • 空行

四：express框架的使用

express通常是用来构建本地小型服务使用步骤如下所示：

  1. npm install express -save
  2. 在文件夹里npm init -y 生成可配置文件
  3. 创建server.js
//引入express
const express = require('express');
//2.创建应用对象
const app = express();
//3.创建路由规则
app.get("/",(request,response)=>{
    //5.设置响应内容
    response.send('hello,ajax')
})
//4.监听端口启动服务
app.listen(8000,()=>{
    console.log("服务已启动，8000端口监听中")
})
  1. 终端输入node server.js

五：ajax交互实例

下边将一个小案例进行一个ajax交互的显示，不刷新页面，改变页面中的数据

image.png

  1. server.js文件的内容如下所示
//1.引入express
const express = require('express')
//2.创建应用对象
const app =express();
//3.创建路由规则
app.get("/server",(request,response)=>{
    //设置响应头，允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    //设置响应内容
    response.send("hello Ajax")
})
//4.监听端口启动服务
app.listen(8000,()=>{
    console.log("服务已启动，8000端口监听中")
})
  1. index.html文件如下所示
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello ajax</title>
    <style>
        #result{
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <button>点我</button>
    <div id="result"></div>
    
    <script>
        const btns = document.getElementsByTagName("button")[0]
        const divs = document.getElementById("result")
        btns.onclick =function(){
            //1.创建对象
            const xhr = new XMLHttpRequest();
            //2.初始化get请求和方法
            xhr.open('GET','http://127.0.0.1:8000/server');
            //3.发送
            xhr.send();
            //4.事件绑定
            //on 有当的时候 when
            //readstate 是xhr对象的属性，表示状态有0,1,2,3,4 其中4为请求全部返回完毕的时候
            xhr.onreadystatechange = function(){
                if(xhr.readyState===4){
                    if(xhr.status===200){
                        //处理结果
                        console.log(xhr.status) // 状态码
                        console.log(xhr.statusText) // 状态字符串
                        console.log(xhr.getAllResponseHeaders()); // 获取搜有的响应头
                        console.log(xhr.response) // 获取响应体
                        divs.innerHTML = xhr.response
                    }
                }
            }
        }
    </script>
</body>
</html>

六：nodemon使用

nodemon是为了修改server.js文件的时候，不用每次都重新终端程序，然后运行

使用步骤如下所示：

  1. npm install -g nodemon
  2. 使用nodemon server.js启动程序即可

七：ajax如何带参数发送post请求

答：只需要在send函数上加上参数即可

const result = document.getElementById("result");
result.addEvenListener("mouseover",function(){
    //1.创建xhr对象
    const xhr = new XMLHttpRequest();
    //2.初始化 设置类型和url
    xhr.open('POST','http://127.0.0.1:8000/server');
    //3.发送请求，带参数格式
    xhr.send("1111111");
    xhr.onreadystatechange = function(){
        if(xhr.readyState ===4){
            if(xhr.status===200){
            result.innerHtml = xhr.response;
            }
        }
    }
})

八：ajax请求如何修改请求头的内容

xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');

九：如何清除IE缓存效果

请求的时候，给每一个url后头拼上一个时间戳，就可以保证每次发送的都是不同的请求

xhr.open('GET','http://127.0.0.1:8000/ie?t:'+Date.now())

十：延时效果

当Ajax发送请求的时候，当响应时间超过一个时间就会给一个提示

  1. 首先在server.js中写一个响应演示

image.png

  1. 在index.html文件中

image.png

主要实现的方式是通过xhr.timeout = 2000;

//网络超时回调 xhr.ontimeout = function(){}

//网络异常回调 xhr.onerror = function(){}

十一：手动取消ajax请求

<script>
        //1.获取元素对象
        const result = document.getElementById("result");
        const btn1 = document.getElementsByTagName("button")[0]
        const btn2 = document.getElementsByTagName("button")[1]
        let xhr = null;
        btn1.onclick = function (){
            xhr = new XMLHttpRequest();
            xhr.open('GET','http://127.0.0.1:8000/delay')
            xhr.send()
        }
        btn2.onclick = function(){
            xhr.abort();
        }
</script>

十二：重复点击取消上次ajax请求

思路如下所示：

弄一个开关，默认为false，当开始发送请求的时候，设置为true，请求结束设置为false，在请求的过程中，如果又点击了，就会判断开关，如果是true，则取消请求

<script>
        //1.获取元素对象
        const result = document.getElementById("result");
        const btn1 = document.getElementsByTagName("button")[0]
        let xhr = null;
        let isSending = false;
        btn1.onclick = function (){
            if(isSending){
                xhr.abort()
            }
            xhr = new XMLHttpRequest();
            isSending = true;
            xhr.open('GET','http://127.0.0.1:8000/delay')
            xhr.send()
            xhr.onreadystatechange = function(){
                if(xhr.readystatechange===4){
                    isSending = true
                }
            }
        }
</script>

十三：axios发送ajax请求

首先引入axios的CDN使用方式如下所示：

  1. get请求
btns[0].onclick = function(){
    axios.get('http://127.0.0.1:8000/axios-server',{
        params:{
            id:100,
            vip:7
        },
        headers:{
            name:"atguigu",
            age:20
        }
    }).then(res=>{
        conosle.log(res)
    })
}
  1. 如果是post请求的话 //post请求格式，先带参数，然后写其他配置
btns[1].onclic = function(){
    axios.post('http://127.0.0.1:8000/axios-server',{
        username:"admin",
        password:"admin"
    },{
    
        params:{
            id:100,
            vip:7
        },
        headers:{
            name:"atguigu",
            age:20
        }
    }).then(res=>{
        console.log(res)
    })
}
  1. 如果是all请求的话
btns[2].onclick = function(){
    axios({
        //请求方法
        methods:"GET",
        //url
        url:"http://127.0.0.1:8000/axios-server",
        //url参数
        params:{
            vip:20,
            lever:30
        },
        //头信息
        headers:{
            a:100,
            b:100,
        },
        data:{
            username:"admin",
            password:"admin"
        }
    }).then(res=>{
        //响应状态码
        console.log(res.status);
        //响应字符串
        console.log(res.statusText);
        //响应头信息
        console.log(res.headers);
        //响应体
        console.log(res.data)
    })
}

十四：同源策略

同源策略：同源策略是NetScape公司提出的，一种浏览器安全机制 同源：协议，域名，端口号都必须完全相同，违背同源策略就是跨域，一般现实生活中，都会产生跨域，因为一台服务器性能不好，需要多个服务器来提供服务。

解决跨域的两种方法

  1. jsonp的方式 通过利用script标签自身的可以跨域的特性，来解决跨域问题 index.html中的文件内容

image.png

server.js中的文件

//1.引入express
const express = require('express');
//2.创建应用对象
const app = new express();
//3.检测用户是否存在
app.all('/checkout-username',(request,response)=>{
})
//
  1. 通过CROS设置响应头的方式来解决跨域
avatar
文章
阅读
粉丝