AJAX请求及解决跨域问题

最新推荐文章于 2024-04-24 15:15:43 发布

VIP文章 bluepad

最新推荐文章于 2024-04-24 15:15:43 发布

阅读量687

点赞数

分类专栏：面试学习路线阿里巴巴文章标签： android 前端后端

本文链接：https://blog.csdn.net/m0_59092234/article/details/126070597

版权

AJAX 介绍

AJAX其实就是异步的js和xml
通过ajax可以在浏览器中发送异步请求。最大优势：无刷新获取数据
优点：
1.可以无需刷新页面与服务器进行通信
2.允许根据用户事件更新部分页面内容
当然也存在其缺点问题：比如跨域问题等！

一.原生AJAX请求(GET)

由于get和post请求类似，原生代码相比jQuery复杂一些：原生代码演示get请求 jquery演示get和post请求

代码中会出现node.js的相关代码，比如express框架，对node.js不熟悉的同学可以先注重前端代码
前端代码：

<!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> GET 请求</title>
    <style>
        #result{
            width: 100px;
            height: 100px;
            border:  1px solid pink;
        }
    </style>
</head>
<body>
    <button class="btn">发送请求</button>
    <div id="result"></div>
    <script>
        var btn=document.querySelector(".btn")
        const result=document.getElementById("result")
        btn.addEventListener("click",function(){
            //1.创建对象
            const xhr=new XMLHttpRequest()
            //2.初始化 设置请求方法和url
            xhr.open("GET","http://127.0.0.1:3000/server?a=100&b=200");//?后面是get请求加参数方法
            //3.发送
            xhr.send()
            //4.事件绑定 处理服务端返回的结果 
            xhr.onreadystatechange=function(){
                if(xhr.r

最低0.47元/天解锁文章

bluepad

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
AJAX请求及解决跨域问题

AJAX其实就是异步的js和xml通过ajax可以在浏览器中发送异步请求。最大优势无刷新获取数据优点1.可以无需刷新页面与服务器进行通信2.允许根据用户事件更新部分页面内容当然也存在其缺点问题比如跨域问题等！...
复制链接

扫一扫