【Ajax】原生ajax、jQUery中的ajax、跨域问题

最新推荐文章于 2024-09-12 14:39:26 发布

七日谭

最新推荐文章于 2024-09-12 14:39:26 发布

阅读量431

点赞数 1

分类专栏： AJAX 文章标签： http ajax javascript

本文链接：https://blog.csdn.net/Adollar/article/details/108882223

版权

AJAX 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

懒加载，即用则加载，不用则不加载。

第一章:原生AJAX

1.1ajax 简介

ajax全称为Asynchronous JavsScript And XML，就是异步的js 和 xml。
通过AJAX可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据。
AJAX不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。
应用：百度搜索框关键字的自动补全、邮箱注册时的校验

1.2XML简介

xml 即可扩展标记语言
xml 被设计用来 传输和存储数据，而HTML是呈现数据。
xml 和 html类似，不同的是HTML中都是预定义标签，而xml中没有预定义标签，全都是自定义标签，用来表示一些数据。
预定义标签是已经定义好的标签，只需要对应使用即可。而自定义标签的标签名称是由使用者自己决定的。

在这里插入图片描述

最初ajax从服务端返回数据时，所使用的就是xml。现在已经被json取代了。

json更为简洁，在使用时能够快速将json类型数据转化为数组，处理信息更加灵活。

1.3 ajax的特点:

1.3.1ajax的优点

（1）可以无需刷新页面而与服务器进行通信。
（2）允许根据用户事件来更新部分页面内容。（可以在用户的特定行为下，向服务端发送请求）

1.3.2 ajax的缺点

（1）没有浏览历史，不能回退。
（2）不存在跨域问题（同源）。（不同的服务之间发送请求）
（3）SEO（搜索引擎优化（Search Engine Optimization））不友好。即网络爬虫无法取得动态ajax加载的数据。

多数网页的传输和信息交换使用的是http协议

补充http

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

HTTP协议约定了两部分内容

ajax的请求和响应服从的HTTP协议，在使用ajax时，必须要明确请求报文和响应报文的格式与参数

1.请求报文（四部分）：

请求行、请求头、空行（必要）、请求体

(1)行-------POST /s?ie=utf-8 HTTP/1.1 。行包含请求方式、url路径或者查询字符串、http的请求版本，目前使用最多的是1.1
---------- GET / url（） HTTP/1.1。get ，设置参数，在url中设置参数时，直接+“？参数名=参数值”，如果是多个参数“？参数名=参数值&参数名=参数值”
(2)头-------Host: atguigu.com。（为了告知请求头的类型，需要将请求头的格式记住）
-------Cookie: name=baidu
-------Content-type: application/x-www-form-urlencoded
-------User-Agent: chrome 83
(3)空行（必要）
(4)体-------username=admin&password=admin。（可以有内容，也可以无内容。如果是get访问方式的话，请求体为空；如果是post访问方式的话，请求体可以非空。）

2.响应报文：

响应行、响应头、空行（必须）、响应体

(1)行-----HTTP/1.1 200 OK
(2)头-----Content-Type: text/html;charset=utf-8
---------Content-length: 2048
---------Content-encoding: gzip
(3)空行 (必须得有)
(4)体 (响应体)
<html> <head> </head> <body> <p>早</p> </body> </html>

补充常见网页状态码：
①以1开头的状态码表示临时响应并需要请求者继续执行操作的状态代码。例如：100（继续）、101（切换协议）。
②以2开头的状态码表示成功处理了数据请求的状态码。例如：200（成功）、201（已创建）、202（已接受）。
③以3开头的状态码表示要完成请求需要进一步操作，通常，用来重定向。例如：300（多种选择）、301（永久移动）、302（临时移动）。
④以4开头的状态码表示请求可能出错，妨碍了服务器的处理。例如：400（错误请求）、401（未授权）、403（被禁止）、404（未找到网页）。
⑤以5开头的状态码表示服务器在尝试处理请求时内部错误，这些错误可能是服务器本身的错误，而不是请求出错。例如：500（服务器内部错误）、501（尚未实施）、503（服务不可用）。

request header里放的是请求头和请求行
get :Query StringParameters是对Request Headers(14)中url()部分的解析。
post:请求体在form data里
在这里插入图片描述

==readystate ==是 xhr 对象中的属性，表示状态，它有五个值："0“表示未初始化，“1”表示open方法已经调用完毕，“2”表示send方法已经调用完毕，“3”表示服务端返回了部分的结果，“4”表示服务端返回了所有的结果。

1.4 ajax 发送post请求

在这里插入图片描述
setRequestHeader(“”，“”):设置请求头的方法，有两个参数，第一个是请求头的名字、第二个是请求头的值。

//例如：
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
//Content-Type是用来设置请求体内容的类型的；其后是参数查询字符串的固定写法。
//如上的两个参数也可以自定义

第二章：JQuery 中的AJAX

2.1get请求

$.get(),参数分别是给谁发、发送什么参数、回调函数、响应体类型

在这里插入图片描述
在未设置crossorigin =“anoymous” 之前会报警告

它是一个跨源的请求的属性设置，表示给某个资源发送请求时，将不会携带域名下面的cookie。

2.2post请求

在这里插入图片描述

2.3 通用型方法ajax

ajax它的参数是一个对象。
在这里插入图片描述

23
axios 目前前端最热门的ajax工具库，vue和react推荐的一个ajax请求工具包，用来发送ajax请求

24
使用fetch函数来发送ajax请求

第三章：跨域

3.1同源策略

同源策略（Same-Origin Policy）最早由Netscape公司提出，是浏览器的一种安全策略。
ajax是默认遵守同源策略的。

表面上的表现是：网页的url和ajax 请求的目标资源的url必须协议、域名、端口号保持一致。
同源：协议、域名、端口号。（同一个来源）
违背同源策略就是跨域

实质上我们打开的每一个网页也是从某个服务器上来的，同源也就是说ajax也要向这个网页所在的服务器发送请求。

跨域经常在项目中出现，这是因为单台服务器它的服务是由上限的，它的性能是有瓶颈的，所以我们需要添加更多的计算机、更多的服务器来提供服务。这里的服务器一旦增加，就会导致跨域的出现。跨域是为能够提供给用户更流畅、更可用的环境。

3.2如何解决跨域

3.2.1 JSONP

（1）JSONP
JSONP（JSON with Padding），是一个非官方的跨域解决方案，只支持get请求。
（2）JSONP的工作原理。
在网页有一些标签本身具有跨域能力，比如：img link iframe script。JSONP就是利用script标签的跨域能力来发送请求的。
（3）JSONP的使用

1.动态的创建一个是script标签。var script = document.createElement(“script”);
2.设置script的src,设置回调函数。 script.src="http://localhost:3000

src请求之后要的是函数调用的内容（一段js代码），以便前端的浏览器引擎能够解析代码，获取内容。
在这里插入图片描述

3.2.2 CORS

（1）CORS（Cross-Origin Resource Sharing ），跨域资源库，CORS是官方的跨域解决方案，它的特点是不需要再客户端做任何特殊的操作，完全在服务器中进行处理，支持get和post请求。跨域资源共享的标准新增了一组HTTP首部字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源。
（2）CORS是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应以后就会对响应放行。
（3）CORS的使用
在这里插入图片描述