Ajax从入门到精通

已于 2022-03-26 13:12:48 修改
阅读量373 收藏 2
点赞数 2
分类专栏： 前端野生知识 文章标签： ajax http javascript
于 2021-09-28 22:14:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gty204625782/article/details/120538711
版权

文章目录

一、HTTP

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

请求报文

重点是格式与参数

行      POST  /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

响应报文

行      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>
  • 404
  • 403
  • 401
  • 500
  • 200

二、express的使用

//1. 引入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 - 2');
});

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

//JSON 响应
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); // send里面只能传字符串或者buffer
});

//针对 IE 缓存
app.get('/ie', (request, response) => {
   
	//设置响应头  设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*');
	//设置响应体
	response.send('HELLO IE - 5');
});

//延时响应
app.all('/delay', (request, response) => {
   
	//设置响应头  设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*');
	response.setHeader('Access-Control-Allow-Headers', '*');
	setTimeout(() => {
   
		//设置响应体
		response.send('延时响应');
	}, 1000)
});

//jQuery 服务
app.all('/jquery-server', (request, response) => {
   
	//设置响应头  设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*');
	response.setHeader('Access-Control-Allow-Headers', '*');
	// response.send('Hello jQuery AJAX');
	const data = {
   
		name: '尚硅谷'
	};
	response.send(JSON.stringify(data));
});

//axios 服务
app.all('/axios-server', (request, response) => {
   
	//设置响应头  设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*');
	response.setHeader('Access-Control-Allow-Headers', '*');
	// response.send('Hello jQuery AJAX');
	const data = {
   
		name: '尚硅谷'
	};
	response.send(JSON.stringify(data));
});

//fetch 服务
app.all('/fetch-server', (request, response) => {
   
	//设置响应头  设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*');
	response.setHeader('Access-Control-Allow-Headers', '*');
	// response.send('Hello jQuery AJAX');
	const data = {
   
		name: '尚硅谷'
	};
	response.send(JSON.stringify(data));
});

//jsonp服务
app.all('/jsonp-server', (request, response) => {
   
	// response.send('console.log("hello jsonp")');
	const data = {
   
		name: '尚硅谷atguigu'
	};
	//将数据转化为字符串
	let str = JSON.stringify(data);
	//返回结果
	response.end(`handle(${
     str})`);
});

//用户名检测是否存在
app.all('/check-username', (request, response) => {
   
	// response.send('console.log("hello jsonp")');
	const data = {
   
		exist: 1,
		msg: '用户名已经存在'
	};
	//将数据转化为字符串
	let str = JSON.stringify(data);
	//返回结果
	response.end(`handle(${
     str})`);
});

//
app.all('/jquery-jsonp-server', (request, response) => {
   
	// response.send('console.log("hello jsonp")');
	const data = {
   
		name: '尚硅谷',
		city: ['北京', '上海', '深圳']
	};
	//将数据转化为字符串
	let str = JSON.stringify(data);
	//接收 callback 参数
	let cb = request.query.callback;

	//返回结果
	response.end(`${
     cb}(${
     str})`);
});

app.all('/cors-server', (request, response) => {
   
	//设置响应头
	response.setHeader("Access-Control-Allow-Origin", "*");
	response.setHeader("Access-Control-Allow-Headers", '*');
	response.setHeader("Access-Control-Allow-Method", '*');
	// response.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1:5500");
	response.send('hello CORS');
});

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

三、原生AJAX

1.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. 创建对象
        const xhr = new XMLHttpRequest();
        //2. 初始化 设置请求方法和url
