AJAX学习笔记

最新推荐文章于 2024-06-15 21:40:09 发布
最新推荐文章于 2024-06-15 21:40:09 发布
阅读量280 收藏 1
点赞数 1
分类专栏： Ajax 文章标签： ajax 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53124033/article/details/130395959
版权

AJAX（Asynchronous Javascript And Xml）

AJAX概述

  • AJAX不能称为一种技术，它是多种技术的综合产物。
  • AJAX可以让浏览器发送一种特殊的请求，这种请求可以是：异步的。
  • 什么是异步，什么是同步？
    • 假设有t1和t2线程，t1和t2线程并发，就是异步。
    • 假设有t1和t2线程，t2在执行的时候，必须等待t1线程执行到某个位置之后t2才能执行，那么t2在等t1，显然他们是排队的，排队的就是同步。
    • AJAX是可以发送异步请求的。也就是说，在同一个浏览器页面当中，可以发送多个ajax请求，这些ajax请求之间不需要等待，是并发的。
  • AJAX代码属于WEB前端的JS代码。和后端的java没有关系，后端也可以是php语言，也可以是C语言。
  • AJAX 应用程序可能使用 XML 来传输数据，但将数据作为纯文本或 JSON 文本传输也同样常见。
  • AJAX可以更新网页的部分，而不需要重新加载整个页面。（页面局部刷新）
  • AJAX可以做到在同一个网页中同时启动多个请求，类似于在同一个网页中启动“多线程”，一个“线程”一个“请求”。

优缺点

  • 优点

    ​ 可以无需刷新页面而与服务器端进行通信

    ​ 允许你根据用户事件来更新部分页面内容

  • 缺点

    ​ 没有浏览历史，不能回退

    ​ 存在跨域问题(同源)

    ​ SEO 不友好

XMLHttpRequest对象

  • XMLHttpRequest对象是AJAX的核心对象，发送请求以及接收服务器数据的返回，全靠它了。

  • XMLHttpRequest对象，现代浏览器都是支持的，都内置了该对象。直接用即可。

  • 创建XMLHttpRequest对象

    • //1.创建XMLHttpRequest对象
const xhr = new XMLHttpRequest()

//2. 设置请求信息
xhr.open(method,url)
//可以设置请求头，一般不设置
  xhr.setRequestHeader('Content-Type','application/x-www-form-urlcoded')

//3.发送请求
  xhr.send(body) //get请求不传body参数，只有post请求使用

//4.接受响应
//xhr.responseXML 接收 xml 格式的响应数据
//xhr.responseText 接收文本格式的响应数据
xhr.onreadystatachange = function(){
    if(xhr.readystate === 4 && xhr.status === 200){
        const text = xhr.responseText
    }
}

  • XMLHttpRequest对象的方法

方法描述
abort()取消当前请求
getAllResponseHeaders()返回头部信息
getResponseHeader()返回特定的头部信息
open(method, url, async, user, psw)规定请求method：请求类型 GET 或 POST url：文件位置 async：true（异步）或 false（同步） — user：可选的用户名称 — psw：可选的密码
send()将请求发送到服务器，用于 GET 请求
send(string)将请求发送到服务器，用于 POST 请求
setRequestHeader( header, value)向要发送的报头添加标签/值对 向请求添加 HTTP 头部: header：规定头部名称; value：规定头部值
  • XMLHttpRequest对象的属性
属性描述
onreadystatechange定义当 readyState 属性发生变化时被调用的函数
readyState保存 XMLHttpRequest 的状态。0：请求未初始化 1：服务器连接已建立 2：请求已收到 3：正在处理请求 4：请求已完成且响应已就绪
responseText以字符串返回响应数据
responseXML以 XML 数据返回响应数据
status返回请求的状态号200: “OK” 403: “Forbidden” 404: “Not Found”
statusText返回状态文本（比如 “OK” 或 “Not Found”）

AJAX GET请求

  • 发送AJAX get请求，前端代码：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX GET 请求</title>
    <style>
        #result{
            width:200px;
            height:100px;
            border:solid 1px #90b;
        }
    </style>
</head>
<body>
    <button>点击发送请求</button>
    <div id="result"></div>

    <script>
        //获取button元素
        const btn = document.getElementsByTagName('button')[0];
        const result = document.getElementById("result");
        //绑定事件
        btn.addEventListener = function(){
            //1. 创建对象
            const xhr = new XMLHttpRequest();
            //2. 初始化 设置请求方法和 url
            xhr.open('GET', 'http://localhost:8000/server?a=100&b=200&c=300');
            //3. 发送
            xhr.send();
            //4. 事件绑定 处理服务端返回的结果
            // on  when 当....时候
            // readystate 是 xhr 对象中的属性, 表示状态 0 1 2 3 4
            // change  改变
            xhr.onreadyStatechange = function(){
                //判断 (服务端返回了所有的结果)
                if(xhr.readyState === 4){
                    //判断响应状态码 200  404  403 401 500
                    // 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 的文本
                        result.innerHTML = xhr.response;
                    }else{

                    }
                }
            }
        }
    </script>
</body>
</html>

  • 发送AJAX get请求，后端代码：

    package com.bjpowernode.ajax.servlet;

import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

import java.io.IOException;
import java.io.PrintWriter;

/**
 * @program: 代码
 * @ClassName: AjaxRequest2Servlet
 * @version: 1.0
 * @description:
 * @author: bjpowernode
 * @create: 2022-05-13 10:46
 **/

@WebServlet("/ajaxrequest2")
public class AjaxRequest2Servlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        // 设置响应的内容类型以及字符集
        response.setContentType("text/html;charset=UTF-8");
        // 获取响应流
        PrintWriter out = response.getWriter();
        // 响应
        out.print("<font color='red'>用户名已存在！！！</font>");
    }
}

  • AJAX get请求如何提交数据呢？

    • get请求提交数据是在“请求行”上提交，格式是：url?name=value&name=value&name=value…
    • 其实这个get请求提交数据的格式是HTTP协议中规定的，遵循协议即可。

  • 不过，请在以下情况始终使用 POST：

    • 缓存文件不是选项（更新服务器上的文件或数据库）
    • 向服务器发送大量数据（POST 无大小限制）
    • 发送用户输入（可包含未知字符），POST 比 GET 更强大更安全

