4.AJAX

最新推荐文章于 2024-09-08 21:17:37 发布
最新推荐文章于 2024-09-08 21:17:37 发布
阅读量47 收藏
点赞数
分类专栏： 前端 文章标签： ajax javascript ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_17686059/article/details/129777101
版权
本文介绍了AJAX的基本概念，包括其异步特性、XML与JSON的数据格式，以及HTTP协议中的请求报文和响应报文结构。此外，还讲解了Express作为Node.js的Web开发框架如何创建服务器，以及如何使用AJAX进行GET和POST请求。最后，提到了跨域问题和解决策略。
摘要由CSDN通过智能技术生成

一、入门

1.1 AJAX

AJAX：Asynchronous JavaScript And XML，直译就是异步JS和XML

通过AJAX可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据。AJAX不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。|

1.2 XML和JSON

  • XML是可扩展标记语言

  • XML被设计用来传输和储存数据

  • 与HTML类似，只不过HTML都是预定义标签，如p，h1，a，div等，而XML中没有预定义标签，都是自定义标签，如以下数据：name=“张三”; age=18; gender=“男”; 用XML表示为：

    <student>
	<name>张三</name>
    <age>18</age>
    <gender>男</gender>
</student>

  • 现在已经被JSON替代了

    {"name":"张三","age":"18","gender":"男"}

1.3 AJAX的特点

优点

  • 可以无需刷新页面而与服务器端进行通信。
  • 允许你根据用户事件来更新部分页面内容。

缺点

  • 没有浏览历史
  • 存在跨域问题
  • SEO不友好

1.4 HTTP协议

HTTP （hypertext transport protocol）协议『超文本传输协议』﹐协议详细规定了浏览器和万维网服务器之间互相通信的规则。

1.5 请求报文

重点是格式与参数：

格式：

  • 行

    • 请求类型：GET或POST
    • 路径：/s？ie=utf-8
    • http协议版本：HTTP/1.1
    GET	/s？ie=utf-8	HTTP/1.1

  • 头

    Host：atguigu.com
Cookie:name=guigu
Content-type:application/ x-wWw-form-urlencoded
User-Agent:chrome 83

  • 空行

  • 体

    username=admin&password=admin

1.6 响应报文

  • 行

    • 协议版本
    • 响应状态码
    • 响应状态字符串
    HTTP/1.1	200		OK

  • 头

    Content-Type: text/html;charset=utf-8
Content-length: 2048
Content-encoding: gzip

  • 空行

  • 体

    <html>
<head></head>
	<body>
		<h1>尚硅谷</h1>
	</body>
</html>

二、基本使用

2.1 express服务端框架基本使用

基于 Node.js 平台，快速、开放、极简的 Web 开发框架

终端运行

npm init --yes		//初始化
npm i express  		//安装

创建js文件（例：express.js），写入以下代码:

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

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

//3、创建路由规则
//request   是对请求报文的封装
//response  是对响应报文的封装
app.get('/',(request,response)=>{
    //设置响应
    response.send('hello,world!nope! hello,express!')
});

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

跳转至js所在文件夹，终端运行

node express.js

ctrl c 结束端口

2.2 AJAX发送GET请求

点击按钮发送请求：

请求格式：

xhr = new XMLHttpRequest();
xhr.open('GET','http://127.0.0.1:8000')
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
xhr.send();
xhr.onreadystatechange = function(){
	if(xhr.readyState===4){
        if(xhr.status>=200 && xhr.status<300){
            result.innerHTML = xhr.response;
        }
    }
}

在前端GET.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>原生AJAX</title>
    <style>
        #result{
            width: 300px;
            height: 80px;
            border:3px solid red;
            line-height:80px;
            font-weight: bold;
            text-align: center;
        }
    </style>
</head>
<body>
    <button>点我发送请求</button>
    <div id="result"></div>
    <script>
        //获取按钮和文本框元素
        const btn = document.getElementsByTagName('button')[0];
        const result = document.getElementById('result');
        //绑定事件
        btn.onclick = function(){
            //1、创建对象
            const xhr = new XMLHttpRequest();
            //2、初始化，设置请求方法和url
            xhr.open('GET','http://127.0.0.1:8000/server');
            //3、发送
            xhr.send();
            //4、事件绑定 处理服务端返回的结果
                //on when 当...时候
                //readyState xhr对象的属性，表示状态0、1、2、3、4
                //change 改变
            xhr.onreadystatechange = function(){
                //判断（服务端返回了所有的结果，4）
                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);  //响应体
                        //设置div的文本
                        result.innerHTML = xhr.response;
                    }
                }
            }
        }
    </script>