最低0.47元/天 解锁文章
「已注销」
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Ajax从入门到精通.pdf
05-09
Ajax从入门到精通.pdf
【Ajax】HTTP相关问题-GET-POST-XHR使用-jQuery中的ajax-跨域-同源-jsonp-cors
热门推荐
YK菌的博客
02-23 3万+
文章目录1. Ajax概述1.1 AJAX 简介1.2 XML 简介1.3 AJAX 的特点1.3.1 AJAX 的优点1.3.2 AJAX 的缺点2. 原生AJAX 的基本使用2.0 准备工作2.1 核心对象2.2 使用步骤2.3 使用案例1. GET 请求设置请求参数2. POST请求2.4 解决IE 缓存问题2.5 AJAX 请求状态3. jQuery 中的AJAX3.1 get 请求3.2 post 请求4. 跨域4.1 同源策略4.2 如何解决跨域4.2.1 JSONP4.2.2 CORS 1.
Ajax入门到精通
weixin_47750287的博客
03-08 1997
本文介绍了Ajax的概念，四种发送Ajax请求的方式，三种解决Ajax请求跨域的方案。
Ajax入门到精通全套完整版
不要回答的博客
06-01 355
p1/30 Ajax第四阶段的学习内容介绍 p2/30 全局刷新和局部刷新以及两种刷新方式的对比 p3/30 异步对象【Ajax借助异步对象完成局部刷新】 p4/30 Ajax概念 p5/30 创建异步对象的步骤第一部分【创建异步对象】 p6/30 创建异步对象的步骤第二部分【readyState】 p7/30 创建异步对象的步骤第三部分 p8/30 全局刷新计算BMI创建页面【身体质量指数】 <html> <head> <title>全局
三句话让 AJAX 为我欲罢不能
VectorX's Blog
09-12 777
1、AJAX 简介 2、XML 简介 3、AJAX 的特点 AJAX 的优点 AJAX 的缺点 4、HTTP 协议 请求报文 响应报文 状态码分类表 常见的响应状态码 5、开发准备 安装 Node.js 使用 express 案例前准备 6、AJAX 发送 GET 请求 GET 设置请求行
ajax从入门到精通.rar
07-18
**Ajax技术概述** Ajax，全称为"Asynchronous JavaScript and XML"，是一种在无需重新加载整个网页的情况下，能够更新部分...这个"ajax从入门到精通"的资源将引导你逐步走进Ajax的世界，助你在Web开发领域更进一步。
ajax基础教程和ajax从入门到精通
04-24
**Ajax基础教程** Ajax（Asynchronous ...通过阅读《Ajax从入门到精通.pdf》和《ajax基础教程.pdf》，你可以系统地学习Ajax的各个方面，从基础知识到进阶技巧，逐步提升自己的技能，成为一名精通Ajax的开发者。
Ajax从入门到精通（附教学示例）
05-16
Ajax 由 HTML、javascript™ 技术、DHTML 和 DOM 组成，这一杰出的方法可以将笨拙的 Web 界面转化成 交互性的 Ajax 应用程序。本系列的作者是一位 Ajax 专家，他演示了这些技术如何协同工作 —— 从总体概 述到细节的讨论 —— 使高效的 Web 开发成为现实。他还揭开了 Ajax 核心概念的神秘面纱，包括 XMLHttpRequest 对象。 五年前，如果不知道 XML，您就是一只无人重视的丑小鸭。十八个月前，Ruby 成了关注的中心，不知道 Ruby 的程序员只能坐冷板凳了。今天，如果想跟上最新的技术时尚，那您的目标就是 Ajax。 但是，Ajax 不仅仅 是一种时尚，它是一种构建网站的强大方法，而且不像学习一种全新的语言那样困难。
ajax从入门到精通视频
01-20
黑马程序猿ajax从入门到精通视频！！！！！！！！！！！
AJAX从入门到精通
08-24
两本书 一本为AJAX新手快车道（已经加了书签目录） 一本为AJAX开发简略(含续一) 都是PDF格式的 第一本用来入门，第二本用来提高，同时工作的时候可以参考 推荐用foxit reader打开
AJAX技术（从入门到精通）
07-14
AJAX从入门到精通，包括源代码，值得一看！
Ajax从入门到精通（全）
码农研究僧的博客
07-15 1620
前言 异步JavaScript和XML 快速地将增量更新于用户界面，不需刷新整个页面即可回应用户操作 一种独立于 Web 服务器软件的浏览器技术 全局刷新：整个页面被刷新覆盖，传输大量数据 局部刷新：内部被刷新覆盖，内部有发送请求，传输量少 即ajax的核心为局部刷新 ...
Ajax+jquery从入门到精通2017视频教程
05-06
ajax技术是从事WEB开发的课程，本课程是在js及jsp课程的基础上的提高课，从ajax初级开始讲解，主要包括ajax的xmlhttprequest对象的创建，事件，状态变化，回调函数定义等详细讲解，并包含大量的实战案例；prototype插件的应用；dwr插件的应用；json格式数据，jquery的深入讲解与实战训练，共22个视频教程，PPT课件及上课源代码在购买后可以下载
js+ajax+jquery+easyui从入门到精通（项目实战）
07-16
1.javascript从入门到精通，为学习ajax打基础；2.ajax技术从零开始学，深入研究ajax的原理及使用，通过一些使用案例讲解；3.easyui从入门到精通课程，详细介绍各种常用控件的使用方法，结合项目模块实战；4.jquery应用：主要讲解对复杂及常用ui界面的设计，利用jquery技术基础，熟练掌握实现各种功能的技巧。
ajax从入门到精通
最新发布
07-29
以下是AJAX从入门到精通的一些关键知识点： 1. 基本概念：AJAX的核心概念是异步通信，它通过XMLHttpRequest对象向服务器发送请求，并处理服务器返回的数据。与传统的同步请求不同，AJAX请求能够在后台进行，不影响...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值