AJAX GET请求的缓存问题

  • 对于低版本的IE浏览器来说，AJAX的get请求可能会走缓存。存在缓存问题。对于现代的浏览器来说，大部分浏览器都已经不存在AJAX get缓存问题了。
  • 什么是AJAX GET请求缓存问题呢？
    • 在HTTP协议中是这样规定get请求的：get请求会被缓存起来。
    • 发送AJAX GET请求时，在同一个浏览器上，前后发送的AJAX请求路径一样的话，对于低版本的IE来说，第二次的AJAX GET请求会走缓存，不走服务器。
  • POST请求在HTTP协议中规定的是：POST请求不会被浏览器缓存。
  • GET请求缓存的优缺点：
    • 优点：直接从浏览器缓存中获取资源，不需要从服务器上重新加载资源，速度较快，用户体验好。
    • 缺点：无法实时获取最新的服务器资源。
  • 浏览器什么时候会走缓存？
    • 第一：是一个GET请求
    • 第二：请求路径已经被浏览器缓存过了。第二次发送请求的时候，这个路径没有变化，会走浏览器缓存。
  • 如果是低版本的IE浏览器，怎么解决AJAX GET请求的缓存问题呢？
    • 可以在请求路径url后面添加一个时间戳，这个时间戳是随时变化的。所以每一次发送的请求路径都是不一样的，这样就不会走浏览器的缓存问题了。
    • 可以采用时间戳：“url?t=” + new Date().getTime()
    • 或者可以通过随机数：“url?t=” + Math.random()
    • 也可以随机数+时间戳…

AJAX POST请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX POST 请求</title>
    <style>
        #result{
            width:200px;
            height:100px;
            border:solid 1px #903;
        }
    </style>
</head>
<body>
    <div id="result"></div>
    <script>
        //获取元素对象
        const result = document.getElementById("result");
        //绑定事件
        result.addEventListener("mouseover", function(){
            //1. 创建对象
            const xhr = new XMLHttpRequest();
            //2. 初始化 设置类型与 URL
            xhr.open('POST', 'http://localhost:8000/server');
            //设置请求头
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
            xhr.setRequestHeader('name','atguigu');
            //3. 发送
            xhr.send('a=100&b=200&c=300');
            // xhr.send('a:100&b:200&c:300');
            // xhr.send('1233211234567');
            
            //4. 事件绑定
            xhr.onreadystatechange = function(){
                //判断
                if(xhr.readyState === 4){
                    if(xhr.status >= 200 && xhr.status < 300){
                        //处理服务端返回的结果
                        result.innerHTML = xhr.response;
                    }
                }
            }
        });
    </script>
</body>
</html>

  • 实现一个案例：使用AJAX POST请求实现用户注册的时候，用户名是否可用。（验证用户名是否可以注册）实现步骤如下：

    • 在前端，用户输入用户名之后，失去焦点事件blur发生，然后发送AJAX POST请求，提交用户名
    • 在后端，接收到用户名，连接数据库，根据用户名去表中搜索
    • 如果用户名已存在
      • 后端响应消息：对不起，用户名已存在（在前端页面以红色字体展示）
    • 如果用户名不存在
      • 后端响应消息：用户名可以使用（在前端页面以绿色字体展示）

  • 实现一个案例：用户点击按钮之后，发送AJAX请求，显示学生列表。

    • 在后端java程序中拼接HTML代码，然后将HTML代码直接响应到浏览器客户端。这种方式不好，不应该在java代码中编写HTML代码，能否在java程序中直接向前端响应数据？可以，可以在后端拼接JSON格式的字符串，或者XML格式的字符串，将这个字符串发送给前端，前端解析即可。

基于JSON的数据交换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSON响应</title>
    <style>
        #result{
            width:200px;
            height:100px;
            border:solid 1px #89b;
        }
    </style>
</head>
<body>
    <div id="result"></div>
    <script>
        const result = document.getElementById('result');
        //绑定键盘按下事件
        window.onkeydown = function(){
            //发送请求
            const xhr = new XMLHttpRequest();
            //设置响应体数据的类型
            xhr.responseType = 'json';
            //初始化
            xhr.open('GET','http://localhost:8000/json-server');
            //发送
            xhr.send();
            //事件绑定
            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4){
                    if(xhr.status >= 200 && xhr.status < 300){
                        //
                        // console.log(xhr.response);
                        // result.innerHTML = xhr.response;
                        // 1. 手动对数据转化
                        // let data = JSON.parse(xhr.response);
                        // console.log(data);
                        // result.innerHTML = data.name;
                        // 2. 自动转换
                        console.log(xhr.response);
                        result.innerHTML = xhr.response.name;
                    }
                }
            }
        }
    </script>
</body>
</html>

JSON格式：(注意字符串必须是双引号)

//字符串形式
{
    "name": "kkk",
    "age": 18,
    "hobby": ["足球", "篮球"],
    "family": "张三" 
}


//数组形式
[
    {
    "name": "kkk",
    "age": 18,
    "hobby": ["足球", "篮球"],
    "family": "张三" 
},
{
    "name": "kkk",
    "age": 18,
    "hobby": ["足球", "篮球"],
    "family": "张三" 
}
]

在WEB前端中，将JSON格式的字符串解析为JS对象

let 新数组名 = JSON.parse(旧数组)

在WEB前端中，将JS对象解析为JSON格式的字符串

let newObj = JSON.stringify(oldObj)

拼接JSON格式的字符串太痛苦，可以使用阿里巴巴的fastjson组件，它可以将java对象转换成json格式的字符串

List<Student> studentList = new ArrayList<>();
while (rs.next()) {
    // 取出数据
    String name = rs.getString("name");
    int age = rs.getInt("age");
    String addr = rs.getString("addr");
    // 将以上数据封装成Student对象
    Student s = new Student(name, age, addr);
    // 将Student对象放到List集合
    studentList.add(s);
}
// 将List集合转换成json字符串
jsonStr = JSON.toJSONString(studentList);

注意：使用fastjson需要引入fastjson-1.2.2.jar

原生AJAX-超时与网络异常

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>请求超时与网络异常</title>
    <style>
        #result{
            width:200px;
            height:100px;
            border:solid 1px #90b;
        }
    </style>
</head>
<body>
    <button>点击发送请求</button>
    <div id="result"></div>
    <script>
        const btn = document.getElementsByTagName('button')[0];
        const result = document.querySelector('#result');

        btn.addEventListener('click', function(){
            const xhr = new XMLHttpRequest();
            //超时设置 2s 设置
            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){
                        result.innerHTML = xhr.response;
                    }
                }
            }
        })
    </script>
</body>
</html>

原生AJAX-取消请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>取消请求</title>
</head>
<body>
    <button>点击发送</button>
    <button>点击取消</button>
    <script>
        //获取元素对象
        const btns = document.querySelectorAll('button');
        let x = null;

        btns[0].onclick = function(){
            x = new XMLHttpRequest();
            x.open("GET",'http://127.0.0.1:8000/delay');
            x.send();
        }

        // abort
        btns[1].onclick = function(){
            x.abort();
        }
    </script>
</body>
</html>

