ajax相关笔记

最新推荐文章于 2024-10-13 15:02:44 发布
最新推荐文章于 2024-10-13 15:02:44 发布
阅读量87 收藏 2
点赞数
分类专栏： 前端 文章标签： ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42767674/article/details/120621749
版权

1. XML简介

XML是可扩展标记语言，被设计用来传输和存储数据，和HTML类似，不同的是XML没有与定义标签，全都是自定义标签，用来表示一些数据
例如：

name = “孙悟空”; age = 18; gender = “男”;

用XML表示

<student>
	<name>孙悟空</name>
	<age>18</age>
	<gender>男</gender>
</student>

但现在已被JSON取代：

{ “name” :“孙悟空”; “age”:18; “gender” : “男”}

2.HTTP协议介绍

请求报文格式
重点是格式与参数

行 POST /s?ie=utf-8 HTTP/1.1
头 Host: atguigu.com
Cookie:name=guigu
Content-type: applicantion/x-www-form-urlencoded //告知服务器请求体是什么类型
User-Agent: chrome 83
空行
体 （GET的话请求体为空 POST的话请求体可以不为空）username=admin&password=admin

响应报文格式

行 HTTP/1.1 200 OK
头 Content-Type: text/html;charset=utf-8
Content-length:2048
Content-encoding:gzip//压缩方式
User-Agent: chrome 83
空行
体 <html>
<head>
</head>
<body>
</body>
<\html>

3.express安装

在管理员模式下打开VScode中资源管理器右键打开“在集成终端中打开”，输入命令npm init --yes
再输入 npm i express安装express

4.原生ajax案例

GET

 //获取button元素
        const btn = document.querySelector('button');
        var result = document.querySelector('.result');
        btn.onclick = function(){
            //1.创建对象
            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：被初始化，最开始就是0 1：open方法已经调用完毕 2：send方法调用完毕 3：服务端返回了部分结果 4：服务端返回了所有结果
            //change 改变的时候触发
            xhr.onreadystatechange = function(){
                //判断(服务端返回了所有的结果)
                if(xhr.readyState == 4){
                    //判断响应状态码 200 404 403 401 500
                    //2开头表示成功
                    if(xhr.status >= 200 && xhr.status < 300){
                        //处理结果 行 头 空行 体
                        //1.响应行
                        // console.log(xhr.status);//状态码
                        // console.log(xhr.statusText);//响应状态字符串
                        // console.log(xhr.getAllResponseHeaders());//所有响应头
                        // conosle.log(xhr.response);//响应体
                        result.innerHTML = xhr.response;
                    }else{

                    }
                }
            }
        }

POST

const result = document.querySelector('.result');
        result.addEventListener('mouseover', function(){
            //创建对象
            const xhr = new XMLHttpRequest();
            //2.初始化 设置类型与URL
            xhr.open('POST', 'http://127.0.0.1:8000/server');
            //3.发送
            xhr.send('a=100&b=200&c=300');
            xhr.onreadystatechange = function(){
                //判断
                if(xhr.readyState == 4){
                    if(xhr.status >= 200 && xhr.status < 300)
                    {
                        //处理服务端返回的结果
                        result.innerHTML = xhr.response;
                    }
                }
            }
        })

server端

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

});
app.post('/server', (request, response) => {
    //设置响应头    设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    //设置响应体
    response.send('HELLO AJAX POST');

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

5.服务端响应JSON数据

前端

const result = document.querySelector('.result');
       //绑定键盘按下事件
        window.onkeydown = function(){
            //发送请求
            const xhr = new XMLHttpRequest();
            //初始化
            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;
                        //手动对数据进行转换
                        let data  = JSON.parse(xhr.response);
                        console.log(data);
                    }
            };
        };

后端

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

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

});
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);

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

6.nodeMon安装

使用国内源安装

npm config set registry=https://registry.npm.taobao.org
npm install -g nodemon

7.ajax终止请求

x.abort()

8.jsonnp

跨域请求返回必须是一段json代码

