AJAX中的各种请求问题

最新推荐文章于 2024-04-24 16:00:29 发布
最新推荐文章于 2024-04-24 16:00:29 发布
阅读量94 收藏
点赞数
分类专栏： HTML从入门到精通 文章标签： ajax javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46100493/article/details/128506716
版权

Ajax用处优缺点

  1. 各种搜索框出现词的匹配，登录页面，淘宝充话费
  2. 可以在无需刷新页面与服务器端进行通信
  3. 不能回退，存在跨域问题
    SEO不太友好（对搜索引擎不友好）

Express基本使用

// 1. 引入express
const { response } = require('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端口监听中....");
})

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.onclick = function(){
            //1. 创建AJAX对象
            const xhr = new XMLHttpRequest();
            //2. 设置请求方法和url
            xhr.open('GET','http://127.0.0.1:8000/server?a=100&b=200&C=300');
            //3. 发送
            xhr.send();
            //4. 事件绑定 处理服务端返回的结果
            /*
            on：when：当...时候
            readystate： 是XHR对象中的一个属性，表示状态：
                        0（未初始化） 
                        1（open方法调用完毕） 
                        2（send方法调用完毕） 
                        3（服务端返回部分结果）
                        4（服务端返回所有结果）
            change：改变
            */
            xhr.onreadystatechange = function(){
                //作判断，是4(服务端返回了所有的结果)才处理数据
                if(xhr.readyState === 4){
                    //判断响应状态码：200 404 403 401 500
                    //2XX 都是成功
                    if(xhr.status >= 200 && xhr.status < 300){
                        //处理服务端响应结果： 行 头  空行（咱不管） 体
                        //1. 处理响应行
                        // console.log(xhr.status);//状态码
                        // console.log(xhr.statusText);//状态字符串
                        // //2. 所有响应头
                        // console.log(xhr.getAllResponseHeaders());
                        // //3. 响应体
                        // console.log(xhr.response)
                        //设置result的文本
                        result.innerHTML = xhr.response;
                    }else{

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

后端服务JS文件

// 1. 引入express
const { response } = require('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 - 1");
});
//4. 监听端口启动服务
app.listen(8000, () => {
    console.log("服务已经启动， 8000端口监听中....");
})

发送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(){
            // console.log("test");
            //1. 创建对象,发送请求
            const xhr = new XMLHttpRequest();
            //2. 初始化 设置请求类型与URL
            xhr.open('POST','http://127.0.0.1:8000/server');
            //设置请求头
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
            //设置自定义请求头
            xhr.setRequestHeader('name','superLmk');

            //3.发送 发送的时候只要设置的参数可以识别都可以用
            xhr.send('a=100&b=200&c:300');
            // xhr.send('a:100&b:200&c:300');
            // xhr.send('123456654123');
            //4. 事件绑定
            xhr.onreadystatechange = function () {
                //判断
                if (xhr.readyState === 4) {
                    if (xhr.status >= 200 && xhr.status < 300) { 
                        //处理服务端返回的结果
                        result.innerHTML = xhr.response;
                    }
                }
            }
        }) </script>
</body>
</html>

对应后端文件

//当我们用post方法时只需要在之前的那个js文件中添加下面的代码即可
 app.post('/server',(request, response)=>{
//all可以接收任意类型的请求，（包括自定义）
//app.all('/server', (request, response) => {
    //设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //遇到自定义响应头时可以设置
    response.setHeader('Access-Control-Allow-Headers', '*');
    //设置响应体
    response.send("HELLO AJAX POST");

});

JSON响应

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX 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 () {
            // console.log('test');
            //发送请求
            const xhr = new XMLHttpRequest();
            //设置响应体的数据类型
            xhr.responseType = 'json';
            //初始化
            xhr.open('GET','http://127.0.0.1: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. 自动转换:直接设置ajax响应数据类型
                        console.log(xhr.response);
                        result.innerHTML = xhr.response.name;
                        
                        
                    }
                    
                }

                
            }

            
        }
    </script>

    