原生AJAX-重复请求问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>重复请求问题</title>
</head>
<body>
    <button>点击发送</button>
    <script>
        //获取元素对象
        const btns = document.querySelectorAll('button');
        let x = null;
        //标识变量
        let isSending = false; // 是否正在发送AJAX请求

        btns[0].onclick = function(){
            //判断标识变量
            if(isSending) x.abort();// 如果正在发送, 则取消该请求, 创建一个新的请求
            x = new XMLHttpRequest();
            //修改 标识变量的值
            isSending = true;
            x.open("GET",'http://127.0.0.1:8000/delay');
            x.send();
            x.onreadystatechange = function(){
                if(x.readyState === 4){
                    //修改标识变量
                    isSending = false;
                }
            }
        }

        // abort
        btns[1].onclick = function(){
            x.abort();
        }
    </script>
</body>
</html>

基于XML的数据交换

  • 注意：如果服务器端响应XML的话，响应的内容类型需要写成：

    response.setContentType("text/xml;charset=UTF-8");

  • xml和JSON都是常用的数据交换格式

    • XML体积大，解析麻烦。较少用。
    • JSON体积小，解析简单，较常用。

  • 基于XML的数据交换，前端代码

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用XML完成数据交换</title>
</head>
<body>
<script type="text/javascript">
    window.onload = function(){
        document.getElementById("btn").onclick = function(){
            // 1.创建XMLHTTPRequest对象
            var xhr = new XMLHttpRequest();
            // 2.注册回调函数
            xhr.onreadystatechange = function () {
                if (this.readyState == 4) {
                    if (this.status == 200) {
                        // 服务器端响应了一个XML字符串，这里怎么接收呢？
                        // 使用XMLHTTPRequest对象的responseXML属性，接收返回之后，可以自动封装成document对象（文档对象）
                        var xmlDoc = this.responseXML
                        //console.log(xmlDoc)
                        // 获取所有的<student>元素，返回了多个对象，应该是数组。
                        var students = xmlDoc.getElementsByTagName("student")
                        //console.log(students[0].nodeName)
                        var html = "";
                        for (var i = 0; i < students.length; i++) {
                            var student = students[i]
                            // 获取<student>元素下的所有子元素
                            html += "<tr>"
                            html += "<td>"+(i+1)+"</td>"
                            var nameOrAge = student.childNodes
                            for (var j = 0; j < nameOrAge.length; j++) {
                                var node = nameOrAge[j]
                                if (node.nodeName == "name") {
                                    //console.log("name = " + node.textContent)
                                    html += "<td>"+node.textContent+"</td>"
                                }
                                if (node.nodeName == "age") {
                                    //console.log("age = " + node.textContent)
                                    html += "<td>"+node.textContent+"</td>"
                                }
                            }
                            html += "</tr>"
                        }
                        document.getElementById("stutbody").innerHTML = html
                    }else{
                        alert(this.status)
                    }
                }
            }
            // 3.开启通道
            xhr.open("GET", "/ajax/ajaxrequest6?t=" + new Date().getTime(), true)
            // 4.发送请求
            xhr.send()
        }
    }
</script>
<button id="btn">显示学生列表</button>
<table width="500px" border="1px">
    <thead>
    <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    </thead>
    <tbody id="stutbody">
    <!--<tr>
        <td>1</td>
        <td>zhangsan</td>
        <td>20</td>
    </tr>
    <tr>
        <td>2</td>
        <td>lisi</td>
        <td>22</td>
    </tr>-->
    </tbody>
</table>
</body>
</html>

  • 基于XML的数据交换，后端java程序：

    package com.bjpowernode.ajax.servlet;

import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

import java.io.IOException;
import java.io.PrintWriter;

/**
 * @program: 代码
 * @ClassName: AjaxRequest6Servlet
 * @version: 1.0
 * @description: 服务器端返回XML字符串
 * @author: bjpowernode
 * @create: 2022-05-15 11:48
 **/
@WebServlet("/ajaxrequest6")
public class AjaxRequest6Servlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        // 注意：响应的内容类型是XML。
        response.setContentType("text/xml;charset=UTF-8");
        PrintWriter out = response.getWriter();

        /*
        <students>
            <student>
                <name>zhangsan</name>
                <age>20</age>
            </student>
            <student>
                <name>lisi</name>
                <age>22</age>
            </student>
        </students>
         */

        StringBuilder xml = new StringBuilder();
        xml.append("<students>");
        xml.append("<student>");
        xml.append("<name>zhangsan</name>");
        xml.append("<age>20</age>");
        xml.append("</student>");
        xml.append("<student>");
        xml.append("<name>lisi</name>");
        xml.append("<age>22</age>");
        xml.append("</student>");
        xml.append("</students>");

        out.print(xml);
    }
}

AJAX乱码问题

  • 测试内容：

    • 发送ajax get请求
      • 发送数据到服务器，服务器获取的数据是否乱码？
      • 服务器响应给前端的中文，会不会乱码？
    • 发送ajax post请求
      • 发送数据到服务器，服务器获取的数据是否乱码？
      • 服务器响应给前端的中文，会不会乱码？

  • 包括还要测试tomcat服务器的版本：

    • tomcat10和tomcat9都要进行测试。

  • 测试结果：

    • 对于tomcat10来说，关于字符集，我们程序员不需要干涉，不会出现乱码。

    • 对于tomcat9来说呢？

      • 响应中文的时候，会出现乱码，怎么解决？

        response.setContentType("text/html;charset=UTF-8");

      • 发送ajax post请求的时候，发送给服务器的数据，服务器接收之后乱码，怎么解决？

        request.setCharacterEncoding("UTF-8");

AJAX的异步与同步

  • 什么是异步？什么是同步？

    • ajax请求1和ajax请求2，同时并发，谁也不用等谁，这就是异步。（a不等b，b也不等a）
    • 如果ajax请求1在发送的时候需要等待ajax请求2结束之后才能发送，那么这就是同步。（a等待b，或者b等待a，只要发生等待，就是同步。）

  • 异步和同步在代码上如何实现？

    // 假设这个是ajax请求1
// 如果第三个参数是false：这个就表示“ajax请求1”不支持异步，也就是说ajax请求1发送之后，会影响其他ajax请求的发送，只有当我这个请求结束之后，你们其他的ajax请求才能发送。
// false表示，不支持异步。我这个请求发了之后，你们其他的请求都要靠边站。都等着。你们别动呢，等我结束了你们再说。
xhr1.open("请求方式", "URL", false)
xhr1.send()

// 假设这个是ajax请求2
// 如果第三个参数是true：这个就表示“ajax请求2”支持异步请求，也就是说ajax请求2发送之后，不影响其他ajax请求的发送。
xhr2.open("请求方式", "URL", true) 
xhr2.send()

  • 什么情况下用同步？（大部分情况下我们都是使用ajax异步方式，同步很少用。）

    • 举一个例子
      • 用户注册
        • 用户名需要发送ajax请求进行校验
        • 邮箱地址也需要发送ajax请求校验
        • 其他的也可能需要发送ajax请求。。。
        • 并且最终注册按钮的时候，也是发送ajax请求进行注册。
        • 那么显然，注册的Ajax请求和校验的ajax请求不能异步，必须等待所有的校验ajax请求结束之后，注册的ajax请求才能发。

