2021-06-08 Ajax

最新推荐文章于 2024-05-28 21:47:35 发布

MDISLXT

最新推荐文章于 2024-05-28 21:47:35 发布

阅读量208

点赞数

文章标签： ajax jsonp

本文链接：https://blog.csdn.net/weixin_43552533/article/details/117741426

版权

1. 原生AJAX

1.1 AJAX 简介

AJAX（Asynchronous JavaScript And XML）= 异步JS和XML
通过AJAX可以在浏览器中不刷新页面的同时向服务器发送异步请求，可以提高网页的加载速度。
AJAX不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。

1.2 XML 简介

xml 可扩展标记语言。
xml 用来传输和存储数据。
xml 和html 类似，不同的是html中都是预定义标签，而xml中没有预定义标签，全都是自定义标签，用来表示一些数据。
```
// XML自定义标签表现形式：
	<student>
		<name>xxx</name>
		<age>18</age>
		<gender>男</gender>
	</student>`
```

1.3 AJAX的特点

1.3.1 AJAX的优点

无需刷新页面而向服务器进行通信请求
允许根据用户事件来更新部分页面内容。

1.3.2 AJAX的缺点

没有浏览历史，不能回退
存在跨域问题(同源)：不能在不同域中发送请求
SEO不友好：爬虫爬取不到页面数据

1.4 AJAX的使用 (编码见原生AJAX文件)

1.4.1 核心对象

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

// 请求报文
行     GET(请求方式)/url请求参数/HTTP/1.1(协议版本)
头     Host: xxx.com
       Cookie: name=xxx
       Content-type: application/x-www-form-urlencodes
       User-Agent: chrome 83
空行
体     POST请求时可不为空（username==admin&password==admin）,GET请求为空



// 响应报文
行     HTTP/1.1(协议版本)  200（响应状态值）  OK（状态字符串）
头     Content-type: text/html;charset=utf-8
       Content-length: 2048
	   Content-encodind: gzip
空行
体     <html>
       	 <head>
       	 </head>
         <body>
           <h1>今天你努力了吗</h1>
         </body>
       </html>

2. Jquery中的AJAX请求

2.1 get请求

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

在这里插入图片描述

2.2 post请求

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

post请求

2.3 通用方式请求

在这里插入图片描述

3. Axios 发送 AJAX请求

3.1 安装或引入

（1）npm方式

// 终端输入
npm install axios --save

（2）script标签引用

// 源于BootCDN
<script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>

3.2 GET 请求

 			// 配置baseUrl
            axios.defaults.baseURL = 'http://127.0.0.1:8000';
            // GET 请求
            axios.get('/axios-server'
                {
                    // url 参数
                    params: {
                        id: 100,
                        vip: 7
                    },
                    // 请求头信息
                    headers: {

                    }
                }).then(res => {
                    console.log(res)
                }).catch(err => {
                    console.log(err)
                })

3.3 POST 请求

 			// 配置baseUrl
            axios.defaults.baseURL = 'http://127.0.0.1:8000';
            // POST 请求
            axios.post('/axios-server', {
                username: 'admin',
                password: 'admin'
            },
                {
                    // url 参数
                    params: {
                        id: 100,
                        vip: 7
                    },
                    // 请求头信息
                    headers: {

                    }
                }).then(res => {
                    console.log(res)
                }).catch(err => {
                    console.log(err)
                })

3.4 通用方式请求

			// 通用方式请求
            axios({
                // 请求方法
                method: 'POST',
                // url
                url: '/axios-server',
                // url参数
                params: {
                    name: 'xz'
                },
                // 头信息
                headers: {

                },
                // 请求体参数
                data: {
                    username: 'admin',
                    password: 'admin'
                }
            })

4. fetch 函数发送 AJAX 请求

			fetch('http://127.0.0.1:8000/fetch-server', {
                // 请求方式
                method: 'POST',
                // 请求头
                headers: {
                    name: 'xz'
                },
                // 请求体
                body: 'username=admin&password=admin'
            }).then(res => {
                return res.json()
            }).then(res => {
                console.log(res)
            })

5. 跨域

5.1 同源策略

同源策略(Same-Origin-Policy)最早是由Netscape公司提出，是浏览器的一种安全策略。
同源：即协议、域名、端口号必须完全相同。
跨越：违背同源策略就是跨域。
AJAX默认遵循同源策略

5.2 跨域问题解决

5.2.1 JSONP

（1）什么是JSONP？

	**JSONP**(JSON with Padding)，是一个非官方的跨域解决方案，只支持get请求。

（2）JSONP 工作机制？

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

（3）JSONP的使用

动态的创建一个script标签

var script = document.createElement("script");

设置script的src，设置回调函数

script.src = "http://localhost:8000/testAJAX?callback=abc";

5.2.2 CORS

在这里插入图片描述

MDISLXT

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-06-08 Ajax

AJAX学习1. 原生AJAX1.1 AJAX 简介1.2 XML 简介1.3 AJAX的特点1.3.1 AJAX的优点1.3.2 AJAX的缺点1.4 AJAX的使用1.4.1 核心对象1. 原生AJAX1.1 AJAX 简介AJAX（Asynchronous JavaScript And XML）= 异步JS和XML通过AJAX可以在浏览器中不刷新页面的同时向服务器发送异步请求，可以提高网页的加载速度。AJAX不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。1.2 XML
复制链接

扫一扫