</body>
</html>

对应后端文件

app.all('/json-server', (request, response) => {
    //设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //遇到自定义响应头时可以设置
    response.setHeader('Access-Control-Allow-Headers', '*');
    //响应一个数据
    const data = {
        name: 'sliber'

    };
    //对对象进行字符串转化
    let str = JSON.stringify(data);
    //设置响应体
    // response.send("HELLO AJAX JSON");
    response.send(str);

});
passerby&
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ajax 一个完整的ajax请求
fortunegrant的博客
03-12 19万+
var request;if(window.XMLHttpRequest){ request=new XMLHttpRequest(); //IE7+,...}else{ request=new ActiveXObject("Microsoft.XMLHTTP"); //IE6,IE5用XHR发送请求：open(method,url,async) 调用XHR对象，async表示同步还是异步，默...
JQuery发送ajax请求时中文乱码问题解决
10-15
主要介绍了JQuery发送ajax请求时中文乱码问题解决,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
ajax请求中的属性
撒野的博客
07-30 1508
1.url url请求的地址，字符串类型：url:'XXX/XXX/XXX' 2.type type是请求的方式，默认get请求，还有post，一些浏览器还支持put，delete请求，字符串类型：type:'post' 3.xhrFields—withCredentials 一般ajax跨域请求都不会提供凭据（cookie，HTTP认证，客户端SSL证明等），这个属性为true的时候，可以指定某个请求应该发送凭据，Boolean类型：xhrFields:{withCredentials:true} 4.t
AJAX请求中的问题
qq_43369592的博客
09-22 149
AJAX请求中的问题 ##一.请求中出现400 状态码报400，主要有两种形式： bad request 意思是 “错误的请求” invalid hostname 意思是 “不存在的域名” 处理方法 使用新版jquery 二.请求中出现乱码 导入jackson包 <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-dat
Ajax加载中显示loading
狗蛋的博客
09-04 1万+
使用ajaxStart方法定义一个全局的“加载中。。。”提示$(function(){ $("#loading").ajaxStart(function(){ $(this).html.("<img src='/jqueryStu/images/loading.gif' />"); }); $("#loading").ajaxSuccess(funct
AJAX异步请求
热门推荐
Ayhan_huang的博客
09-13 15万+
准备知识在学习AJAX前，我们先了解一下JSON和XMLJSON定义 JSON（JavaScript Object Notation, JS对象标记），是一种轻量级的数据交换格式。 它基于 ECMAScript (w3c制定的JS规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。 简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写，同
关于Ajax请求中传输中文乱码问题的解决方案
10-20
本文给大家分享关于ajax请求中文乱码问题的解决方案，非常不错，具有参考借鉴价值，感兴趣的朋友一起看看吧
ajax请求Session失效问题
10-23
本文由脚本之家小编跟大家分享的ajax请求Session失效问题，感兴趣的朋友一起看看吧
Ajax中的高级请求和响应
03-04
在本文中，BrettMcLaughlin将向您介绍各种状态代码，并展示浏览器如何对其进行处理，本文还给出了在Ajax中使用的比较少见的HTTP请求。在本文中，我将重点介绍这个请求对象的3个关键部分的内容:HTTP就绪状态HTTP状态...
jQuery中ajax的4种常用请求方式
weixin_30878361的博客
11-17 609
jQuery中ajax的4种常用请求方式： 1.$.ajax()返回其创建的 XMLHttpRequest 对象。 $.ajax() 只有一个参数：参数 key/value 对象，包含各配置及回调函数信息。详细参数选项见下。 如果你指定了 dataType 选项，请确保服务器返回正确的 MIME 信息，(如 xml 返回 "text/xml")。 实例： 保存数据到服务器，成功时显示...
JQuery中$.ajax()方法参数详解
我的世界里头，谁懂我！
05-25 654
url: 要求为String类型的参数，（默认为当前页地址）发送请求的地址。 type: 要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和 delete也可以使用，但仅部分浏览器支持。 timeout: 要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局...
详解Ajax请求
qq_49900295的博客
03-30 2万+
目录 1.$.get()函数的语法 2.$.get()发起不带参数的请求 3.$.get()发起带参数的请求 4.$.post()函数的语法 5.$.post()向服务器提交数据 6.$.ajax()函数的语法 7.使用$.ajax()发起GET请求 ​8.使用$.ajax()发起POST请求 1.$.get()函数的语法 jQuery中$.get()函数的功能单一，专门用来发起get请求，从而将服务器上的资源请求到客户端来进行使用。 $.get()函数的语法如下： $..
ajax请求过程
初漾的博客
05-09 6万+
原生态Ajax使用的步骤，最后告诉面试官，我们在工作中是使用jQuery来实现Ajax请求和处理的。在回答的时候尽量详尽，包括方法的参数的个数，顺序和作用，以免被面试官抓住不放。不给面试官提问的机会，那你的回答就牛逼了！ Ajax是什么 我理解Ajax 是一种异步请求数据的一种技术，对于改善用户的体验和程序的性能很有帮助。 Ajax的使用 以下步骤，如果不能理解你死记硬背都要记下来，总
ajax请求
python_o的博客
03-13 1515
ajax技术基于 js 普通的浏览器请求提交方式会将整个页面刷新，ajax请求是局部刷新，大体不变。 ajax() 方法通过 HTTP 请求加载远程数据。 该方法是 jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, .post等。.post 等。.post等。.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数，除非你需要操作不常...
Python爬虫--Ajax异步抓取腾讯视频评论
最新发布
余十步的博客
04-24 426
在某些网站 ，当我们滑下去的时候才会显示出后面的内容就像淘宝一样，滑下去才逐渐显示其他商品这个就是采用做的然后我们现在就是要编写这样的爬虫。
AJAX——案例
weixin_48719464的博客
04-23 373
需求：尽可能同时展示所有商品分类到页面上index.html代码index.css代码。
AJAX——事件循环（EventLoop）
weixin_48719464的博客
04-23 460
1.什么是事件循环？执行代码和收集异步任务，在调用栈空闲时，反复调用任务队列里回调函数执行机制2.为什么有事件循环？JavaScript是单线程的，为了不阻塞JS引擎，设计执行代码的模型3.JavaScript内代码如何执行？执行同步代码，遇到异步代码交给宿主浏览器环境执行异步有了结果后，把回调函数放入任务队列排队当调用栈空闲后，反复调用任务队列里的回调函数。
AJAX——ajax原理
weixin_48719464的博客
04-21 783
定义：XMLHttpRequest（XHR）对象用于与服务器交互。通过XMLHttpRequest可以在不刷新页面的情况下请求特定URL，获取数据。这允许网页在不影响用户操作的情况下，更新页面的局部内容。XMLHttpRequest在AJAX编程中被大量使用。关系：axios内部采用XMLHttpRequest与服务器交互好处：掌握使用XHR与服务器进行数据交互，了解axios内部原理。
36 ajax的相关属性和api
qq_51415791的博客
04-23 640
如果是get方式，请求参数携带在url中 url?因为readySatae是表示ajax请求状态的属性，等于4时，表示已完成所有操作，准备返回响应内容状态。如果是post方式，请求参数携带在send中，key1=value&key2=value.....2.post传参将参数携带在send方法中，open方法中只写地址。3.post传参必须在open方法和send方法之间写请求头。1.get传参将参数携带在url地址并写在open中。2 调用完了send方法，请求发送出去。1 调用了open方法。
ios ajax get请求问题
05-23
在 iOS 中，你可以使用原生的 XMLHttpRequest 对象来发送 AJAX GET 请求。以下是一个简单的示例： ```javascript var xhr = new XMLHttpRequest(); xhr.open('GET', 'http://example.com/api/data', true); xhr....

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值