AJAX代码封装

  • AJAX请求相关的代码都是类似的，有很多重复的代码，这些重复的代码能不能不写，能不能封装一个工具类。要发送ajax请求的话，就直接调用这个工具类中的相关函数即可。

  • 接下来，手动封装一个工具类，这个工具类我们可以把它看做是一个JS的库。我们把这个JS库起一个名字，叫做jQuery。（我这里封装的jQuery只是一个前端的库，和后端的java没有关系，只是为了方便web前端代码的编写，提高WEB前端的开发效率）

  • 手动开发jQuery，源代码

    function jQuery(selector){
    if (typeof selector == "string") {
        if (selector.charAt(0) == "#") {
            domObj = document.getElementById(selector.substring(1))
            return new jQuery()
        }
    }
    if (typeof selector == "function") {
        window.onload = selector
    }
    this.html = function(htmlStr){
        domObj.innerHTML = htmlStr
    }
    this.click = function(fun){
        domObj.onclick = fun
    }
    this.focus = function (fun){
        domObj.onfocus = fun
    }
    this.blur = function(fun) {
        domObj.onblur = fun
    }
    this.change = function (fun){
        domObj.onchange = fun
    }
    this.val = function(v){
        if (v == undefined) {
            return domObj.value
        }else{
            domObj.value = v
        }
    }

    // 静态的方法，发送ajax请求
    /**
     * 分析：使用ajax函数发送ajax请求的时候，需要程序员给我们传过来什么？
     *      请求的方式(type)：GET/POST
     *      请求的URL(url)：url
     *      请求时提交的数据(data)：data
     *      请求时发送异步请求还是同步请求(async)：true表示异步，false表示同步。
     */
    jQuery.ajax = function(jsonArgs){
        // 1.
        var xhr = new XMLHttpRequest();
        // 2.
        xhr.onreadystatechange = function(){
            if (this.readyState == 4) {
                if (this.status == 200) {
                    // 我们这个工具类在封装的时候，先不考虑那么多，假设服务器返回的都是json格式的字符串。
                    var jsonObj = JSON.parse(this.responseText)
                    // 调用函数
                    jsonArgs.success(jsonObj)
                }
            }
        }

        if (jsonArgs.type.toUpperCase() == "POST") {
            // 3.
            xhr.open("POST", jsonArgs.url, jsonArgs.async)
            // 4.
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
            xhr.send(jsonArgs.data)
        }

        if (jsonArgs.type.toUpperCase() == "GET") {
            xhr.open("GET", jsonArgs.url + "?" + jsonArgs.data, jsonArgs.async)
            xhr.send()
        }

    }
}
$ = jQuery

// 这里有个细节，执行这个目的是为了让静态方法ajax生效。
new jQuery()

  • 使用以上库，怎么用？

    <script type="text/javascript" src="/ajax/js/jQuery-1.0.0.js"></script>
<script type="text/javascript">
    $(function(){
        $("#btn1").click(function(){
            $.ajax({
                type : "POST",
                url : "/ajax/ajaxrequest11",
                data : "username=" + $("#username").val(),
                async : true,
                success : function(json){
                    $("#div1").html(json.uname)
                }
            })
        })
    })
</script>

axios-AJAX

使用axios，不用下载，直接引入

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>axios 发送 AJAX请求</title>
    <script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.js"></script>
</head>

<body>
    <button>GET</button>
    <button>POST</button>
    <button>AJAX</button>

    <script>
        // https://github.com/axios/axios
        const btns = document.querySelectorAll('button');

        //配置 baseURL
        axios.defaults.baseURL = 'http://127.0.0.1:8000';

        btns[0].onclick = function () {
            //GET 请求
            axios.get('/axios-server', {
                //url 参数
                params: {
                    id: 100,
                    vip: 7
                },
                //请求头信息
                headers: {
                    name: 'atguigu',
                    age: 20
                }
            }).then(value => {
                console.log(value);
            });
        }

        btns[1].onclick = function () {
            axios.post('/axios-server', {
                username: 'admin',
                password: 'admin'
            }, {
                //url 
                params: {
                    id: 200,
                    vip: 9
                },
                //请求头参数
                headers: {
                    height: 180,
                    weight: 180,
                }
            });
        }
    
        btns[2].onclick = function(){
            axios({
                //请求方法
                method : 'POST',
                //url
                url: '/axios-server',
                //url参数
                params: {
                    vip:10,
                    level:30
                },
                //头信息
                headers: {
                    a:100,
                    b:200
                },
                //请求体参数
                data: {
                    username: 'admin',
                    password: 'admin'
                }
            }).then(response=>{
                //响应状态码
                console.log(response.status);
                //响应状态字符串
                console.log(response.statusText);
                //响应头信息
                console.log(response.headers);
                //响应体
                console.log(response.data);
            })
        }
    </script>
</body>

</html>

fetch-AJAX

fetch 是一种用于在浏览器中进行网络请求的现代API，可以替代传统的 XMLHttpRequest。使用 fetch 实现 AJAX 可以按照以下步骤进行操作。

fetch(url, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(data)
})
.then(response => {
  // 处理响应
})
.catch(error => {
  // 处理错误
})


//method：请求的方法，默认为 GET。
//headers：请求的头部，可以设置为一个对象，其中包含需要传递的头部信息。
//body：请求的实体，可以设置为字符串、Buffer 对象、Blob 对象或 FormData 对象等。
//mode：请求的模式，可以设置为 cors、no-cors 或 same-origin。
//cache：请求的缓存模式，可以设置为 default、no-store、reload 或 force-cache 等。
//redirect：请求的重定向模式，可以设置为 manual、follow 或 error。

官方文档：https://developer.mozilla.org/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/fetch

1.使用 fetch 方法发送请求。其中，url 是请求的地址。fetch 方法会返回一个 Promise 对象。

fetch(url)
  .then(response => {
    // 处理响应
  })
  .catch(error => {
    // 处理错误
  })

2.处理响应。在 then 方法中，可以对响应进行处理。例如，解析 JSON 格式的响应：

fetch(url)
  .then(response => response.json())
  .then(data => {
    // 处理数据
  })
  .catch(error => {
    // 处理错误
  })

3.处理错误。

fetch(url)
  .then(response => response.json())
  .then(data => {
    // 处理数据
  })
  .catch(error => {
    console.error(error);
  })

AJAX实现省市联动

