AJAX-- 01 初步学习

最新推荐文章于 2024-07-05 22:58:38 发布

般若-

最新推荐文章于 2024-07-05 22:58:38 发布

阅读量64

点赞数

本文链接：https://blog.csdn.net/qq_45728623/article/details/119719974

版权

AJAX简介

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 是与服务器交换数据并更新部分网页的艺术，最大的优势：无刷新获取数据

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

XML简介

XML可扩展标记语言

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

XML和HTML类似，不同的是HTML中都是预定义标签，而XML中没有预定义的标签，全都是自定义的标签，用来表示一些数据。

<student>
    <name>小红</name>
    <age>18</age>
    <gender>女</gender>
</student>

现在已经被JSON取代

{"name": "小红", "age": "18", "gender": "女"}

AJAX的优点

可以无需刷新页面而与服务器端进行通信

允许你根据用户事件来更新部分页面内容

AJAX的缺点

没有浏览历史，不能回退

存在跨域问题（同源）

SEO不友好（爬虫爬不到）

HTTP请求交互过程

请求报文和响应报文都是由三个部分组成

前台应用从浏览器端, 向后台服务器发送HTTP请求(请求报文)
后台服务器端接收到请求后, 调用服务器应用处理请求, 向浏览器端返回HTTP响应(响应报文)
浏览器端接受到响应, 解析显示响应体 / 调用监视回调

HTTP 请求报文

请求行
method url
GET /product_detail?id=2
POST /login

多个请求头
Host: www.baidu.com
Cookie: BAIDUID=AD3B0FA706E; BIDUPSID=AD3B0FA706;
(cookie一般由服务器端产生, 然后交给浏览器存储,浏览器发请求的时候, 会自动携带对应cookie)
Content-Type: application/x-www-form-urlencoded 或者application/json

空行

请求体
GET（空） POST（不为空）
username=tom&pwd=123 请求类型为: application/x-www-form-urlencoded
{"username": "tom", "pwd": 123} 请求类型为:application/json Json格式

HTTP 响应报文

响应状态行: HTTP/1.1 200 OK status statusText

响应头
Content-Type: text/html;charset=utf-8
Set-Cookie: BD_CK_SAM=1;path=/
Content-encoding: gizp

响应体
<html>
<head>
</head>
<body>
<h1>我真好看</h1>
</body>
</html>

响应状态码大类

常见状态码

不同类型的请求及其作用

GET：从服务器端读取数据（查）
POST：向服务端添加新数据（增）
PUT：更新服务端已存在的数据（改）
DELETE: 删除服务器端数据（删）

一般http请求与ajax请求的区别

1、ajax请求是一种特别的http请求
2、对服务器端来说，没有任何区别，区别在浏览器端
3、浏览器端发请求：只有 XHR 或 fetch 发出的才是ajax请求，其它所有的都是非ajax请求
4、浏览器端收到的响应：
一般请求：浏览器一般会直接显示响应体数据，也就是我们常说的刷新/页面跳转
ajax请求：浏览器不会对界面进行任何更新操作，只是调用监视的回调函数并传入响应相关数据