AJAX知识概括

最新推荐文章于 2024-01-01 19:29:48 发布
最新推荐文章于 2024-01-01 19:29:48 发布
阅读量292 收藏
点赞数
分类专栏： 前端 文章标签： AJX
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41005188/article/details/112745033
版权

AJAX知识概括

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

转发：

  • 转发代理服务器：
    ①ForwardProxy：客户端无法直接请求服务器，只能将请求发往转发代理服务器（简称代理服务器），代理服务器将请求转发给服务器，接收到服务器响应后再将响应转发回客户端。
    ②适用于客户端从内部网络访问外部网络时，可能由于防火墙的存在无法直接访问外网，这时需要借助转发代理服务器访问外部网络（防火墙可能配置了只允许转发代理服务器与外部通信及一些其他规则）。有时为了加速代理服务器响应，可能会采用缓存技术。整个过程如：在这里插入图片描述
  • 反向代理服务器：
    ①Reverse Proxy：反向代理服务器用来代理服务器接收客户端请求，对于客户端来说，其感知不到反向代理的存在。考虑到服务器集群的安全，可以将反向代理服务器架设在防火墙外，接收到客户端请求后，反向代理服务器透过防火墙将请求转发到不同的服务器，再将服务器的响应回应给客户端（防火墙可以设置只允许反向代理服务器与真实服务器集群交互）。
    ②反向代理服务器也可能采用缓存技术，整个过程如下图（结构与转发代理服务器差不多）：在这里插入图片描述
  • 在代理转发场景，用户端发送一次请求就可以获得响应，无需关注转发代理服务器或者反向代理服务器做了什么。而在重定向场景，客户端至少要发送两次请求才能得到想要的结果。

重定向:

  • 客户端向服务器请求资源A，服务器发现A在其他地方，于是返回301 Move Permanently给客户端，告诉客户端该资源被永久移动到位置B（通过响应头部的Location字段）:在这里插入图片描述
  • 然后客户端重新请求资源B得到想要的结果:在这里插入图片描述
  • 重定向时，如果该资源是被临时移动，服务端可能会返回302 Temporarily Moved，但是302响应可能会被搜索引擎认为是在作弊，所以日常开发最好使用301Move Permanently 。
  • 最后，请求一个资源有可能发生多次重定向行为（请求A，被重定向到B，又被重定向到C，…，最后得到真正的资源）。

转发与重定向：

  • 因此重定向的第一次请求的response报文体是为空的，第二次请求才有内容。
  • 而转发的response报文体是有内容的。

AJAX简介

AJAX 简介：

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

XML 简介：

  • XML 可扩展标记语言。

  • XML 被设计用来传输和存储数据。 XML 和 HTML 类似，不同的是 HTML 中都是预定义标签，而 XML 中没有预定义标签，
    全都是自定义标签，用来表示一些数据。

比如说我有一个学生数据： 
name = "孙悟空" ; age = 18 ; gender = "男" ; 
用 XML 表示： 
<student> 
	<name>孙悟空</name> 
	<age>18</age> 
	<gender>男</gender> 
</student>
  • 现在已经被 JSON 取代了。
用 JSON 表示： 
{"name":"孙悟空","age":18,"gender":"男"}

AJAX 的优点：

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

AJAX 的缺点：

  • 没有浏览历史，不能回退
  • 存在跨域问题(同源)
  • SEO 不友好
    ①对于seo搜索引擎优化，ajax网页内容爬虫爬取不到

SEO简介：

  • 为搜索引擎优化，利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。
  • 目的是：为网站提供生态式的自我营销解决方案，让其在行业内占据领先地位，获得品牌收益。

Express 简介

Express 简介:

  • Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用，和丰富的 HTTP工具。
  • 使用 Express 可以快速地搭建一个完整功能的网站。
  • Express 框架核心特性：
    ①可以设置中间件来响应 HTTP 请求。
    ②定义了路由表用于执行不同的 HTTP 请求动作。
    ③可以通过向模板传递参数来动态渲染 HTML 页面。

express的基本使用：

//1. 引入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 的使用

核心对象 XMLHttpRequest：

  • AJAX 的所有操作都是通过该对象进行的。
  • 使用步骤
1) 创建 XMLHttpRequest 对象 
 var xhr = new XMLHttpRequest();
2)设置请求信息 
xhr.open(method, url); 
//可以设置请求头，一般不设置
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 
3)发送请求 
xhr.send(body)
//get 请求不传 body 参数，只有 post 请求使用 
4) 接收响应 
//xhr.responseXML 接收 xml 格式的响应数据 
//xhr.responseText 接收文本格式的响应数据 
xhr.onreadystatechange = function (){ 
	if(xhr.readyState == 4 && xhr.status == 200){ 
		var text = xhr.responseText; 
		console.log(text);
	} 
}