省市联动是一种常见的需求，可以使用 AJAX 技术来实现。以下是实现省市联动的基本步骤：

  1. 准备数据

    首先需要准备好省市数据，可以从后端获取，也可以使用静态数据。数据的格式可以是 JSON、XML 或其他格式。

  2. 创建 HTML 结构

    创建用于选择省、市的 HTML 元素，例如：

    <select id="province">
  <option value="">请选择省份</option>
  <option value="1">北京市</option>
  <option value="2">上海市</option>
  <option value="3">广东省</option>
  <!-- 其他省份 -->
</select>
<select id="city">
  <option value="">请选择城市</option>
</select>

    其中，province 元素用于选择省份，city 元素用于选择城市。

  3. 实现 AJAX 请求

    在选择省份时，需要向后端发送 AJAX 请求，获取对应省份的城市数据。可以使用 XMLHttpRequest 或 fetch 进行 AJAX 请求。

    document.getElementById('province').addEventListener('change', function() {
  var provinceId = this.value;
  if (provinceId) {
    fetch('/api/cities?provinceId=' + provinceId)
      .then(response => response.json())
      .then(data => {
        // 处理数据
      })
      .catch(error => {
        // 处理错误
      });
  }
});

    其中，fetch 方法用于发送 AJAX 请求，response.json() 方法用于将响应解析为 JSON 对象。需要根据后端接口的实际情况来修改请求地址和参数。

  4. 处理数据
    在获取到城市数据后，需要将数据填充到城市选择框中。可以使用以下方式来实现：

    document.getElementById('province').addEventListener('change', function() {
  var provinceId = this.value;
  if (provinceId) {
    fetch('/api/cities?provinceId=' + provinceId)
      .then(response => response.json())
      .then(data => {
        var citySelect = document.getElementById('city');
        citySelect.innerHTML = '<option value="">请选择城市</option>';
        data.forEach(function(city) {
          var option = document.createElement('option');
          option.value = city.id;
          option.textContent = city.name;
          citySelect.appendChild(option);
        });
      })
      .catch(error => {
        // 处理错误
      });
  }
});

    其中，data 是从后端获取的城市数据，citySelect 是城市选择框元素。使用 innerHTML 清空旧选项，然后遍历数据，创建新的选项并添加到城市选择框中。

AJAX跨域问题

