AJAX 课程

最新推荐文章于 2024-08-20 21:46:40 发布

我是真的狗

最新推荐文章于 2024-08-20 21:46:40 发布

阅读量124

点赞数

分类专栏： JS进阶学习文章标签： ajax jsonp http javascript 前端

本文链接：https://blog.csdn.net/wanghuan1020/article/details/112245614

版权

这是一篇关于AJAX技术的详细教程，涵盖了原生AJAX的使用，包括XML介绍、AJAX优缺点、核心对象XMLHttpRequest的使用及解决IE缓存问题。同时，文章还介绍了jQuery中的AJAX操作，如get和post请求，以及现代的axios和fetch API。此外，文章深入探讨了跨域问题，解析了同源策略，提供了JSONP和CORS两种跨域解决方案的原理和实践。

摘要由CSDN通过智能技术生成

AJAX 课程

第 1 章：原生 AJAX

1.1 AJAX 简介

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

1.2 XML 简介

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

比如说我有一个学生数据：

name = "孙悟空";
age = 18;
gender = "男";

用 XML 表示：

<student>
  <name>孙悟空</name>
  <age>18</age>
  <gender>男</gender>
</student>

XML 现在已经被 JSON 取代了

{
       
  "name":"孙悟空",
  "age":18,
  "gender":"男"
}

1.3 AJAX 的特点

1.3.1 AJAX 的优点

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

1.3.2 AJAX 的缺点

没有浏览历史，不能回退
存在跨域问题(同源)
SEO 不友好

1.4 AJAX 的使用

1.4.1 核心对象

XMLHttpRequest，AJAX 的所有操作都是通过该对象进行的。

1.4.2 使用步骤

创建 XMLHttpRequest 对象

var xhr = new XMLHttpRequest();

设置请求信息

xhr.open(method, url); //可以设置请求头，一般不设置
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

发送请求

xhr.send(body) //get 请求不传 body 参数，只有 post 请求使用

接收响应

//xhr.responseXML 接收 xml 格式的响应数据
//xhr.responseText 接收文本格式的响应数据 
xhr.onreadystatechange = function (){
   
  if(xhr.readyState == 4 && xhr.status == 200){
   
    var text = xhr.responseText;
    console.log(text);
  }
}

1.4.3 解决 IE 缓存问题

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

1.4.4 AJAX 请求状态

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

1.5 HTTP 协议简介

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>

第 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:设置返回内容格式ÿ

最低0.47元/天解锁文章

我是真的狗

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录