解决 IE 缓存问题：

  • 问题：在一些浏览器中(IE),由于缓存机制的存在，ajax 只会发送的第一次请求，剩余多次请求不会在发送给浏览器而是直接加载缓存中的数据。
  • 解决方式：浏览器的缓存是根据 url 地址来记录的，所以我们只需要修改 url 地址 即可避免缓存问题
xhr.open("get","/testAJAX?t="+Date.now());

超时与网络异常：

 //超时回调
xhr.ontimeout = function(){
     alert("网络异常, 请稍后重试!!");
}
//网络异常回调
xhr.onerror = function(){
       alert("你的网络似乎出了一些问题!");
}

取消请求：

x.abort();

AJAX 请求状态：

  • xhr.readyState 可以用来查看请求当前的状态
  • XMLHttpRequest.readyState
    0: 表示 XMLHttpRequest 实例已经生成，但是 open()方法还没有被调用。
    1: 表示 send()方法还没有被调用，仍然可以使用 setRequestHeader()，设定 HTTP 3请求的头信息。
    2: 表示 send()方法已经执行，并且头信息和状态码已经收到。
    3: 表示正在接收服务器传来的 body 部分的数据。
    4: 表示服务器数据已经完全接收，或者本次接收已经失败了

jQuery 中的 AJAX

get 请求：

$.get(url, [data], [callback], [type]) 
url:请求的 URL 地址。 
data:请求携带的参数。 
callback:载入成功时回调函数。 
type:设置返回内容格式，xml, html, script, json, text, _default。

post 请求：

$.post(url, [data], [callback], [type]) u
rl:请求的 URL 地址。 
data:请求携带的参数。 
callback:载入成功时回调函数。 
type:设置返回内容格式，xml, html, script, json, text, _default。

ajax通用请求：

$.ajax({
     //url
      url: 'http://127.0.0.1:8000/jquery-server',
      //参数
      data: {a:100, b:200},
      //请求类型
      type: 'GET',
      //响应体结果
      dataType: 'json',
      //成功的回调
      success: function(data){
          console.log(data);
      },
      //超时时间
      timeout: 2000,
      //失败的回调
      error: function(){
          console.log('出错啦!!');
      },
      //头信息
      headers: {
          c:300,
          d:400
      }
});
  • dataType如果指定为json类型，则会把获取到的数据作为一个JavaScript对象来解析，并且把构建好的对象作为结果返回。

axios 和fetch中的ajax

axios：

 //GET 请求
axios.get('/axios-server', {
    //url 参数
    params: {
        id: 100,
        vip: 7
    },
    //请求头信息
    headers: {
        name: 'atguigu',
        age: 20
    }
}).then(value => {
    console.log(value);
});

fetch：

fetch('http://127.0.0.1:8000/fetch-server?vip=10', {
    //请求方法
    method: 'POST',
    //请求头
    headers: {
        name:'atguigu'
    },
    //请求体
    body: 'username=admin&password=admin'
}).then(response => {
    // return response.text();
    return response.json();
}).then(response=>{
    console.log(response);
});

跨域

同源策略：

  • 同源策略(Same-Origin Policy)最早由 Netscape 公司提出，是浏览器的一种安全策略。
  • 同源： 协议、域名、端口号必须完全相同。
  • 违背同源策略就是跨域。
  • 举例：在本地打开HTML文件使用的是file协议。但发请求使用的是http协议。因此跨域！

JSONP解决跨域 ：

  • JSONP(JSON with Padding)，是一个非官方的跨域解决方案，纯粹凭借程序员的聪明 才智开发出来，只支持 get 请求。

  • JSONP 怎么工作的？ 在网页有一些标签天生具有跨域能力，比如：img link iframe script。 JSONP 就是利用script 标签的跨域能力来发送请求的。

  • JSONP 的使用：

  • 1.动态的创建一个 script 标签

 var script = document.createElement("script");
  • 2.设置 script 的 src，设置回调函数
 script.src = "http://localhost:3000/testAJAX?callback=abc"; 
 function abc(data) { 
 	alert(data.name); 
 };
  • 3.将 script 添加到 body 中
 document.body.appendChild(script);
  • 4.服务器中路由的处理
 router.get("/testAJAX" , function (req , res) { 
 	console.log("收到请求"); 
 	var callback = req.query.callback; 
 	var obj = {
			name:"孙悟空",
			 age:18 
	}
	res.send(callback+"("+JSON.stringify(obj)+")"); 
});
  • 此外在 jQuery 中的 JSONP
<!DOCTYPE html> 
<html lang="en"> 
<head> 
	<meta charset="UTF-8"> 
	<title>Title</title> 