跨域

  • 跨域是指从一个域名的网页去请求另一个域名的资源。比如从百度(https://baidu.com)页面去请求京东(https://www.jd.com)的资源。
  • 通过超链接或者form表单提交或者window.location.href的方式进行跨域是不存在问题的（大家可以编写程序测试一下）。但在一个域名的网页中的一段js代码发送ajax请求去访问另一个域名中的资源，由于同源策略的存在导致无法跨域访问，那么ajax就存在这种跨域问题。
  • 同源策略是指一段脚本只能读取来自同一来源的窗口和文档的属性，同源就是协议、域名和端口都相同。
  • 同源策略有什么用？如果你刚刚在网银输入账号密码，查看了自己还有1万块钱，紧接着访问一些不规矩的网站，这个网站可以访问刚刚的网银站点，并且获取账号密码，那后果可想而知。所以，从安全的角度来讲，同源策略是有利于保护网站信息的。
  • 有一些情况下，我们是需要使用ajax进行跨域访问的。比如某公司的A页面(a.bjpowernode.com)有可能需要获取B页面(b.bjpowernode.com)。

同源还是不同源

  • 区分同源和不同源的三要素

    • 协议
    • 域名
    • 端口

  • 协议一致，域名一致，端口号一致，三个要素都一致，才是同源，其它一律都是不同源

URL1URL2是否同源描述
http://localhost:8080/a/index.htmlhttp://localhost:8080/a/first同源协议 域名 端口一致
http://localhost:8080/a/index.htmlhttp://localhost:8080/b/first同源协议 域名 端口一致
http://www.myweb.com:8080/a.jshttps://www.myweb.com:8080/b.js不同源协议不同
http://www.myweb.com:8080/a.jshttp://www.myweb.com:8081/b.js不同源端口不同
http://www.myweb.com/a.jshttp://www.myweb2.com/b.js不同源域名不同
http://www.myweb.com/a.jshttp://crm.myweb.com/b.js不同源子域名不同

AJAX跨域解决方案

方案1：设置响应头

  • 核心原理：跨域访问的资源允许你跨域访问。

  • 实现：

    • response.setHeader("Access-Control-Allow-Origin", "http://localhost:8080"); // 允许某个
response.setHeader("Access-Control-Allow-Origin", "*"); // 允许所有
方案2：jsonp

  • jsonp：json with padding（带填充的json【学完之后再理解这个什么意思！！！】）

  • jsonp不是一个真正的ajax请求。只不过可以完成ajax的局部刷新效果。可以说jsonp是一种类ajax请求的机制。

  • jsonp不是ajax请求，但是可以完成局部刷新的效果，并且可以解决跨域问题。

  • 注意：jsonp解决跨域的时候，只支持GET请求。不支持post请求。

    实践：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例</title>
</head>
<body>
    用户名: <input type="text" id="username">
    <p></p>
    <script>
        //获取 input 元素
        const input = document.querySelector('input');
        const p = document.querySelector('p');
        
        //声明 handle 函数
        function handle(data){
            input.style.border = "solid 1px #f00";
            //修改 p 标签的提示文本
            p.innerHTML = data.msg;
        }

        //绑定事件
        input.onblur = function(){
            //获取用户的输入值
            let username = this.value;
            //向服务器端发送请求 检测用户名是否存在
            //1. 创建 script 标签
            const script = document.createElement('script');
            //2. 设置标签的 src 属性
            script.src = 'http://127.0.0.1:8000/check-username';
            //3. 将 script 插入到文档中
            document.body.appendChild(script);
        }
    </script>
</body>
</html>

    ​

方案3：jQuery封装的jsonp

  • 牛人们写的jQuery库，已经对jsonp进行了封装。大家可以直接拿来用。

  • 用之前需要引入jQuery库的js文件。（这里的jQuery库咱们就不再封装了，咱们直接用jQuery写好的jsonp方式。）

  • jQuery中的jsonp其实就是我们方案2的高度封装，底层原理完全相同。

  • 核心代码

    • //1.方法
$.ajax({
    type : "GET",
    url : "跨域的url",
    dataType : "jsonp", // 指定数据类型
    jsonp : "fun", // 指定参数名（不设置的时候，默认是："callback"）
    jsonpCallback : "sayHello" // 指定回调函数的名字
							   // （不设置的时候，jQuery会自动生成一个随机的回调函数，
    						   //并且这个回调函数还会自动调用success的回调函数。）
})


//2.方法
$.ajax({
  url: 'http://example.com/data',
  dataType: 'jsonp',
  success: function(data) {
    console.log(data);
  },
  error: function(xhr, status, error) {
    console.log('Error:', error);
  }
});
方案4：代理机制（httpclient）
  • 使用Java程序怎么去发送get/post请求呢？【GET和POST请求就是HTTP请求。】
    • 第一种方案：使用JDK内置的API（java.net.URL…），这些API是可以发送HTTP请求的。
    • 第二种方案：使用第三方的开源组件，比如：apache的httpclient组件。（httpclient组件是开源免费的，可以直接用）
  • 在java程序中，使用httpclient组件可以发送http请求。

    • 对于httpclient组件的代码，大家目前可以不进行深入的研究，可以从网上直接搜。然后粘贴过来，改一改，看看能不能完成发送get和post请求。

    • 使用httpclient组件，需要先将这个组件相关的jar包引入到项目当中。

      实例：

      ​ 我们通过创建一个 XMLHttpRequest 对象，设置请求地址为/proxy?url=http://example.com/data，其中/proxy是代理地址，用于将请求转发到http://example.com/data。服务器端在收到该请求后，将请求转发到目标地址，并将响应数据返回给客户端。

      var xhr = new XMLHttpRequest();
xhr.open('GET', '/proxy?url=http://example.com/data');
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.send();
方案5：CORS

  • CORS（Cross-Origin Resource Sharing，跨域资源共享）是一种标准化的跨域解决方案，它通过在服务器端设置响应头信息来允许跨域请求。CORS 支持所有类型的 HTTP 请求，包括 GET、POST 等，并且支持错误处理等高级功能。

    例：以下是一个允许所有域名的 CORS 响应头信息：

    'Access-Control-Allow-Origin': '*'

    使用 CORS 跨域请求时，需要在客户端设置请求头信息，告诉服务器端该请求是跨域请求，需要进行 CORS 处理。例如，以下是一个使用 CORS 发起跨域请求的示例：

     const btn = document.querySelector('button');
        btn.onclick = function(){
            //1. 创建对象
            const x = new XMLHttpRequest();
            //2. 初始化设置
            x.open("GET", "http://127.0.0.1:8000/cors-server");
            //3. 发送
            x.send();
            //4. 绑定事件
            x.onreadystatechange = function(){
                if(x.readyState === 4){
                    if(x.status >= 200 && x.status < 300){
                        //输出响应体
                        console.log(x.response);
                    }
                }
            }
        }
方案6：nginx反向代理

AJAX实现搜索联想 自动补全

  • 什么是搜索联想？自动补全？
    • 百度是一个很典型的代表。在百度的搜索框中输入相关信息的时候，会有搜索联想以及自动补全。
    • 搜索联想和自动补全：实际上是为了方便用户的使用。让用户的体验更好。
    • 搜索联想：当用户输入一些单词之后，自动联想出用户要搜索的信息，给一个提示。
    • 自动补全：当联想出一些内容之后，用户点击某个联想的单词，然后将这个单词自动补全到搜索框当中。
    • 搜索联想和自动补全功能，因为是页面局部刷新效果，所以需要使用ajax请求来完成。
  • 搜索联想，自动补全功能的核心实现原理？
    • 当键盘事件发生之后，比如：keyup：键弹起事件。
    • 发送ajax请求，请求中提交用户输入的搜索内容，例如：北京（发送ajax请求，携带“北京”两个字）
    • 后端接收到ajax请求，接收到“北京”两个字，执行select语句进行模糊查询。返回查询结果。
    • 将查询结果封装成json格式的字符串，将json格式的字符串响应到前端。
    • 前端接收到json格式的字符串之后，解析这个json字符串，动态展示页面。

以下是一个使用 jQuery 实现搜索联想自动补全的示例代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>搜索联想</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <input type="text" id="search-input">
  <ul id="search-result"></ul>
  
  <script>
    $(function() {
      // 绑定输入框的 keyup 事件
      $('#search-input').on('keyup', function() {
        // 获取输入框的值
        var keyword = $(this).val();
        
        // 发送 AJAX 请求
        $.ajax({
          url: 'search.php',
          data: { keyword: keyword },
          dataType: 'json',
          success: function(data) {
            // 清空搜索结果列表
            $('#search-result').empty();
            
            // 将返回的数据添加到搜索结果列表中
            $.each(data, function(index, item) {
              $('<li>').text(item).appendTo($('#search-result'));
            });
          },
          error: function(xhr, status, error) {
            console.log('Error:', error);
          }
        });
      });
    });
  </script>
</body>
</html>



  /*在上面的代码中，我们首先在页面上添加了一个输入框和一个搜索结果列表，然后使用 jQuery 绑定了输入框的 keyup 事件。当用户在输入框中输入内容时，将会触发该事件，代码会向服务器发送 AJAX 请求，请求地址为 search.php。请求参数为 keyword，值为输入框的值。服务器返回的数据为 JSON 格式，我们将其解析后添加到搜索结果列表中。
  需要注意的是，在实际开发中，需要根据实际情况对代码进行调整，例如 AJAX 请求的地址、请求方式、请求参数等。另外，为了保证搜索联想的效果和性能，还需要对代码进行优化，例如对输入框的输入进行限制、对 AJAX 请求进行缓存等。*/

以下是一个使用 axios 实现搜索联想自动补全的示例代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>搜索联想</title>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
  <input type="text" id="search-input">
  <ul id="search-result"></ul>
  
  <script>
    const searchInput = document.querySelector('#search-input');
    const searchResult = document.querySelector('#search-result');
    
    searchInput.addEventListener('input', function() {
      const keyword = this.value;
      
      axios.get('search.php', { params: { keyword: keyword } })
        .then(function(response) {
          searchResult.innerHTML = '';
          response.data.forEach(function(item) {
            const li = document.createElement('li');
            li.textContent = item;
            searchResult.appendChild(li);
          });
        })
        .catch(function(error) {
          console.log('Error:', error);
        });
    });
  </script>
</body>
</html>


/*在上面的代码中，我们使用了 axios 库的 get 方法向服务器发送 GET 请求，并将请求参数作为 params 属性传递。服务器返回的数据为 JSON 格式，我们在响应的 then 方法中将其解析后添加到搜索结果列表中。

需要注意的是，axios 库的使用方法与 jQuery 不同，例如请求方法的写法、请求参数的传递方式等。另外，如果需要在发送请求时设置请求头、请求超时时间等，还需要对代码进行调整。*/

如果你想在服务器端实现搜索联想自动补全，需要编写一个后端脚本来处理 AJAX 请求。以下是一个使用 Node.js 和 Express 框架实现搜索联想自动补全的示例代码：

server.js

const express = require('express');
const app = express();
const port = 3000;

// 模拟数据
const data = ['HTML', 'CSS', 'JavaScript', 'Vue.js', 'React', 'Node.js'];

// 处理 AJAX 请求
app.get('/search', (req, res) => {
  const keyword = req.query.keyword;
  const result = data.filter(item => item.includes(keyword));
  res.json(result);
});

// 启动服务器
app.listen(port, () => {
  console.log(`Server is listening on port ${port}.`);
});



/*    在上面的代码中，我们首先定义了一个数组 data，其中包含了一些模拟数据。然后使用 Express 框架创建了一个服务器，并定义了一个路由 /search 来处理 AJAX 请求。当客户端发送 GET 请求时，服务器会获取请求参数 keyword，然后使用 filter 方法过滤出包含关键词的数据，并将结果以 JSON 格式返回给客户端。
      最后，我们在服务器启动时监听指定的端口，等待客户端的请求。使用命令 node server.js 即可启动服务器。
      需要注意的是，上述代码仅为示例代码，实际开发中需要根据实际情况对代码进行调整，例如数据来源、请求参数的处理方式等。另外，为了保证搜索联想的效果和性能，还需要对代码进行优化，例如对搜索结果进行缓存、对搜索过程进行限制等。*/

server.js附件详细

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

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

//3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.get('/server', (request, response) => {
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //设置响应体
    response.send('HELLO AJAX - 2');
});

