• 5.XMLHttpRequest对象

    XMLHttpRequest简称xhr，是浏览器提供的Javascript对象。之前我们使用的都是jQuery中的Ajax，现在我们使用原生JS的Ajax

    目录

    1  GET请求

    1.1  不带参数请求

    1.2  带参数请求

    2  URL的编码与解码

    2.1  编码 encodeURI()

    2.2  解码 decodeURI()

    3  POST请求

    4  模拟jQuery中的Ajax函数

    1  GET请求

    1.1  不带参数请求

    先看服务

    前端请求

    • xhr.open()中可以写大写的GET，也可以写小写的GET
    • xhr.readyState与xhr.status写死就行，如果请求成功就需要这两个条件

    xhr.readyState代表请求的状态，4代表请求已经完成了，除了4之外还有下面这几种状态

    1.2  带参数请求

    先看服务，当你传入data1和data2后，服务会将两个值变成整数然后加和，之后返回给你

    get请求直接将要传递的东西放在查询字符串中就可以了，无论什么框架带参数的get请求数据实质上都是以查询字符串的形式传递的

    2  URL的编码与解码

    url地址中只允许出现字母，标点符号，数字，想是中文这种字符会被自动编码

    比如说你在百度上搜索 我 这个汉字，实质上就会编码为%E6%88%91，一般来讲一个汉字就对应着三个百分号值

    2.1  编码 encodeURI()

    2.2  解码 decodeURI()

    3  POST请求

    服务

    请求

    post请求需要使用setRequestHeader()设置请求头，这个是固定写法，setRequestHeader()必须放在open()的后面，send()的前面

    post要发送的数据要写在send()中

    4  模拟jQuery中的Ajax函数

    我们只考虑get与post的情况，需要处理的地方就是将传入的data对象转变为查询字符串的形式，判断是get还是post，除此之外简单弄一弄就行了

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8. head>
    9. <body>
    10.     
    11. body>
    12. <script>
    13.     function myAjax(resquest_obj) {
    14.         xhr = new XMLHttpRequest()
    15.  
    16.         if (/^GET$/i.test(resquest_obj.type)) {
    17.             send_str = ''
    18.             for (i in resquest_obj.data) {
    19.                 send_str = send_str + i + '=' + resquest_obj.data[i] + '&'
    20.             }
    21.             send_str = send_str.slice(0,-1)
    22.             
    23.             resquest_obj.url = resquest_obj.url + '?' + send_str
    24.             
    25.             xhr.open(resquest_obj.type,resquest_obj.url)
    26.  
    27.             xhr.send()
    28.  
    29.             xhr.onreadystatechange = function() {
    30.                 if (xhr.readyState === 4 && xhr.status === 200) {
    31.                     resquest_obj.success(xhr.responseText)
    32.                 }
    33.             }
    34.         }
    35.  
    36.         else if (/^POST$/i.test(resquest_obj.type)) {
    37.             xhr.open(resquest_obj.type,resquest_obj.url)
    38.  
    39.             xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
    40.  
    41.             send_str = ''
    42.             for (i in resquest_obj.data) {
    43.                 send_str = send_str + i + '=' + resquest_obj.data[i] + '&'
    44.             }
    45.             send_str = send_str.slice(0,-1)
    46.             xhr.send(send_str)
    47.  
    48.             xhr.onreadystatechange = function() {
    49.                 if (xhr.readyState === 4 && xhr.status === 200) {
    50.                     resquest_obj.success(xhr.responseText)
    51.                 }
    52.             }
    53.         }
    54.     }
    55. script>
    56. html>

    搞一个服务测一下，get是两个数相加,post是两个数相乘

    get

    post

  • 相关阅读:
    java编程基础总结——30.synchronized和Lock锁解决线程安全问题
    vue3哪个数组方法在vue2上做了升级处理
    linux环境下编译安装OpenCV For Java(CentOS 7)
    TOP10-k8s-安全措施
    初学原生Ajax-补充：原生ajax的封装使用
    【数据库】MySQL基础知识全解
    k8s-19 资源限制与监控
    【Call for papers】USENIX Security-2023（CCF-A/网络与信息安全/2023年2月7日截稿）
    292.Nim游戏 | 877.石子游戏 | 319.灯泡开关
    linux下的永久保存行号
  • 原文地址：https://blog.csdn.net/potato123232/article/details/128032621