ajax知识梳理汇总

最新推荐文章于 2023-02-07 16:13:52 发布

真的不想起床

最新推荐文章于 2023-02-07 16:13:52 发布

阅读量105

点赞数

分类专栏： JS 文章标签： ajax

本文链接：https://blog.csdn.net/weixin_45985175/article/details/118811658

版权

JS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

ajax知识梳理汇总

1、ajax

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
通过 AJAX 可以在浏览器中向服务器发送异步请求

1.1优点

无刷新获取数据。

1.2缺点

没有浏览历史，不能回退
存在跨域问题(同源)
SEO （搜索引擎优化）不友好

1.3工作原理

在这里插入图片描述

2、xml

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

name = "小明" ; age = 18 ; gender = "男" ;

<student>
<name>小明</name>
<age>18</age>
<gender>男</gender>
</student>

现在已经被 JSON 取代了，

{"name":"小明","age":18,"gender":"男"}

3、chrome浏览器中

![在这里插入图片描述](https://img-blog.csdnimg.cn/20210717103130979.png

preview：对响应做一个预览
Response Headers：响应头
在这里插入图片描述

Request Header：请求头
在这里插入图片描述

Query String Parameters查询字符串参数
在这里插入图片描述

4、ajax使用

XMLHttpRequest 是 AJAX 的基础。
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新

4.1步骤

4.1.1、创建 XMLHttpRequest 对象

var xhr = new XMLHttpRequest();

4.1.2、设置请求信息

xhr.open(method, url);

//可以设置请求头，一般不设置

xhr.setRequestHeader(‘Content-Type’,‘application/x-www-form-urlencoded’);

4.1.3、发送请求

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

4.1.4、接收响应

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

  btn.onclick=function()
        {
            //创建对象
            const xhr =new XMLHttpRequest();
            //初始化，设置请求方法和url
            xhr.open('GET','http://127.0.0.1:8000/server');
            //发送
            xhr.send();
            //事件绑定，处理服务端返回的结果
            xhr.onreadystatechange=function()
            {
                //判断服务端返回了所有的结果
                if(xhr.readyState===4)
                {
                    //判断响应的状态码
                    //2xx都表示成功
                    if(xhr.status>=200&&xhr.status<300)
                    {
                        result.innerHTML=xhr.response;
                        console.log(xhr.status);
                        console.log(xhr.statusText);
                    }
                }
            }
        }

4.2、readyState

readyState存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪

4.3、onreadystatechange 事件

每当 readyState 改变时，就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。

4.4、向服务器发送请求

如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：

xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

4.5、open

open(method,url,async)
规定请求的类型、URL 以及是否异步处理请求。

method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）

4.5.1、method

GET 还是 POST:
与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，使用 POST 请求：

无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

4.5.2、get请求

（a）、一个简单的 GET 请求：

xhr.open("GET","/try/ajax/demo_get.php",true);
xhr.send();

（b）、解决缓存问题

在一些浏览器中(IE),由于缓存机制的存在，ajax 只会发送的第一次请求，剩
余多次请求不会在发送给浏览器而是直接加载缓存中的数据。
解决方式：浏览器的缓存是根据 url 地址来记录的，所以我们只需要修改 url 地址，向 URL 添加一个唯一的 ID：

xhr.open("get","/testAJAX?t="+Date.now());
xhr.send();

（c）、携带参数

通过 GET 方法发送信息，请向 URL 添加信息：

xhr.open("GET","/try/ajax/demo_get2.php?fname=Henry&lname=Ford",true);
xhr.send();

4.5.3、post 请求

（a）、一个简单 POST 请求：

xhr.open("POST","/ajax/demo_post.php",true);
xhr.send();

（b）、POST 数据

使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定发送的数据：

xhr.open("POST","/ajax/demo_post2.php",true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send("fname=Henry&lname=Ford");

setRequestHeader(header,value)向请求添加 HTTP 头。

header: 规定头的名称
value: 规定头的值

4.5.4、url

xhr.open("GET","ajax_test.html",true);

该文件可以是任何类型的文件，比如 .txt 和 .xml，或者服务器脚本文件，比如 .asp 和 .php （在传回响应之前，能够在服务器上执行任务）。

4.6、send

send(string) 将请求发送到服务器。
string：仅用于 POST 请求

4.7、json数据

创建serve.js

// 1. 引入express
const express = require('express');

// 2. 创建应用对象
const app = express();

// 3. 创建路由规则
app.get('/server', (request, response) => {
  // 设置响应头 设置允许跨域
  response.setHeader('Access-Control-Allow-Origin', '*');
  // 设置响应体
  response.send("Hello Ajax");
});

// 4. 监听服务
app.listen(8000, () => {
  console.log("服务已经启动, 8000 端口监听中...");
 })

app.all('/json-server', (request, response) => {
  // 设置响应头, 设置允许跨域
  response.setHeader('Access-Control-Allow-Origin', '*');
  // 设置响应头, 设置允许自定义头信息
  response.setHeader('Access-Control-Allow-Headers', '*');
  // 响应一个数据
  const data = {
    name: 'atguigu'
  };
  // 对 对象 进行 字符串 转换
  let str = JSON.stringify(data)
  // 设置响应体 
  response.send(str);
});

4.8、json数据

nodemon安装保存后可以自动运行

npm install nodemon -g

5、服务器响应

responseText 获得字符串形式的响应数据。
responseXML 获得 XML 形式的响应数据。

5.1、请求超时与网络异常

// 超时设置 （2秒）
xhr.timeout = 2000;
// 超时回调
xhr.ontimeout = function(){
	alert('网络超时，请稍后重试')
}
// 网络异常回调
xhr.onerror = function(){
	alert('网络异常，请稍后重试')
}

5.2、取消请求

// 手动取消
xhr.abort()

5.3、多次请求不重复请求

let isSending=false;
  btn.onclick=function()
        {
            //创建对象
            const xhr =new XMLHttpRequest();
            //多次请求不重复请求
              if(isSending)
        	  xhr.abort();
            //初始化，设置请求方法和url
            isSending=true;
            xhr.open('GET','http://127.0.0.1:8000/server');
            //发送
            xhr.send();
            //事件绑定，处理服务端返回的结果
            xhr.onreadystatechange=function()
            {
            
                //判断服务端返回了所有的结果
                if(xhr.readyState===4)
                {
                    //判断响应的状态码
                    //2xx都表示成功
                    if(xhr.status>=200&&xhr.status<300)
                    {
                        result.innerHTML=xhr.response;
                        console.log(xhr.status);
                        console.log(xhr.statusText);
                        isSending=false;
                    }
                }
            }
        }

6、jQuery 中的 AJAX

6.1 get 请求

$.get(url, [data], [callback], [type])

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

6.2 post 请求

$.post(url, [data], [callback], [type])

url:请求的 URL 地址。
data:请求携带的参数。
callback:载入成功时回调函数。
type:设置返回内容格式，xml,html, script, json, text,

6.3、通用方法

$.ajax({
	// url
	url: 'http://127.0.0.1:8000/jquery-server',
	// 参数
	data: {a:100, b:200},
	// 请求类型
	type: 'GET',
	// 响应体结果
	dataType: 'json',
	// 成功的回调
	success: function(data){console.log(data);},
	// 超时时间
	timeout: 2000,
	// 失败的回调
	error: function(){console.log('出错啦~');},
	// 头信息
	headers: {
		c: 300,
		d: 400
	}	
})

7、axios

7.1、get

 axios.defaults.baseURL='http://127.0.0.1:8000';
        const btns=document.querySelectorAll('button');
        btns[0].onclick=function(){
            axios.get('/axios',{
                //url参数
                params:{
                    name:"amy",
                    vip:111
                },
                //请求头信息
                /*headers:{
                    name:"mike",
                    age:20
                }*/
            }).then(value=>{
                console.log(value);
            });
        }

7.2、post

 btns[1].onclick=function(){
            axios.post('/axios', 
            {
            //请求体
                username:'admin',
                password:'admin'
            },
            //url参数
            {
                params:{
                    id:200,
                    vip:9
                },
                //请求头参数
                headers:{
                    height:180,
                    weight:200
                }
            }
        );
        }

7.3、通用

 btns[2].onclick=function(){
            axios({
                //请求方法
                method:'POST',
                //url
                url:'axios',
                params:{
                    vip:10,
                    level:30
                },
                //头信息
                headers:{
                    a:100,
                    b:200
                },
                //请求体参数
                data:{
                    username:'admin',
                    password:'admin'
                }

            }).then(response=>{
                console.log(response);
            });
        }

8、fetch

btn.onclick=function(){
            fetch('http://127.0.0.1:8000/fetch',{
                method:'POST',
                 //请求头信息
                headers:{
                    name:'amy',
                    level:10
                },
                //请求体
                body:'username=admin&password=admin'
            }).then(response=>{
               return response.text();
            }).then(response=>{
                console.log(response);
            });
        }

9、跨域

9.1、同源策略

是浏览器的一种安全策略
同源：协议、域名、端口号必须完全相同。
违背同源策略就是跨域

真的不想起床

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax知识梳理汇总

ajax知识梳理汇总一、ajaxAJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。通过 AJAX 可以在浏览器中向服务器发送异步请求最大的优势：无刷新获取数据。工作原理
复制链接

扫一扫