//可以接收任意类型的请求 
app.all('/server', (request, response) => {
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //响应头
    response.setHeader('Access-Control-Allow-Headers', '*');
    //设置响应体
    response.send('HELLO AJAX POST');
});

//JSON 响应
app.all('/json-server', (request, response) => {
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //响应头
    response.setHeader('Access-Control-Allow-Headers', '*');
    //响应一个数据
    const data = {
        name: 'atguigu'
    };
    //对对象进行字符串转换
    let str = JSON.stringify(data);
    //设置响应体
    response.send(str);
});

//针对 IE 缓存
app.get('/ie', (request, response) => {
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //设置响应体
    response.send('HELLO IE - 5');
});

//延时响应
app.all('/delay', (request, response) => {
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.setHeader('Access-Control-Allow-Headers', '*');
    setTimeout(() => {
        //设置响应体
        response.send('延时响应');
    }, 1000)
});

//jQuery 服务
app.all('/jquery-server', (request, response) => {
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.setHeader('Access-Control-Allow-Headers', '*');
    // response.send('Hello jQuery AJAX');
    const data = {name:'尚硅谷'};
    response.send(JSON.stringify(data));
});

//axios 服务
app.all('/axios-server', (request, response) => {
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.setHeader('Access-Control-Allow-Headers', '*');
    // response.send('Hello jQuery AJAX');
    const data = {name:'尚硅谷'};
    response.send(JSON.stringify(data));
});

//fetch 服务
app.all('/fetch-server', (request, response) => {
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.setHeader('Access-Control-Allow-Headers', '*');
    // response.send('Hello jQuery AJAX');
    const data = {name:'尚硅谷'};
    response.send(JSON.stringify(data));
});

//jsonp服务
app.all('/jsonp-server',(request, response) => {
    // response.send('console.log("hello jsonp")');
    const data = {
        name: '尚硅谷atguigu'
    };
    //将数据转化为字符串
    let str = JSON.stringify(data);
    //返回结果
    response.end(`handle(${str})`);
});

//用户名检测是否存在
app.all('/check-username',(request, response) => {
    // response.send('console.log("hello jsonp")');
    const data = {
        exist: 1,
        msg: '用户名已经存在'
    };
    //将数据转化为字符串
    let str = JSON.stringify(data);
    //返回结果
    response.end(`handle(${str})`);
});

//
app.all('/jquery-jsonp-server',(request, response) => {
    // response.send('console.log("hello jsonp")');
    const data = {
        name:'尚硅谷',
        city: ['北京','上海','深圳']
    };
    //将数据转化为字符串
    let str = JSON.stringify(data);
    //接收 callback 参数
    let cb = request.query.callback;

    //返回结果
    response.end(`${cb}(${str})`);
});

app.all('/cors-server', (request, response)=>{
    //设置响应头
    response.setHeader("Access-Control-Allow-Origin", "*");
    response.setHeader("Access-Control-Allow-Headers", '*');
    response.setHeader("Access-Control-Allow-Method", '*');
    // response.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1:5500");
    response.send('hello CORS');
});

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

附录：HTTP状态信息

1xx: 信息

消息:描述:
100 Continue服务器仅接收到部分请求，但是一旦服务器并没有拒绝该请求，客户端应该继续发送其余的请求。
101 Switching Protocols服务器转换协议：服务器将遵从客户的请求转换到另外一种协议。

2xx: 成功

消息:描述:
200 OK请求成功（其后是对GET和POST请求的应答文档。）
201 Created请求被创建完成，同时新的资源被创建。
202 Accepted供处理的请求已被接受，但是处理未完成。
203 Non-authoritative Information文档已经正常地返回，但一些应答头可能不正确，因为使用的是文档的拷贝。
204 No Content没有新文档。浏览器应该继续显示原来的文档。如果用户定期地刷新页面，而Servlet可以确定用户文档足够新，这个状态代码是很有用的。
205 Reset Content没有新文档。但浏览器应该重置它所显示的内容。用来强制浏览器清除表单输入内容。
206 Partial Content客户发送了一个带有Range头的GET请求，服务器完成了它。

3xx: 重定向

消息:描述:
300 Multiple Choices多重选择。链接列表。用户可以选择某链接到达目的地。最多允许五个地址。
301 Moved Permanently所请求的页面已经转移至新的url。
302 Found所请求的页面已经临时转移至新的url。
303 See Other所请求的页面可在别的url下被找到。
304 Not Modified未按预期修改文档。客户端有缓冲的文档并发出了一个条件性的请求（一般是提供If-Modified-Since头表示客户只想比指定日期更新的文档）。服务器告诉客户，原来缓冲的文档还可以继续使用。
305 Use Proxy客户请求的文档应该通过Location头所指明的代理服务器提取。
306 Unused此代码被用于前一版本。目前已不再使用，但是代码依然被保留。
307 Temporary Redirect被请求的页面已经临时移至新的url。

4xx: 客户端错误

消息:描述:
400 Bad Request服务器未能理解请求。
401 Unauthorized被请求的页面需要用户名和密码。
402 Payment Required此代码尚无法使用。
403 Forbidden对被请求页面的访问被禁止。
404 Not Found服务器无法找到被请求的页面。
405 Method Not Allowed请求中指定的方法不被允许。
406 Not Acceptable服务器生成的响应无法被客户端所接受。
407 Proxy Authentication Required用户必须首先使用代理服务器进行验证，这样请求才会被处理。
408 Request Timeout请求超出了服务器的等待时间。
409 Conflict由于冲突，请求无法被完成。
410 Gone被请求的页面不可用。
411 Length Required“Content-Length” 未被定义。如果无此内容，服务器不会接受请求。
412 Precondition Failed请求中的前提条件被服务器评估为失败。
413 Request Entity Too Large由于所请求的实体的太大，服务器不会接受请求。
414 Request-url Too Long由于url太长，服务器不会接受请求。当post请求被转换为带有很长的查询信息的get请求时，就会发生这种情况。
415 Unsupported Media Type由于媒介类型不被支持，服务器不会接受请求。
416服务器不能满足客户在请求中指定的Range头。
417 Expectation Failed