</head> 
<body> 
	<button id="btn">按钮</button> 
	<ul id="list"></ul> 
	<script type="text/javascript" src="./jquery-1.12.3.js"></script> 
	<script type="text/javascript">
    window.onload = function () { 
    var btn = document.getElementById('btn') 
    btn.onclick = function () { 
    	$.getJSON("http://api.douban.com/v2/movie/in_theaters?callback=?",
    	function (data) { 
    		console.log(data); 
    		//获取所有的电影的条目 
    		var subjects = data.subjects; 
    		//遍历电影条目
			for(var i=0 ; i<subjects.length ; i++){ 
				$("#list").append("<li>"+ subjects[i].title+
				"<br/>"+ "<img src=\""+subjects[i].images.large+
				"\" >"+ "</li>"); 
				} 
			}); 
		} 
	} 
	</script> 
</body> 
</html>

CORS解决跨域 ：

  • CORS

  • CORS（Cross-Origin Resource Sharing），跨域资源共享。CORS 是官方的跨域解决方案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持 get 和 post 请求。跨域资源共享标准新增了一组HTTP 首部字段，允许服务器声明哪些 源站通过浏览器有权限访问哪些资源

  • CORS 是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应 以后就会对响应放行。

  • CORS 的使用：
    ①主要是服务器端的设置：

router.get("/testAJAX" , function (req , res) {
	//通过 res 来设置响应头，来允许跨域请求 
	//res.set("Access-Control-Allow-Origin","http://127.0.0.1:3000"); 
	res.set("Access-Control-Allow-Origin","*"); 
	res.send("testAJAX 返回的响应"); 
});

VSCode和HBuilder中运行html的问题：

  • 在html中使用ajax可以访问本地文件，因为是在编译器里运行html，而编译器是本地地址中某个端口上运行的程序。
  • 因此用ajax发送http请求可以访问本地文件，而不是使用file协议。
    在这里插入图片描述

总结：

GeorgeLin98
关注
专栏目录
Vue详解知识概括
begefefsef的博客
07-31 779
我们在html文件上输入【!】叹号(在英文状态下)，然后按键盘的【Tab】键，只有在这种情况下按住Tab键可以快速创建一个html模板。代码缩进时只缩进两个空格。开发快捷键①Ctrl+p查找文件全局搜索字符串③Ctrl+j切换终端④Ctrl+b显示/隐藏左侧目录栏显示所有命令⑥拆分当前编辑窗口Ctrl+，Ctrl+1234等在编辑窗口间切换⑦选中方法名->Shift+F12，选中方法名->鼠标右键插件src目录分析②。...
Vue高级知识概括
weixin_41005188的博客
07-20 1992
..
什么是AJAX?
learning_web的博客
07-23 2223
这里是修真院前端小课堂，每篇分享文从 八个方面深度解析前端知识/技能，本篇分享的是： 【什么是AJAX?】 大家好，我是 IT 修真院上海分院第八期的学员何岳，一枚正直纯洁善良的web程序员 今天给大家分享一下，修真院官网 JS任务五，深度思考中的知识点——什么是AJAX? 背景介绍 什么是AJAX? async JavaScript and xml，异步的js和xml ajax之所以称为异步...
ajax的简单学习
cheer_98_的博客
10-29 254
初始ajax Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。 Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。局部刷新 通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 ...
AJAX详解（一）
yisany_Q的博客
11-07 355
AJAX Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。 Ajax = 异步 JavaScript 和 XML（标准通用标记语言的子集）。 Ajax 是一种用于创建快速动态网页的技术。 Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少...
jquery的ajax方法的回调函数详解
Jsonkim的博客
09-22 1万+
前言 最近学习jquery的$.post(),$.get(),$("#div1").load(),$.ajax()方法，发现确实很方便，但是对函数返回值确不理解，后面自己做了几个实验，总结后把结论整理后和大家一起分享. 后台代码第一种情况，回调函数只有一个传入参数前端代码 输出的调试结果 第二种情况，回调函数有两个传入参数前端代码 输出的调试结果 第三种情况，回调函数有三个传入参数前端代码 调
Ajax
98猛虎的博客
06-09 1736
---------------------------------------ajaxtimeout属性不一定会调用，因为它指的是表示多少毫秒后，如果请求仍然没有得到结果，就会自动终止，如果在设置的时间之前出现结果 那么就不会调用这个函数readyState和XMLHttpRequest第二版新增的时间监听的顺序问题： 1 // 调用了open()方法之后 // 在open之后send之前可以调...
前端体系结构知识概括
weixin_41005188的博客
10-16 5104
前端体系结构知识概括前端体系简介三大框架CSS简介HTML简介JavaScript详细简介UI 组件简介 前端体系简介 前端开发的核心是HTML + CSS +JavaScript。 本质上它们构成一个MVC框架，即HTML作为信息模型（Model），CSS控制样式（View），JavaScript负责调度数据和实现某种展现逻辑（Controller）。 HTML基础知识点： CSS基础知识点： JS基础知识点： 三大框架 前端三大框架以及jquery与bootstrap这种框架有什么区别？ 我们必
初次接触GWT，知识点概括
03-23
**初次接触GWT：知识点概括** Google Web Toolkit（GWT）是Google推出的一款开源的JavaScript开发框架，它允许开发者使用Java语言来编写Web应用程序。GWT通过编译器将Java代码转换为高效的JavaScript，从而在浏览器...
AJAX技术详解：从基础知识到编程实践
"本资源主要介绍了AJAX的基础知识，包括其定义、应用场景、包含的技术、工作机制及编程方法。此外，还探讨了客户端技术的发展历程，从胖客户端、瘦客户端到富客户端（富互联网应用程序 - RIA）的概念及其优缺点。在...
jquery发送ajax请求及回调函数this的处理
最新发布
2301_81534443的博客
01-01 692
方法参数是一个对象，type和url就不说了，data是一个对象，也可以是get方式拼接的字符串，我个人认为对象简单一些，拼接的麻烦。最后eval函数可以执行返回的JavaScript代码，可以在服务端直接返回点js代码，比如alert...之类的，很方便。另外，在回调函数中如果想使用$(this)，是没有办法使用的，因为回调函数里面的this是全局对象，特别是在点击事件中，没有办法拿到触发事件的元素。现在想发送ajax请求，方法也是特别多，各种库，各种框架，我们只需要学会一个就够了，学多了反而乱。
JQuery ajax回调函数
黎明露珠的博客
04-23 472
转自http://zhengyh2008.blog.163.com/blog/static/13894713201003041633526/ jquery ajax 回调函数 返回值   js文件： $.ajaxSetup({   async: false   }); function oncheck(oid){    var rs=true;            if(oi
WEB前端响应式网站开发全套课程
05-07
                                    案例都是来自于真实网站 ：             