永远在入门的小菜鸡
关注
专栏目录
Ajax详细笔记
m0_61533408的博客
04-11 662
1. Ajax概述 1.1 AJAX 简介 AJAX 全称为Asynchronous JavaScript And XML，就是异步的JS 和XML 通过AJAX 可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据 AJAX 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式 1.2 XML 简介 XML 可扩展标记语言。 XML 被设计用来传输和存储数据。 XML 和HTML 类似，不同的是HTML 中都是预定义标签，而XML 中没有预定义标签， 全都是自定义标签，
Ajax笔记
菜鸡成长站
04-23 2533
title: Ajax categories: web前端学习笔记 date: 2022-03-01 15:27:51 tags: 什么是 AJAX ？ AJAX = 异步 JavaScript 和 XML。 AJAX 是一种用于创建快速动态网页的技术。 通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。 URL地址 组成部分 通信协议，存放该资源.
ajax学习笔记
m0_74375748的博客
08-23 1242
统一资源定位符，简称网址逻辑更清晰了解axios函数内部运作能解决回调函数地狱的问题概念：访问权限的令牌，本质上是一串字符串创建：正确登陆后，由后端签发并返回成功作用：判断是否有登陆状态，控制访问权限前端只能判断有无token，后端判断真实性。
Ajax学习笔记
2301_82244607的博客
04-28 1095
XMLHttpRequest()：创建 XHR 对象的构造函数status：响应状态码值，如 200、404statusText：响应状态文本，如 ’ok‘、‘not found’readyState：标识请求状态的只读属性 0-1-2-3-4onreadystatechange：绑定 readyState 改变的监听responseType：指定响应数据类型，如果是 ‘json’，得到响应后自动解析响应response：响应体数据，类型取决于 responseType 的指定。
史上最详细Ajax学习笔记
楠黎倾风的博客
09-19 8083
史上最强Ajax学习笔记
AJAX笔记
angel_791的博客
07-14 633
AJAX笔记
Ajax - 学习笔记
weixin_56766611的博客
08-27 958
Ajax是异步的JavaScript和XML，简单点说，就是使用XMLHttpRequest对象与服务器通信，它可以使用JSON，XML，HTML和text文本格式发送和接收数据。Ajax最吸引人的就是它的“异步”特性，也就是说它可以在不重新刷新整个页面的情况下与服务器通信，交换数据或刷新部分内容。
经验笔记：Ajax学习
qq_45831414的博客
09-04 1322
Ajax并不是一种新的编程语言，而是一种使用现有Web技术的新方法，主要依靠对象来实现浏览器与服务器之间的数据交换。尽管名称中含有XML，但Ajax实际上可以使用多种数据格式，如JSON、XML、纯文本等。其最大的优点在于可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容。通过学习Ajax，我们可以让Web应用变得更加高效和用户友好。同时，了解Fetch API和Axios这两种现代解决方案可以帮助我们根据项目需求做出最合适的选择。不断实践和探索，将使你在Web开发领域更加游刃有余。
jquery，ajax笔记,ajax|jquery笔记
weixin_39608132的博客
08-06 409
1.index.PHP$(document).ready(function(){$('#submitbt').click(function(){//var name = $('#name').val();//var dataString = "name="+name;var dataPass = {'name': $("#name").val()};$.ajax({type: "POST",url...
AJAX学习笔记
weixin_44497507的博客
11-10 663
【代码】AJAX学习笔记。
ajax笔记ajax笔记ajax笔记
04-03
ajax笔记
黑马程序员Ajax笔记
05-26
在黑马程序员的Ajax笔记中，我们将深入探讨这一技术的各个方面。 ### 1. Ajax基本原理 Ajax的核心是JavaScript对象XMLHttpRequest，它允许浏览器在后台与服务器通信。通过创建XMLHttpRequest对象、打开连接、发送...
ajax嵌套ajax实现不刷新表单并向指定页面二次提交数据
2302_79553009的博客
10-13 268
利用jq定位表单位置后执行阻止表单提交代码。当获取到表单数据后进行向指定页面提交操作。提交成功后将表单置空且再次利用ajax提交该表单完成二次提交。
基于Matlab面板版的卡尔曼小球运动跟踪[Matlab面板版].zip
10-16
大模型实战教程
Day01(1).py
10-16
Day01(1).py
面试-PHP高频面试题整理-面试题合集.zip
最新发布
10-16
面试_PHP高频面试题整理_面试题合集
Ajax学习笔记：从入门到精通
“Ajax学习经典笔记，适合初学者或者巩固知识用” Ajax（Asynchronous JavaScript and XML）是一种创建动态网页的技术，它允许在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。这篇经典笔记详细...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值