5xx: 服务器错误

消息:描述:
500 Internal Server Error请求未完成。服务器遇到不可预知的情况。
501 Not Implemented请求未完成。服务器不支持所请求的功能。
502 Bad Gateway请求未完成。服务器从上游服务器收到一个无效的响应。
503 Service Unavailable请求未完成。服务器临时过载或当机。
504 Gateway Timeout网关超时。
505 HTTP Version Not Supported服务器不支持请求中指明的HTTP协议版本。
Citizen-L
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
ajax学习笔记
11-30
ajax学习笔记。。。。。。。。。。。。。。。。。。。。。。
Ajax学习 基础概念 发送请求 常见方法
努力！加油！！
03-03 730
ajax学习笔记
异步请求之AJAX，实现简单的用户名输入检测
07-20 1399
什么是异步请求 异步请求干什么的 异步请求有哪几种 AJAX使用： chuli 和 chuli() 的不同的。
Ajax学习笔记
qq_50276105的博客
08-24 231
用户重复发送请求，每次都会重复创建一个请求，所以给服务器造成了一个比较大的压力，所以用户重复发送请求的时候，可以校对前一个请求和后一个请求，如果来自同一个用户发送的同一个请求，那么可以先取消前面的请求在创建一个新的请求，使得相同请求始终只有一个。是一种安全机制：网页的url和Ajax访问的目标资源的url的协议、域名、端口号、必须完全一致。一、向服务器发送Ajax的四种方式：JavaScript、jQuery、fetch、axios。2、x.abord(取消请求，绑定dom元素实现手动取消请求)
Ajax 学习笔记
qq_46485137的博客
02-13 392
AJAX= Asynchronous JavaScript and XML(异步的JavaScript和XML)。Ajax是一种在无需加载整个网页的情况下，能够更新部分网页的技术，它不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。例如在搜索框，输入字符的时候，提醒框实时更新，但是页面地址没变，这就是Ajax的功劳。
Ajax学习笔记整理
10-22
Ajax: Asynchronous JavaScript and Xml , 异步js脚本和xml , 常用来实现页面局部的异步刷新, 对提高用户体验有很大帮助. Xml在多语言时较有优势, 但Ajax技术实际上较多采用Json对象而不是Xml来处理数据
jQuery+AJAX学习笔记
10-10
jQuery+AJAX学习笔记
jquery中ajax学习笔记3
10-28
由于很多知识都已经做了详细介绍，本节只介绍需要修改的代码，使用jqery封装的ajax使用XML格式接收服务器端的数据，web.xml、后台的servet都不用改
13. FastLED 示例3则
acktomas的博客
06-12 264
【代码】13. FastLED 示例3则。
Ajax 快速入门
m0_66357705的博客
06-09 1060
Ajax是一种Web开发技术，允许在不重新加载整个页面的情况下，与服务器交换数据并更新网页的部分内容。：Ajax允许通过JavaScript向服务器发送请求，并能够接收服务器响应的数据。：它使得Web应用程序可以在后台与服务器进行数据交换，而不会干扰用户当前的页面操作。：在搜索框中输入文字时，动态显示搜索建议。：在用户注册或修改用户名时，实时检查用户名是否已被占用。：Ajax通常通过JavaScript的对象或现代的fetchAPI来实现，这些API允许开发者发送HTTP请求并与服务器进行通信。
Python学习笔记11 -- 细碎内容
m0_71291382的博客
06-12 234
记录一些琐碎点，包括如何注释、变量常量说明、字符串拼接的三种方法及转义字符的简单说明
《雅思口语真经总纲1.0》笔记——第二章：官方评分标准真经——Lexical Resource 词汇资源——三十组同义形容词列表
Dontla的博客
06-09 623
直接提取词汇重点，不看例句了。
Nginx学习笔记（十）如何配置HTTPS协议？（公网）
ACGkaka的博客
06-10 722
Nginx学习笔记（十）如何配置HTTPS协议？（公网）
802.11漫游流程简单解析与笔记_Part3
Mr_liu_666的博客
06-10 243
看过Part1的应该都知道，标准关联流程是auth*2 associate*2 key*4，但ns3里面没有与auth有关的部分，third脚本里面有cap字段，但无auth也无key，所以part3是空的
程序固化——FPGA学习笔记6
m0_69082048的博客
06-12 475
BIN:一般是由Vivado软件编译产生的，存储在特定目录下的二进制文件MCS:一般通过VivadoGUl界面操作或者TCL命令生成，MCS文件里包含了BIN文件的内容，除此之外，每行的开始有地址信息，最后一个Byte是CRC校验信息。
JAVA学习笔记DAY5——SSM_Spring
weixin_47227105的博客
06-13 511
Spring Ioc容器是复杂容器。一个项目project拆分成多个模块module。配置方式包括三种：xml、注解、配置类。从文件结构的角度看，框架=jar包+是SSM的一种简化，快速创建服务。用来维护不同服务的相互调用。控制层组件 Servlet。业务逻辑层 Service。持久化层组件 Dao。
【perfetto分析性能学习笔记】
q_2474932226的博客
06-12 292
perfrtto性能分析
1）Java项目笔记搭建系统梳理相关知识
最新发布
WLKUYM的博客
06-15 526
工作有年头了，学到了很多技术，收获了很多。但是对与工作相关的专业技能知识的掌握杂而乱，不够全面系统。因此做了个项目笔记来辅助梳理所掌握内容，方便需要时拿出来看看，前面做的时候，反反复复重建过好几次，目前的笔记结构较为满意（看过很多资料，没有令我满意的，别人总结的再好，终究不是自己的）事先说明，咱不是卖书的，我搞得也是电子书。毕竟实体书太沉了，贵（或许买了就是块板砖，压箱底吃灰了，浪费钱），拿着也不方便，各位可以从脚本之家（宝藏哦）搜索对应书籍下载。
python实践笔记(一): 模块和包
Miracle8070
06-10 579
这次是从实践的再去补充python的相关内容，目的是要写出漂亮的python代码，增强代码的可读，可维护，灵活和高效，方便调试和监控
Ajax学习笔记pink老师
07-29
以下是一份简要的Ajax学习笔记，希望对您有所帮助： 1. 什么是Ajax？ - Ajax全称为Asynchronous JavaScript and XML（异步JavaScript和XML），是一种用于创建交互式Web应用程序的技术。 - 它通过在后台与服务器...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Citizen-L

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值