Ajax学习笔记

最新推荐文章于 2024-09-12 20:04:40 发布

WXL97

最新推荐文章于 2024-09-12 20:04:40 发布

阅读量274

点赞数 1

文章标签： node.js ajax jquery

本文链接：https://blog.csdn.net/weixin_47015791/article/details/114993140

版权

本文详细介绍了Ajax的基础知识，包括AJAX的概念、XML的简介、HTTP协议及AJAX的特点。深入讲解了原生Ajax的使用，包括GET、POST方式、跨域问题及其解决方案，如JSONP和CORS。同时，对比分析了JQuery、Axios和Fetch三种不同的Ajax请求方式，提供了实际的代码示例，是学习Ajax不可或缺的参考资料。

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

课程来自B站尚硅谷Web前端Ajax教程初学者零基础入门到精通全套完整版（ajax最新版）.
代码来自课程

一、简介

1、AJAX简介

AJAX 全称为 Asynchronous JavaScript And XML，就是异步的 JavaScript 和 XML。

通过 AJAX 可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据

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

2、XML简介

XML是一个可拓展标记的语言

XML被用来传输和储存数据

XML和HTML类似，不同的是HTML中的都是预定义标签，而XML中没有预定义标签，全都是自定义标签

比如有一个学生数据： name = “张三”; age = “18”; sex = “男”

用XML表示：
<student>
    <name>张三</name>
    <age>18</age>
    <sex>男</sex>
</student>

XML现在已经被JSON取代了

{
   
    "name": "张三",
    "age": "18",
    "sex" "男"
}

3、AJAX的特点

Ajax的优点

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

Ajax的缺点

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

4、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>

Chrome网络控制台查看通信报文

1、Network --> Hearders 请求头

2、Network --> Response 响应体:通常返回的是html

二、原生AJAX

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

2、当前端想设置自定义的请求头时,需要后端设置响应头

//all表示接收任意类型的请求							
app.all('/server', (request, response) => {
    //响应头 允许跨域     运行自定义响应头
	response.setHeader('Access-Control-Allow-Origin', '*'); 	
	response.setHeader('Access-Control-Allow-Headers', '*');}

3、ajax请求状态:xhr.readyState 0：请求未初始化，还没有调用 open()。

1：请求已经建立，但是还没有发送，还没有调用 send()。
2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。
3：请求在处理中；通常响应中已有部分数据可用了，没有全部完成。
4：响应已完成；您可以获取并使用服务器的响应了

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);
}}

Get方式

//绑定事件
    btn.onclick = function () {
   
      //1. 创建对象
      const xhr = new XMLHttpRequest();
      //2. 初始化 设置请求方法和 url
      xhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200&c=300');
      //3. 发送
      xhr.send();
      //4. 事件绑定 处理服务端返回的结果
      // readystate 是 xhr 对象中的属性, 表示状态 0 1 2 3 4
      // change  改变
      xhr.onreadystatechange = function () {
   
        //判断服务器端返回的结果
        if (xhr.readyState === 4) {
   
          //判断响应状态码 200 404 403 401 500
          // 2xx 成功
          if (xhr.status >= 200 && xhr.status < 300) {
   
            //处理结果  行 头 空行 体
            //响应 
            // console.log(xhr.status);//状态码
            // console.log(xhr.statusText);//状态字符串
            // console.log(xhr.getAllResponseHeaders());//所有响应头
            // console.log(xhr.response);//响应体
            //设置 result 的文本
            result.innerHTML = xhr.response;
          } else {
   }
        }
      }