</body>
</html>

express服务端格式：

const express = require('express');
const app = express();
app.get('/',(request,response)=>{
    response.setHeader('Access-Control-Allow-Origin','*');
    response.send('hello')
}
app.listen(8000,()=>{
    console.log("服务已经启动，8000端口监听中......")
})

在服务端service.js中写入以下代码:

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

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

//3、创建路由规则
//request   是对请求报文的封装
//response  是对响应报文的封装
app.get('/server',(request,response)=>{
    //设置响应头    -设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    //设置响应体
    response.send('hello!我是通过AJAX传过来的！')
});
//4、监听端口启动服务
app.listen(8000,()=>{
    console.log("服务已经启动，8000端口监听中......")
})

启动服务端，启动前端网页，效果如下：

在这里插入图片描述

AJAX-GET设置请求参数

  • 在地址后，以？分割，a=xx&b=xx&c=xx
http://127.0.0.1:8000/server?a=100&b=20&c=5

2.3 AJAX发送POST请求

与GET相似，将上述GET全改成POST，如：

xhr.open('POST','http://127.0.0.1:8000/server');
app.post('/server',(request,response)=>{
    //设置响应头    -设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','OPTIONS,GET,POST');
    //设置响应体
    response.send('hello!我是通过AJAX传过来的！')
});

响应头为：

response.setHeader('Access-Control-Allow-Origin','OPTIONS,GET,POST');

AJAX-POST设置请求参数

POST可以在send()中设置请求参数：

xhr.send('a=1&b=3')

2.4 AJAX设置请求头信息

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

在service.js中

app.all('/service',(request,response)=>{
    ...
})  //表示能接受任意类型的请求。

2.5 服务端响应JSON数据

//设置响应体
    const data = {
        name:'邹君',
        age:21,
        sex:'男'
    };
    //对对象进行字符串转换
    let str = JSON.stringify(data);
    response.send(str)

通过上述操作，前端只能获得字符串，在前端接受时，也可以通过以下方法转换为对象。

//手动转换
let data = JSON.parse(xhr.response)
result.innerHTML = data.name;
//自动转换-设置返回数据类型
xhr.responseType = 'json';
...
	result.innerHTML = xhr.response.name;

三、

3.1 nodemon自动重启工具

使用node service.js启动服务，最大的弊端就是每次修改js代码，都需要手动关闭再重启服务，特别麻烦，可以通过nodemon自动重启工具来解决：

安装：

先停掉所有服务，然后

npm install -g nodemom

安装完成后，就可以通过以下指令来启动服务端

nodemon service.js

3.2 AJAX请求超时和网络异常处理

//超时设置
xhr.timeout = 2000;
//超时回调
xhr.ontimeout = function(){
	alert('请求超时')
}
//异常回调
xhr.onerror = function(){
	alert('网络异常')
}

3.3 AJAX取消请求

xhr.abort();

3.4 AJAX请求重复发送问题

为了防止同一个请求重复发送，可以在发送时判断是否存在正在发送的相同请求，有则取消上述请求，发生新请求

		//1、创建对象
        let xhr = new XMLHttpRequest();
        let isSending = false;
        btn.onclick = function(){
            xhr.responseType = 'json';
            //2、初始化，设置请求方法和url
            if(isSending){
                xhr.abort()
            }
            xhr = new XMLHttpRequest();
            xhr.open('GET','http://127.0.0.1:8000/server-time');
            isSending = true;
            //3、发送
            xhr.send();
            //4、事件绑定 处理服务端返回的结果
                //on when 当...时候
                //readyState xhr对象的属性，表示状态0、1、2、3、4
                //change 改变
            xhr.onreadystatechange = function(){
                //判断（服务端返回了所有的结果，4）
                if(xhr.readyState===4){
                    //判断响应状态码200、404、403、401、500
                    //2xx的都是成功
                    isSending = false
                    if(xhr.status>=200 && xhr.status<300){
                        //处理结果：行 头 空行 体
                        console.log(xhr.status); //响应状态码
                        console.log(xhr.statusText); //响应状态字符串
                        console.log(xhr.getAllResponseHeaders()); //所有响应头
                        console.log(xhr.response);  //响应体
                        //设置div的文本
                        result.innerHTML = xhr.response.name;
                    }else{

                    }
                }
            }
        }

在这里插入图片描述

3.5 使用fetch函数发送AJAX请求

前端可以使用fetch函数来发送AJAX请求：

格式如下：

fetch('http://127.0.0.1:8000',{
    //请求方法
    method:'POST'，
    //请求头
    headers:{
    	name:''
	},
    //请求体，GET请求不能设置body
    body:{
      
    }
}).then(response=>{
    console.log(response);
})

四、跨域

4.1 同源策略

同源：协议、域名、端口 必须完全相同。

违背同源策略就是跨域；

4.2 解决跨域

未完待续

超高中级的咸鱼
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 引入jquery 使用$.ajax
weixin_42066070的博客
06-09 1332
2.如果要引入指定版本 在package.json里添加，然后再npm i
ajax方法参数详解,$.ajax()方法参数详解
weixin_42298760的博客
08-05 2755
会灵活的运用ajax的方法，非常重要，本文先给大家介绍ajax的几种方法，然后通过实例给大家分析详解，具体内容请看下文吧1.url:要求为string类型的参数，(默认为当前页地址)发送请求的地址。2.type:要求为string类型的参数，请求方式(post或get)默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。3.timeout:要求为numb...
第8讲：$.ajax方法使用详解
软件之家的博客
06-23 4008
jQuery对象上面定义了Ajax方法（$.ajax()），用来处理Ajax操作。调用该方法后，浏览器就会向服务器发出一个HTTP请求。ajax方法有很多属性，但并非每次调用都要使用所有属性，本讲详细介绍了每个属性的作用，并给出具体的调用案例，分别从服务器返回文本格式数据，JSON格式数据及xml格式数据。
$.ajax()的请求
ren202009的博客
06-08 2050
一、$.ajax(url,[settings]);通过 HTTP 请求加载远程数据。jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。最简单的情况下，$.ajax()可以不带任何参数直接使用。注意，所有的选项都可以通过$.ajaxSetup()函数来全局设置。无参数 （1）url(默认: 当前页地址) 发送请求的...
$.ajax()实现ajax语法格式及完整案例
pig_pig32的博客
08-23 3644
$.ajax()代码模板 jQuery实现ajax语法为：$.ajax({})，其中{}为对象，对象里面的key键是固定的，比如: 1、type: 表示请求方式，一般为post或get 2、url表示请求的地址 3、contentType表示发送信息至服务器时内容编码类型 4、data表示发送到服务器的数据 5、dataType表示预期服务器返回数据的类型如：text，json，xml等等类型 6、success表示请求成功后的回调函数 7、error自动判断 (xml 或 html)。请求失败时调用此函数
js之原生ajax、Jquery-$.ajax、自定义ajax（post请求、get请求）
qq_48617322的博客
08-31 1798
js之原生ajax、Jquery-$.ajax、自定义ajax（post请求、get请求）
$.ajax()方法详解
热门推荐
Ha_Girl的博客
05-31 24万+
$.ajax()方法详解 jquery中的ajax方法参数总是记不住，这里记录一下。 1.url: 要求为String类型的参数，（默认为当前页地址）发送请求的地址。 2.type: 要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。 3.timeout: 要求为Number...
ajax返回失败数据,Fast.api.ajax 总是跳去失败那里，但是又数据返回的
weixin_32564229的博客
08-05 1441
Fast.api.ajax(options, function(data,ret){bB8LFOjc0MUz4ht8TAE4Jw==//成功的回调console.log('成功的回调');console.log(data);console.log(ret);if(ret) {selectedNode.children = [];$.each(ret, function (i, item) {var...
js中$.ajax()的用法,javascript 和 jQuery 的Ajax 用法
weixin_39864489的博客
08-06 1403
ajax技术的核心是XMLHttpRequest对象(简称XHR)ajax通过原生的XMLHttpRequest对象发出HTTP请求，得到服务器返回的数据后，再进行处理。面试必须写的原生javascript Ajax:ajax包括几个步骤：1：创建ajax请求2：发出http请求3：收到服务器传回的消息4：更新网页数据xhr.htmlxhr.phpjquery Ajax 是对XMLHTTPRequ...
$.ajax.submit,jQuery中的AjaxSubmit使用讲解
weixin_31001739的博客
08-05 1832
最近在使用ajaxForm，随便把使用方法记下下来，以便以后回顾。1 ，引入依赖脚本 //ajaxForm 依赖脚本2 使用方法var ajax_option={url:"login",//默认是form actionsuccess:function(data){}$('#testForm').ajaxSubmit(ajax_option);}//注意$("#testForm") 引号中名称必须要...
jquery 快速学(4.Ajax应用)
04-02
**jQuery 快速学(4.Ajax应用)** 在Web开发中，Ajax（Asynchronous JavaScript and XML）技术已经成为实现页面动态更新和异步数据交互的关键工具。jQuery，一个流行的JavaScript库，极大地简化了Ajax操作，使得...
8.ajax.rar
08-24
【标题】"8.ajax.rar" 是一个压缩包文件，它主要涵盖了前端开发中的 AJAX（Asynchronous JavaScript and XML）技术的相关知识。AJAX 是一种在不重新加载整个网页的情况下，能够更新部分网页的技术，极大地提升了用户...
jQuery中$.get、$.post、$.getJSON和$.ajax的用法详解
10-25
本文重点是来讲讲jQuery中调用ajax的4种方法：$.get、$.post、$getJSON、$ajax。如果读者没有javascript和jquery的知识，或者没有ajax的概念，那么请先去问问度娘，再来读本文。
xhr、ajax、axois、fetch的区别
yiguoxiaohai的博客
09-04 1502
XMLHttpRequest (XHR)、AJAX、Axios 和 Fetch API 都是用于在不重新加载整个页面的情况下与服务器进行通信的技术和库。它们在处理超时、终止请求、进度反馈等机制上有一些显著的差异。以下是它们的详细比较：
第 2 章：AJAX 的使用
2203_75300307的博客
09-05 1124
AJAX 的所有操作都是通过该对象进行的。
JS都有哪些操作数组的方法
ggq53219的博客
09-04 558
JavaScript 中操作数组的方法非常丰富，这些方法大致可以分为几类：创建和初始化数组、添加元素、删除元素、遍历数组、搜索元素、数组排序、数组映射和过滤等。
在 Vue 中实现跨项目数据传递
世轩的博客
09-03 1489
需要注意的是，跨项目数据传递可能会带来一些安全和数据一致性的问题。在实际应用中，要根据具体情况选择合适的方法，并确保数据的安全性和可靠性。同时，对于敏感数据，应该采取加密等安全措施。
基于JavaWeb开发的JavaSpringboot+Vue实现前后端分离房屋租赁系统
央顺科技官方博客
09-05 508
2021年处于信息科技高速发展的大背景之下。在今天，缺少手机和电脑几乎已经成为不可能的事情，人们生活中已经难以离开手机和电脑。针对增加的成本管理和操作,各大商家非常有必要建立自己的网上房屋租赁平台系统，这既可以让更多的人体验到网络所带来的方便，也有助于提高房屋的租赁。在经过几十年的高速发展后，互联网已成为最流行、最普及的媒体，每天的信息流量甚至能比得上过去十年。其以便捷的信息交换、快速的沟通速度，悄然地改变着会员的消费方式。
在JS中的设计模式的单例模式、策略模式、代理模式、原型模式浅讲
最新发布
HGX-DJK
09-08 318
【代码】在JS中的设计模式的单例模式、策略模式、代理模式、原型模式浅讲。
$.ajax POST 参数
06-04
4. dataType：服务器返回的数据类型，可以是"json"、"xml"等； 5. success：请求成功后执行的回调函数； 6. error：请求失败后执行的回调函数。 下面是一个示例： ``` $.ajax({ url: "example.php", type: "POST...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值