Ajax基础内容
mumudezhi的博客
05-23 83
Ajax是一种在无需更新整个页面的情况下就能够使部分内容更行的技术。 在这里我们要先了解什么是 XMLHttpRequest， XMLHttpRequest是用于后台与服务器交换数据对象 现在市面上主流的浏览器都内置XMLHttpRequest对象，但一些老版本的浏览器没有内置XMLHttpRequest 这里我们就要在程序执行之前就要判断浏览器是否有XMLHttpRequest对象， 没有的话就加上， 向服务器发送请求时我们用到的是XMLHttpRequest对象的 open 和 send
document.appendChild(form)与document.body.appendChild(form)的区别
iteye_20525的博客
06-30 1123
如题，他们之间有区别吗？ 感觉上只有，他们添加的位置不同。 [b]困惑1[/b] document.body.appendChild(form)是在body节点后添加元素。 document.appendChild(form)是在...where? [b]困惑2[/b] 在做一个项目时，遇到一个很奇怪的问题，在JQuery.ajax的errorfunction中 要求...
document.body.appendChild(div);的用法
热门推荐
anmoyyh的博客
08-16 5万+
document.body,createElement(nodeName)document.body.createTextNode(txt)配合使用的,作用是将指定的DOM类型的节点加到document.body的末尾.例如://创建textNodevar txt=document.body.createTextNode("asdf");//创建objectNodevar p=document.b
Java基础96 ajax技术的使用
weixin_30768175的博客
04-15 111
本文知识点（目录）： 1、ajax的概念 2、使用ajax技术获取服务端的数据_实例 3、使用ajax技术检查用户名是否已存在_实例 4、使用ajax技术验证登录页面的用户名和密码_实例 1、ajax的概念 ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 ajax的全称是Asynchronous JavaS...
jQuery ajax - load() 方法 回调函数以及如何得到回调结果中需要的数据值
小糖豆
01-14 1万+
jQuery ajax - load() 方法 回调函数 jQuery ajax - load() 方法 实例 使用 AJAX 请求来改变 div 元素的文本： (“button”).click(function(){(“button”).click(function(){ (“div”).load(‘demo_ajax_load.txt’); }); 定义和用法 load()
ajax回调函数改变数据,jQuery ajax() 参数,回调函数，数据类型，发送数据到服务器，高级选项...
weixin_30092051的博客
08-05 573
$.ajax({options：/*类型：Object;可选。AJAX 请求设置。所有选项都是可选的。*/async:/*类型：Boolean;默认值: true。默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。*/beforeSend(xhr):/*类型：Function;发送请求前可修改 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值